프로젝트 생성 & 구조 완전 해부 — App Router vs Pages Router
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Next.js App Router에서 `app/layout.tsx` 파일이 반드시 포함해야 하는 태그는?
💡 루트 `app/layout.tsx`는 반드시 `<html>`과 `<body>` 태그를 포함해야 합니다. Next.js는 이 파일을 전체 HTML 문서의 뼈대로 사용하므로, 이 태그들이 없으면 빌드 에러가 발생합니다. 하위 레이아웃에서는 이 태그들을 포함하지 않아도 됩니다.
Q2. App Router에서 페이지 로딩 중 자동으로 표시되는 Suspense fallback UI를 구현하려면 어떤 파일을 만들어야 하는가?
💡 `app/loading.tsx` 파일을 생성하면 Next.js가 자동으로 해당 세그먼트를 Suspense로 감싸고, 페이지 데이터 로딩 중에 loading.tsx의 UI를 fallback으로 표시합니다. 별도의 Suspense 설정 없이 파일 이름 컨벤션만으로 동작합니다.
Q3. Next.js에서 클라이언트(브라우저)에서 접근 가능한 환경 변수를 설정하는 올바른 방법은?
💡 Next.js에서 클라이언트(브라우저)에서 접근 가능한 환경 변수를 만들려면 반드시 `NEXT_PUBLIC_` 접두사를 붙여야 합니다. 이 접두사가 없는 환경 변수는 서버에서만 접근 가능하며, 클라이언트에서 접근하면 `undefined`가 반환됩니다. 이는 민감한 키(DB 비밀번호 등)가 클라이언트에 노출되는 것을 방지하는 보안 설계입니다.
Q4. App Router와 Pages Router의 가장 중요한 차이점은?
💡 App Router의 가장 큰 특징은 기본 컴포넌트가 Server Component라는 점입니다. 클라이언트 기능(useState, useEffect, 브라우저 API 등)이 필요한 경우에만 `'use client'` 지시어를 추가합니다. Pages Router에서는 모든 컴포넌트가 Client Component였습니다. Pages Router는 현재도 사용 가능하며, 두 라우터를 동일 프로젝트에서 공존시킬 수도 있습니다.
Q5. `app/error.tsx` 파일에서 반드시 추가해야 하는 지시어는 무엇이고, 그 이유는?
💡 `error.tsx`는 반드시 `'use client'` 지시어를 포함해야 합니다. React의 Error Boundary는 클라이언트 사이드에서만 동작하는 기능이며, `reset` 함수(에러 복구)나 `useEffect`를 통한 에러 로깅도 클라이언트에서 실행되어야 합니다. 이 지시어를 빠뜨리면 빌드 에러가 발생합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.