예외 처리

• Next.js이 제공하는 모달 구현 방법Next.js는 Intercepting Routes와 Parallel Routes라는 두 가지 기능을 통해 손쉽게 모달을 구현할 수 있게 해 줍니다. File-system conventions: Intercepting Routes | Next.jsUse intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals.nextjs.org 이 두 기능으로 어떻게 모달을 구현할 수 있는지 간략하게 설명한다면 다음과 같습니다. Parallel Routes(패러..

(이 글은 Next.js App Router 15.2.4 버전을 기준으로 작성되었으며 제가 직접 진행한 실험을 토대로 개인적인 추측과 가설이 포함되어 있습니다. 상황의 이해를 위해 아래 링크된 이전 글을 읽고 오시길 권해드립니다.) 재발한 이슈이번에 포트폴리오의 내비게이션 바를 구현하면서 발생한 이슈입니다. 다른 페이지(/project/1)에서 메인 페이지(/)로 router.push의 방식으로 이동하면 다시 인터섹션 옵저버가 id를 감시하지 못합니다. 어? 이건 지난 글에서 나온 현상과 동일한데요? 새로고침 후에 옵저버가 감시할 id를 찾지 못해서 스크롤 이동을 감지하지 못하는 현상 말입니다. 그래서 그 당시 id도 비동기 서버 컴포넌트 밖으로 빼는 것으로 해결했었죠. [Next.js] App ..

• Navigation Bar내비게이션 바 자체는 초반에 만들었지만 포스팅은 이제 하게 되는군요! 아래가 제 포트폴리오의 내비게이션 바 부분입니다. 헤더라고도 할 수 있겠네요. 제가 구현하려 했던 내비게이션 바의 기능은 다음과 같습니다. 1. 내비게이션 바의 특정 버튼 클릭 시 그 섹션으로 스크롤 이동 2. 현재 스크롤이 특정 섹션 안에 들어오면 그를 감지하여 내비게이션 바 포커스(CSS) 변경 이 중에서 2번이 바로 Scroll Spy(스크롤 스파이) 기능인데 이를 구현하기가 1번에 비해 꽤나 까다로웠습니다. 처음에는 스크롤이 움직일 때마다 위치를 검사하는 로직을 사용했는데, 이로 인한 성능 저하를 보완하기 위한 쓰로틀링 코드까지 추가되면서 코드가 많이 복잡해졌죠. 무엇보다 이때의 코드는 제가 이해..