🚨 문제 상황모달을 열면 console에 아래와 같은 에러가 떴다.installHook.js:1 Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element: ​…​​overrideMethod @ installHook.js:1shouldSkipElement @ layout-router.tsx:139InnerScrollAndFocusHandler.handlePotentialScroll @ layout-router.tsx:227componentDidMount @ layout-router.tsx:294react_stack_bottom_frame @ react-dom-client.development.js:2360..

💻 Problem문제 보러 가기 1949 년 인도 수학자 Kaprekar는 Kaprekar 연산을 고안해 냈다. Kaprekar 연산은 네 자릿수 중 모든 자릿수가 같지 않은 수(1111, 2222 등을 제외한)의 각 자리의 숫자를 재배열해서 만들 수 있는 가장 큰 수와 가장 작은 수를 만들어서 그 차이를 계산하는데, 그 결과로 나온 새로운 숫자를 갖고 같은 과정을 반복하는 것이다. 간단한 연산이지만 Kaprekar는 이 연산이 놀라운 결과를 보여준다는 것을 발견했다. 올해 연도인 2008로 그 결과를 알아보자. 2008로 만들 수 있는 가장 큰 수는 8200이고 가장 작은 수는 0028이다. 8200 – 0028 = 8172 8721 – 1278 = 7443 7443 – 3447 = 3996 9963..

현재 하고 있는 프로젝트에서 좋아요 버튼을 구현하려고 한다. 🧩 요구사항게임 목록 페이지에서 특정 게임 카드를 클릭하면 이러한 게임 상세 모달이 뜨는 구조이다. API 응답받은 좋아요 여부에 따라 isLiked가 true면 채워진 좋아요 아이콘을, false면 비워진 좋아요 아이콘을 띄운다. 이런 식으로.. 좋아요 버튼 옆에는 좋아요 개수도 같이 표시한다. 🚀 옵티미스틱 업데이트(Optimistic Update) 방식원래 그냥 구현하면 좋아요 버튼을 클릭하면 → 백엔드에 요청을 보내고 → 응답이 성공하면 업데이트하는 방식이다.모르는 정보들을 불러오는 것도 아니고 그저 좋아요 on/off인데 응답이 올 때까지 기다려야 하면 사용자 입장에서 답답할 수 있다.Optimistic Update 방식은 백엔드..

🚨 문제 상황Next 15에서 Parallel Routes & Intercepting Routes로 모달을 구현했다.아래처럼 게임 카드 리스트가 존재하고 특정 게임 카드를 클릭하면 모달이 열려야 한다. 문제는 모달을 열면 뒷배경이 페이지의 하단으로 내려간다...아직 UI 구현 단계라 api 연동을 하지 않아 데이터가 좀 이상한데 첫 번째 줄에 있던 게임 카드를 클릭했는데 스크롤이 아래로 내려간 상황이다.모달을 닫으면 다시 원위치로 돌아오기는 하지만, 게임 카드 리스트가 무한 스크롤로 구현되어 있기에 모달을 열고 스크롤이 내려가는 과정에서 다음 게임 리스트 네트워크 요청이 가는 문제가 있다... 챗지피티한테 물어보니 모달이 열릴 때 body 태그의 overflow 스타일을 hidden으로 설정했다가 모달..

💻 Problem문제 보러 가기 수현이는 일 년의 날짜가 1일부터 365일로 표시되어 있는 달력을 가지고 있다. 수현이는 너무나도 계획적인 사람이라 올해 일정을 모두 계획해서 달력에 표시해 놨다. 여름이 거의 끝나가자 장마가 시작되었고, 습기로 인해 달력에 표시한 일정이 지워지려고 한다. 지워지는 것을 막고자 수현이는 일정이 있는 곳에만 코팅지를 달력에 붙이려고 한다. 하지만 너무 귀찮았던 나머지, 다음과 같은 규칙을 따르기로 한다. 연속된 두 일자에 각각 일정이 1개 이상 있다면 이를 일정이 연속되었다고 표현한다. 연속된 모든 일정은 하나의 직사각형에 포함되어야 한다. 연속된 일정을 모두 감싸는 가장 작은 직사각형의 크기만큼 코팅지를 오린다. 달력은 다음과 같은 규칙을 따른다. 일정은 시작날짜와..

💻 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 스킨을 사용하고 있다.기본도 심플하고 예쁘지만 hELLO 스킨 기반으로 커스텀한 다른 블로그들 보면서 너무 예쁘다고 생각했다..!!나도 나중에 수정해야지~ 생각만 하고 귀찮아서 안 했는데 ㅎ 이번에 하나하나씩 수정해보려고 한다. 블로그 관리 > 스킨 편집 > html 편집으로 이동해서 스킨을 커스텀할 수 있다.아 그리고 혹시 플러그인 중에 코드 문법 강조를 적용하고 있다면 해제해야 한다.아무것도 안건들였을 때에도 다크모드를 하면 코드블록 글씨 색상이 이상했는데 이 플러그인 때문이었다. ✏️ 폰트 설정웹 폰트를 활용해서 코드 블록의 폰트를 변경하려고 한다.먼저 원하는 폰트를 찾아둔다.나는 D2Coding 폰트로 바꾸기 위해 눈누에서 웹폰트를 복사했다. 복사한 내용을 CSS ..

💻 Problem문제 보러 가기 유리수 분수를 소수로 나타내면, 소수점 아래 자리가 유한 개인 경우(1/8 = 0.125)와 어떤 자리에서부터 일정한 숫자가 한없이 되풀이되는 경우(1/11 = 0.090909...)가 있다.소수를 입력받은 뒤, 분수로 나타내는 프로그램을 작성하시오. 예제 입력 1 30.50.(3)0.6(142857)예제 출력 1 1/21/343/70 💡 Approach순환소수를 분수로 나타내는 문제이다.순환소수를 분수로 변환하는 법을 노트에 정리해 봤다. 이를 바탕으로 구현하면 된다.입력을 슬라이싱해서 소수 뒷부분만 살펴보도록 했다. 주어진 소수가 유한소수일 경우, 분자는 소수 뒷부분 그대로이고 분모는 10^(소수 뒷부분 길이)가 된다. 주어진 소수가 무한소수(순환소수)일 경우, 소..