https://taejinii.tistory.com/84 Next.js Intercepting Routes 를 활용한 Modal 구현 Intercepting Routes란? 경로를 가로채어 현재 레이아웃 내에서 애플레이케이션의 다른 부분의 경로를 로드할 수 있는 것을 말합니다. https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes Rou taejinii.tistory.com 위의 글에선 Intercepting Routes를 활용하여 모달을 렌더링 하는 부분까지 소개를 해보았습니다. 이번 글에서는 쿼리 스트링으로 검색값을 활용하는 방법, Suspense를 사용하여 서버컴포넌트를 점진적으로 로딩하는 방법, error..
Intercepting Routes란? 경로를 가로채어 현재 레이아웃 내에서 애플레이케이션의 다른 부분의 경로를 로드할 수 있는 것을 말합니다. https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes Routing: Intercepting Routes | Next.js Use 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 해당 패턴을 사용하여 모달을 구현하면 상황에따라 여러 이..
27일 새벽 App Router의 새로운 가이드가 Release 되었고 주말 동안 새로운 가이드를 통해 Dashboard를 구현해 보았습니다! 가이드에는 어떠한 내용들이 포함되어 있나요? 가이드에는 CSS 스타일링, Layout과 Page.tsx의 이해, 데이터 Fetching과 서버컴포넌트에서 데이터를 불러와 Suspense를 사용하는 법, DB에 직접 쿼리를 날려 데이터를 불러오는 법, Error Handling, Metadata주입하는 법, 로그인/로그아웃 등 총 16개의 챕터가 있으며 하나의 애플리케이션을 처음부터 끝까지 만드는 과정이 담겨있습니다. 이 중에서 가장 인상 깊었던 것은 API Endpoint를 구현하지 않고 직접 DB에 연결하여 데이터를 가져오는 것이었습니다. 프론트 서버에서 직접 ..
개인프로젝트를 Open API를 사용하여 만들고 있던 도중 나의 코드엔 문제가 없는데 자꾸 데이터가 오류가 나는 현상이 발생했다... (이 현상때문에 3일을 삽질했다..) 개발자 도구탭을 열어보니 Next의 Link태그로 만든 컴포넌트에 마우스 호버를 하기만 해도 fetch 요청이 가는 것이 확인되었다. 정말 미스테리했다. 내가 호버한곳에서 데이터요청은 param에서 id값을 매게 변수로 삼아 데이터를 fetch 해야 하는데 어떻게 요청이 가는 거지..? 심지어 상태코드도 200으로 응답이 잘 오는 것이었다. 또한 페이지 이동시 요청이 아예 안 가고 있다.. 이 현상 때문에 화면에 마우스를 휙휙 휘저으면 내가 사용하던 Open API는 RateLimit을 뱉어버려 나의 코드들이 제대로 작동하지 않는 것이..
