Optimistic Update 방식으로 좋아요 버튼 구현하기 (TanStack Query)
·
Next.js
현재 하고 있는 프로젝트에서 좋아요 버튼을 구현하려고 한다. 🧩 요구사항게임 목록 페이지에서 특정 게임 카드를 클릭하면 이러한 게임 상세 모달이 뜨는 구조이다. API 응답받은 좋아요 여부에 따라 isLiked가 true면 채워진 좋아요 아이콘을, false면 비워진 좋아요 아이콘을 띄운다. 이런 식으로.. 좋아요 버튼 옆에는 좋아요 개수도 같이 표시한다. 🚀 옵티미스틱 업데이트(Optimistic Update) 방식원래 그냥 구현하면 좋아요 버튼을 클릭하면 → 백엔드에 요청을 보내고 → 응답이 성공하면 업데이트하는 방식이다.모르는 정보들을 불러오는 것도 아니고 그저 좋아요 on/off인데 응답이 올 때까지 기다려야 하면 사용자 입장에서 답답할 수 있다.Optimistic Update 방식은 백엔드..
[Next.js] 모달 열릴 때 스크롤이 하단으로 가는 문제 해결하기
·
Trouble Shooting
🚨 문제 상황Next 15에서 Parallel Routes & Intercepting Routes로 모달을 구현했다.아래처럼 게임 카드 리스트가 존재하고 특정 게임 카드를 클릭하면 모달이 열려야 한다. 문제는 모달을 열면 뒷배경이 페이지의 하단으로 내려간다...아직 UI 구현 단계라 api 연동을 하지 않아 데이터가 좀 이상한데 첫 번째 줄에 있던 게임 카드를 클릭했는데 스크롤이 아래로 내려간 상황이다.모달을 닫으면 다시 원위치로 돌아오기는 하지만, 게임 카드 리스트가 무한 스크롤로 구현되어 있기에 모달을 열고 스크롤이 내려가는 과정에서 다음 게임 리스트 네트워크 요청이 가는 문제가 있다... 챗지피티한테 물어보니 모달이 열릴 때 body 태그의 overflow 스타일을 hidden으로 설정했다가 모달..
[Python] 백준/BOJ 20207번: 달력 (Gold 5)
·
Algorithm/백준 (BOJ)
💻 Problem문제 보러 가기 수현이는 일 년의 날짜가 1일부터 365일로 표시되어 있는 달력을 가지고 있다. 수현이는 너무나도 계획적인 사람이라 올해 일정을 모두 계획해서 달력에 표시해 놨다. 여름이 거의 끝나가자 장마가 시작되었고, 습기로 인해 달력에 표시한 일정이 지워지려고 한다. 지워지는 것을 막고자 수현이는 일정이 있는 곳에만 코팅지를 달력에 붙이려고 한다. 하지만 너무 귀찮았던 나머지, 다음과 같은 규칙을 따르기로 한다. 연속된 두 일자에 각각 일정이 1개 이상 있다면 이를 일정이 연속되었다고 표현한다. 연속된 모든 일정은 하나의 직사각형에 포함되어야 한다. 연속된 일정을 모두 감싸는 가장 작은 직사각형의 크기만큼 코팅지를 오린다. 달력은 다음과 같은 규칙을 따른다. 일정은 시작날짜와..
[Python] 백준/BOJ 17124번: 두 개의 배열 (Silver 3)
·
Algorithm/백준 (BOJ)
💻 Problem문제 보러 가기 정수 배열 A와 B가 있다. A는 총 n개의 서로 다른 양의 정수를 포함하고 B는 총 m개의 서로 다른 양의 정수를 포함한다. A, B를 이용해서 길이가 n인 새로운 배열 C를 만들어보자. C[i] 는 배열 B에 있는 값 중 A[i] 에 가장 가까운 값 (절댓값 차이가 가장 작은 값)으로 정의된다. 만약 이 조건을 만족하는 값들이 여럿 있는 경우, 그 중 가장 크기가 작은 값으로 정의된다.예를 들어 A = [20, 5, 14, 9] 그리고 B = [16, 8, 12] 라고 해보자. C[1] = 16 이다 - 왜냐하면 B[1] = 16이 A[1] = 20에 가장 가깝기 때문이다. C[2] = 8 이다 - 왜냐하면 B[2] = 8이 A[2] = 5에 가장 가깝기 때문이다...
[티스토리] 코드 블록 스타일 커스터마이징: 폰트, 테마, 스타일 (hELLO 스킨)
·
기타/Tistory
현재 내 티스토리는 hELLO 스킨을 사용하고 있다.기본도 심플하고 예쁘지만 hELLO 스킨 기반으로 커스텀한 다른 블로그들 보면서 너무 예쁘다고 생각했다..!!나도 나중에 수정해야지~ 생각만 하고 귀찮아서 안 했는데 ㅎ 이번에 하나하나씩 수정해보려고 한다. 블로그 관리 > 스킨 편집 > html 편집으로 이동해서 스킨을 커스텀할 수 있다.아 그리고 혹시 플러그인 중에 코드 문법 강조를 적용하고 있다면 해제해야 한다.아무것도 안건들였을 때에도 다크모드를 하면 코드블록 글씨 색상이 이상했는데 이 플러그인 때문이었다. ✏️ 폰트 설정웹 폰트를 활용해서 코드 블록의 폰트를 변경하려고 한다.먼저 원하는 폰트를 찾아둔다.나는 D2Coding 폰트로 바꾸기 위해 눈누에서 웹폰트를 복사했다. 복사한 내용을 CSS ..
[Python] 백준/BOJ 5376번: 소수를 분수로 (Silver 1)
·
Algorithm/백준 (BOJ)
💻 Problem문제 보러 가기 유리수 분수를 소수로 나타내면, 소수점 아래 자리가 유한 개인 경우(1/8 = 0.125)와 어떤 자리에서부터 일정한 숫자가 한없이 되풀이되는 경우(1/11 = 0.090909...)가 있다.소수를 입력받은 뒤, 분수로 나타내는 프로그램을 작성하시오. 예제 입력 1 30.50.(3)0.6(142857)예제 출력 1 1/21/343/70 💡 Approach순환소수를 분수로 나타내는 문제이다.순환소수를 분수로 변환하는 법을 노트에 정리해 봤다. 이를 바탕으로 구현하면 된다.입력을 슬라이싱해서 소수 뒷부분만 살펴보도록 했다. 주어진 소수가 유한소수일 경우, 분자는 소수 뒷부분 그대로이고 분모는 10^(소수 뒷부분 길이)가 된다. 주어진 소수가 무한소수(순환소수)일 경우, 소..
[Python] 백준/BOJ 18234번: 당근 훔쳐 먹기 (Gold 3)
·
Algorithm/백준 (BOJ)
💻 Problem문제 보러 가기 꽉꽉나라의 농부 오리는 아무것도 심어져 있지 않은 텃밭을 하나 가지고 있다. 오리는 그 텃밭에 N종류의 당근을 하나씩 심고 T일 동안 재배할 예정이다.당근 i(1 ≤ i ≤ N)는 처음에는 wi의 맛을 가지고 있고, 각 당근 i에 사용할 pi만큼 맛을 증가시켜 주는 영양제가 당근 종류별로 T개씩 준비되어 있다. 오리는 당근이 본래의 맛보다 훨씬 맛있어지기를 바라기 때문에 pi는 항상 wi이상의 값을 가지도록 준비했다. 잠이 많은 오리는 매일 오전에만 텃밭에 나와 당근들을 관리한다. 오리는 각 당근 i에 대해 당근 i가 자리에 없다면 당근 i를 심고, 그렇지 않다면 당근 i에 영양제를 하나 준다.꽉꽉나라에 놀러 온 토끼는 오리가 오전에만 당근을 관리한다는 사실을 알고 오리..
[Python] 코드트리: 민트 초코 우유 (L12)
·
Algorithm/코드트리
💻 Problem문제 보러 가기 삼성 SW 역량 테스트 기출 - 2025 상반기 오전 1번 문제 💡 Approach1. 아침 (morning)모든 학생이 신앙심 1 얻기 but, 점심에 그룹원들이 각자 신앙심을 1씩 대표자에게 넘길 예정이기 때문에 이를 상쇄시킬 수 있다.아침에 신앙심을 얻는 것(+1)과 점심에 대표자에게 신앙심을 넘기는 것(-1)이 상쇄돼서 아무 행동도 하지 않는다. 대신 점심에 대표자에게만 신앙심을 주면 된다. 2. 점심 (afternoon)신봉 음식이 같으면서 연결되어 있는(인접한) 학생들끼리 그룹을 형성한다.bfs로 학생들끼리 연결되어 있는지 확인한다. 그룹을 형성할 때(bfs) 대표자도 함께 찾는다.그룹원들 중 신앙심이 가장 크면서 행 번호, 열 번호가 더 작은 학생이 대표자..