Next.js 16 App Router 격파

세션 소개

Next.js 16 App Router로 서버와 클라이언트의 역할을 나누고 데이터가 있는 웹 페이지를 구성하는 4주 세션입니다. 파일 기반 라우팅과 React Server Components에서 시작해 로딩 경계, 데이터 가져오기, Cache Components와 재검증을 단계적으로 적용합니다.

버전 16에서 바뀐 캐시와 Proxy 용어를 기준으로 하나의 목록·상세 서비스를 구현하고 배포 환경에서 동작을 확인합니다.

이런 분께 추천합니다

React 컴포넌트, props, state와 Effect를 사용해 본 분
Server Component와 Client Component의 경계를 이해하고 싶은 분
App Router의 레이아웃, 동적 경로, 로딩·오류 UI를 직접 구성하고 싶은 분
캐시와 재검증이 화면의 최신성에 미치는 영향을 확인하고 싶은 분

커리큘럼

주차	주제	내용
1주차	App Router와 컴포넌트 경계	프로젝트 구조와 page, layout 파일 규칙을 확인합니다. 서버 컴포넌트를 기본으로 시작하고 상태나 브라우저 API가 필요한 부분만 클라이언트 컴포넌트로 분리합니다.
2주차	라우팅과 사용자 상태	동적 세그먼트로 목록과 상세 경로를 만들고 Link의 탐색 동작을 확인합니다. loading, error, not-found 경계를 추가해 느린 요청과 실패 상태를 처리합니다.
3주차	데이터와 Cache Components	서버에서 데이터를 가져오고 uncached 데이터와 use cache를 비교합니다. cacheLife, cacheTag, revalidateTag를 사용해 갱신 시점과 영향을 받는 화면을 확인합니다.
4주차	운영 경계와 배포	메타데이터와 폼 동작을 정리하고 인증이 필요한 경로의 Proxy 경계를 검토합니다. 빌드 오류와 서버 로그를 확인한 뒤 배포 환경에서 목록·상세·갱신 흐름을 점검합니다.

진행 방식

하나의 목록·상세 서비스를 매주 확장하며 서버와 클라이언트 경계를 표시합니다.
세션에서는 네트워크 요청과 서버 로그를 함께 확인한 뒤 코드를 수정합니다.
캐시 적용 전후의 동작과 선택 이유를 README에 기록합니다.
마지막 주에는 배포된 환경에서 탐색, 오류, 데이터 갱신 흐름을 시연합니다.

준비 사항

노트북, Git·GitHub 계정, Node.js LTS, pnpm
React 함수 컴포넌트와 비동기 JavaScript 기본 이해
배포 가능한 예제 데이터 API 또는 제공되는 샘플 API

참고 자료

아카이브 목록

Next.js 16 App Router 격파

세션 소개

버전 16에서 바뀐 캐시와 Proxy 용어를 기준으로 하나의 목록·상세 서비스를 구현하고 배포 환경에서 동작을 확인합니다.

이런 분께 추천합니다

React 컴포넌트, props, state와 Effect를 사용해 본 분
Server Component와 Client Component의 경계를 이해하고 싶은 분
App Router의 레이아웃, 동적 경로, 로딩·오류 UI를 직접 구성하고 싶은 분
캐시와 재검증이 화면의 최신성에 미치는 영향을 확인하고 싶은 분

커리큘럼

주차	주제	내용
1주차	App Router와 컴포넌트 경계	프로젝트 구조와 page, layout 파일 규칙을 확인합니다. 서버 컴포넌트를 기본으로 시작하고 상태나 브라우저 API가 필요한 부분만 클라이언트 컴포넌트로 분리합니다.
2주차	라우팅과 사용자 상태	동적 세그먼트로 목록과 상세 경로를 만들고 Link의 탐색 동작을 확인합니다. loading, error, not-found 경계를 추가해 느린 요청과 실패 상태를 처리합니다.
3주차	데이터와 Cache Components	서버에서 데이터를 가져오고 uncached 데이터와 use cache를 비교합니다. cacheLife, cacheTag, revalidateTag를 사용해 갱신 시점과 영향을 받는 화면을 확인합니다.
4주차	운영 경계와 배포	메타데이터와 폼 동작을 정리하고 인증이 필요한 경로의 Proxy 경계를 검토합니다. 빌드 오류와 서버 로그를 확인한 뒤 배포 환경에서 목록·상세·갱신 흐름을 점검합니다.

진행 방식

하나의 목록·상세 서비스를 매주 확장하며 서버와 클라이언트 경계를 표시합니다.
세션에서는 네트워크 요청과 서버 로그를 함께 확인한 뒤 코드를 수정합니다.
캐시 적용 전후의 동작과 선택 이유를 README에 기록합니다.
마지막 주에는 배포된 환경에서 탐색, 오류, 데이터 갱신 흐름을 시연합니다.

준비 사항

노트북, Git·GitHub 계정, Node.js LTS, pnpm
React 함수 컴포넌트와 비동기 JavaScript 기본 이해
배포 가능한 예제 데이터 API 또는 제공되는 샘플 API

참고 자료

Next.js 16 App Router 격파

세션 소개

버전 16에서 바뀐 캐시와 Proxy 용어를 기준으로 하나의 목록·상세 서비스를 구현하고 배포 환경에서 동작을 확인합니다.

이런 분께 추천합니다

React 컴포넌트, props, state와 Effect를 사용해 본 분
Server Component와 Client Component의 경계를 이해하고 싶은 분
App Router의 레이아웃, 동적 경로, 로딩·오류 UI를 직접 구성하고 싶은 분
캐시와 재검증이 화면의 최신성에 미치는 영향을 확인하고 싶은 분

커리큘럼

주차	주제	내용
1주차	App Router와 컴포넌트 경계	프로젝트 구조와 page, layout 파일 규칙을 확인합니다. 서버 컴포넌트를 기본으로 시작하고 상태나 브라우저 API가 필요한 부분만 클라이언트 컴포넌트로 분리합니다.
2주차	라우팅과 사용자 상태	동적 세그먼트로 목록과 상세 경로를 만들고 Link의 탐색 동작을 확인합니다. loading, error, not-found 경계를 추가해 느린 요청과 실패 상태를 처리합니다.
3주차	데이터와 Cache Components	서버에서 데이터를 가져오고 uncached 데이터와 use cache를 비교합니다. cacheLife, cacheTag, revalidateTag를 사용해 갱신 시점과 영향을 받는 화면을 확인합니다.
4주차	운영 경계와 배포	메타데이터와 폼 동작을 정리하고 인증이 필요한 경로의 Proxy 경계를 검토합니다. 빌드 오류와 서버 로그를 확인한 뒤 배포 환경에서 목록·상세·갱신 흐름을 점검합니다.

진행 방식

하나의 목록·상세 서비스를 매주 확장하며 서버와 클라이언트 경계를 표시합니다.
세션에서는 네트워크 요청과 서버 로그를 함께 확인한 뒤 코드를 수정합니다.
캐시 적용 전후의 동작과 선택 이유를 README에 기록합니다.
마지막 주에는 배포된 환경에서 탐색, 오류, 데이터 갱신 흐름을 시연합니다.

준비 사항

노트북, Git·GitHub 계정, Node.js LTS, pnpm
React 함수 컴포넌트와 비동기 JavaScript 기본 이해
배포 가능한 예제 데이터 API 또는 제공되는 샘플 API