파일 기반 라우팅 — 폴더 구조가 URL이 된다
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. `app/shop/(sale)/items/page.tsx` 파일이 접근되는 URL은?
💡 Route Groups는 괄호 `()`로 감싼 폴더명으로, URL 경로에 포함되지 않습니다. 따라서 `(sale)` 폴더는 무시되고 `/shop/items`가 실제 URL이 됩니다. Route Groups는 레이아웃 분리나 코드 구성 목적으로만 사용되며, URL에 영향을 주지 않습니다.
Q2. `app/docs/[...slug]/page.tsx` 파일에서 URL `/docs/api/v2/users`에 접근할 때 `params.slug`의 값은?
💡 Catch-all 라우트(`[...slug]`)는 모든 경로 세그먼트를 배열로 받습니다. `/docs/api/v2/users`에서 `docs`는 폴더 이름이므로, `slug`는 나머지 세그먼트인 `['api', 'v2', 'users']` 배열이 됩니다.
Q3. 동적 라우트 페이지에서 존재하지 않는 ID를 처리하는 올바른 방법은?
💡 `next/navigation`의 `notFound()` 함수를 호출하면 Next.js가 자동으로 가장 가까운 `not-found.tsx` UI를 표시하고 HTTP 상태 코드 404를 반환합니다. 이 함수는 실행을 즉시 중단하므로 `return` 없이 단독으로 사용합니다. 다른 방법들은 404 처리에 적합하지 않습니다.
Q4. `app/blog/[id]/page.tsx`와 `app/blog/page.tsx`가 동시에 존재할 때, URL `/blog`에 매칭되는 파일은?
💡 `app/blog/page.tsx`는 정확히 `/blog` URL에 매칭되고, `app/blog/[id]/page.tsx`는 `/blog/anything` 형태의 URL에 매칭됩니다. 두 파일이 공존해도 충돌이 없으며, Next.js는 정확한 경로(`page.tsx`)를 동적 경로(`[id]/page.tsx`)보다 우선시합니다.
Q5. 빌드 시 동적 라우트의 정적 경로를 미리 생성하기 위해 사용하는 함수는?
💡 App Router에서는 `generateStaticParams()`를 export하여 빌드 시 정적으로 생성할 경로를 지정합니다. Pages Router의 `getStaticPaths()`와 동일한 역할이지만, App Router 전용 함수입니다. 이 함수가 반환하는 파라미터 목록에 해당하는 페이지들이 빌드 시 정적 HTML로 생성됩니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.