본문 바로가기

Next.js2

Parallel Route의 필요 이유 Next.js를 사용하는 사람들이라면 Parallel Route를 모두 알 거라고 생각한다.이에 내가 공부한 Parallel Route를 이 글에 정리해보겠다. Parallel Route를 알기 위해선 먼저 그 정의에 대해 알아야 한다.Parallel Route는 병렬적인 라우트를 뜻하며, 하나의 페이지에서 2개 이상의 route를 동시에 렌더링 하는 구조이다.구현 방식Parallel Route를 구현하는 방식은 매우 간단하다.1. 폴더 앞에 @를 붙여 생성한다. 그렇게 되면 그 폴더는 slot라는 뚫려있는 빈 구멍이 된다.2. slot 폴더 하위에 루트처럼 page.tsx를 선언한다.3. 이렇게 하면 기본 URL(루트 페이지)에 각 slot 하위의 페이지들이 같이 나타난다.4. 상위에 있는 layout.. 2026. 1. 5.
Next.js Suspense vs Loading.js 이번 글은 Loading.tsx에 관련된 강의를 보다가 1시간 졸고 화나서 적는 글이다.이번 글에선 Loading.tsx를 언제 사용해야 하는지와 Suspense와의 차이점을 정리한 글이다.Loading.tsx의 사용방법Loading.tsx의 사용방법은 매우 간단하다.그저 아래의 코드를 조건의 맞게 파일로 만들어주면 된다.export default function Loading() { return Loading...}조건 또한 매우 간단하다.그저 파일 이름과 파일의 위치만 지켜준다면 자동으로 loading.tsx가 실행된다. 파일 이름반드시 loading.tsx or loading.jsx파일 위치APP Router의 route segment 폴더 안app/ └─ dashboard/ ├─ page.. 2025. 12. 23.