실전 프로젝트 — Next.js + CI4 풀스택 앱 완성
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Next.js App Router에서 라우트 그룹 `(auth)`, `(main)`, `(admin)`을 사용하는 주요 목적은?
💡 라우트 그룹 (괄호)은 URL에 포함되지 않으며, 서로 다른 레이아웃(layout.tsx)을 공유하는 라우트를 묶는 데 사용합니다. 예를 들어 `(admin)` 그룹의 모든 페이지는 관리자 레이아웃(사이드바, 관리자 내비게이션 등)을 공유할 수 있습니다.
Q2. 실전 프로젝트에서 CI4 JWT 토큰을 NextAuth.js 세션에 저장하는 가장 적절한 위치는?
💡 올바른 순서: 1) `authorize`에서 CI4 로그인 후 user 객체에 ci4Token 포함 → 2) `jwt` 콜백에서 `user`가 있으면 `token.ci4Token` 저장 → 3) `session` 콜백에서 `session.ci4Token`으로 복사. 이 방식으로 JWT HttpOnly 쿠키에 안전하게 토큰이 저장됩니다.
Q3. 서버 컴포넌트에서 데이터를 페칭할 때 `revalidate = 30`과 BFF 패턴이 각각 적합한 상황은?
💡 `revalidate=30`은 서버 컴포넌트에서 CI4 API를 직접 호출할 때 30초간 캐싱하여 불필요한 API 호출을 줄입니다. BFF는 클라이언트 컴포넌트(브라우저)에서 CORS 없이 API를 호출하기 위한 프록시로, 인증 토큰도 안전하게 처리할 수 있습니다.
Q4. 풀스택 프로젝트에서 `loading.tsx`와 `error.tsx`를 생성하는 이유는?
💡 `loading.tsx`는 해당 라우트 세그먼트를 자동으로 Suspense로 래핑하여 데이터 로딩 중 로딩 UI를 표시합니다. `error.tsx`는 서버 컴포넌트에서 발생하는 런타임 에러를 캐치하여 에러 UI와 재시도 버튼을 제공합니다. 둘 다 Next.js App Router의 파일 기반 특수 파일입니다.
Q5. 이 강의(1~30강)를 통해 완성한 풀스택 앱의 아키텍처에서 Next.js가 담당하는 주요 역할이 아닌 것은?
💡 주 데이터베이스(게시글, 댓글, 사용자 등)는 CI4 백엔드 서버의 MySQL/MariaDB입니다. Next.js + Prisma + PostgreSQL은 보조 역할(프로파일 설정, 알림, Next.js 전용 기능 등)을 담당합니다. Next.js의 주요 역할은 SSR/SSG/ISR, BFF 프록시, NextAuth 인증, UI 렌더링입니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.