4개의 챕터를 거치며 빈 프로젝트에 블로그 기능을 단계적으로 추가했습니다.
| 챕터 | 주제 | 블로그에 추가된 것 |
|---|---|---|
| Ch.1 | App Router 기초 | 페이지 구조(홈, 블로그, 소개), 레이아웃, 동적 라우트 |
| Ch.2 | 서버/클라이언트 컴포넌트 | CategorySidebar, LikeButton, SearchablePostList |
| Ch.3 | Data Fetching & 렌더링 | json-server 연동, 서버 fetching, loading.tsx, 글 작성 폼 |
| Ch.4 | Navigation + 실습 고도화 | NavLink, URL 상태 관리, 404 처리 |
| 개념 | 한 줄 요약 |
|---|---|
| 파일 기반 라우팅 | app/blog/page.tsx = /blog 경로 |
| layout.tsx | 공통 UI를 감싸는 래퍼, 페이지 이동 시에도 상태 유지 |
| 동적 라우트 | [slug] 폴더로 가변 URL 처리 |
| Link 컴포넌트 | 클라이언트 사이드 내비게이션으로 빠른 페이지 이동 |
| 개념 | 한 줄 요약 |
|---|---|
| 서버 컴포넌트 | 기본값, 서버에서 렌더링되며 클라이언트 번들에 포함되지 않음 |
| 클라이언트 컴포넌트 | 'use client' 선언, 브라우저 인터랙션이 필요할 때 사용 |
| children/props 전달 | 서버 컴포넌트를 children이나 다른 prop으로 넘겨 클라이언트 경계 최소화 |
| 직렬화 경계 | 서버 → 클라이언트로 넘기는 props는 React가 직렬화할 수 있어야 함 |
| 개념 | 한 줄 요약 |
|---|---|
| 서버 fetching | 서버 컴포넌트에서 async/await으로 직접 데이터 접근 |
| 정적/동적 렌더링 | 기본은 정적으로 최적화되며, Dynamic API 사용 시 요청별 렌더링이 필요해질 수 있음 |
| Streaming | loading.tsx와 Suspense로 점진적 UI 표시 |
| 캐싱 | fetch 옵션으로 캐시 동작 제어, revalidatePath로 갱신 |
| Server Actions | 'use server' 함수로 서버에서 데이터 변경, 폼과 직접 연결 |
| 개념 | 한 줄 요약 |
|---|---|
| Link 심화 | 클라이언트 사이드 내비게이션, Prefetching |
| usePathname | 현재 경로를 읽어 활성 링크 스타일링 |
| useSearchParams | URL 쿼리 스트링으로 상태 관리 (클라이언트) |
| searchParams prop | 페이지 컴포넌트에서 URL 쿼리 읽기 |
| useRouter | 코드에서 프로그래밍적 페이지 이동 |
| notFound | 404 페이지 표시, not-found.tsx로 커스터마이징 |
Next.js에는 비슷해 보이는 도구가 많습니다. 상황별로 어떤 것을 선택해야 하는지 정리합니다:
| 하고 싶은 일 | 사용할 도구 | 비고 |
|---|---|---|
| 링크를 렌더링하고 싶다 | <Link> | Prefetching + 클라이언트 사이드 내비게이션 |
| 현재 경로를 알고 싶다 | usePathname() | 클라이언트 컴포넌트 전용 |
| URL 쿼리를 읽고 싶다 (클라이언트) | useSearchParams() | 클라이언트 컴포넌트 전용 |
| URL 쿼리를 읽고 싶다 (서버) | searchParams prop | 페이지 컴포넌트에서 사용 |
| 코드로 페이지를 이동하고 싶다 (클라이언트) | useRouter() | push, replace, back |
| 렌더링 중 리다이렉트하고 싶다 | redirect() | Server Action, 서버 컴포넌트, 클라이언트 렌더링 중 사용 |
| 404 페이지를 표시하고 싶다 | notFound() | 가장 가까운 not-found.tsx 렌더링 |
| 서버에서 데이터를 가져오고 싶다 | 서버 컴포넌트 async/await | fetch, DB 조회 등 |
| 사용자 인터랙션이 필요하다 | 'use client' | 최소한의 컴포넌트만 클라이언트로 |
| 서버에서 데이터를 변경하고 싶다 | Server Action ('use server') | form action 또는 직접 호출 |
마지막 세션에서는 Ch.1~4의 개념을 총동원하여 블로그를 고도화합니다. 구체적으로:
?category=react)건드릴 파일들:
db.json 카테고리 필드 추가
app/layout.tsx NavLink 적용
app/components/NavLink.tsx 새 파일
app/components/CategorySidebar.tsx Link + useSearchParams로 리팩터링
app/blog/page.tsx searchParams로 필터링
app/blog/[slug]/page.tsx notFound() 추가
app/blog/[slug]/not-found.tsx 새 파일