App Router부터 OAuth·Vercel·EKS·도메인·CDN까지
입문자가 LocalLoop를 개발해 Vercel과 EKS에 출시하고 캐시·보안·관측까지 운영한다.
상태: 출간 후보 웹교정쇄 · 16.3.1 빌드·자동 QA 통과 · 실배포 베타 대기 · 43개 장
버전 주의: 2026-08-14 현재 npm의
latest와 공식 Vercel 저장소 릴리스를 교차 확인해 예제를 Next.js 16.3.1에 잠근다. 16.3 Preview로 소개된 Instant Navigations·partial prefetching 기능은 정식 패치를 쓰더라도 route 단위 성능·캐시 회귀 테스트 후 적용한다.
실습 서비스 LocalLoop는 지역 원데이 클래스 탐색·예약 서비스다. Server Component 목록, OAuth 로그인, 중복 없는 예약, 관리자 승인, 이미지, 검색, Vercel Preview/Production, EKS 대안 배포, DNS·TLS·CDN·관측을 하나로 연결한다.
목차
- 1장. React와 Next.js의 역할
- 2장. App Router의 폴더 문법
- 3장. Server와 Client Component
- 4장. LocalLoop 첫 화면
- 5장. 데이터 모델과 PostgreSQL
- 6장. 읽기·Streaming·Suspense
- 7장. Cache Components와 무효화
- 8장. Server Actions와 중복 없는 예약
- 9장. Route Handler와 외부 인터페이스
- 10장. OAuth/OIDC 로그인
- 11장. 이미지·파일과 CDN
- 12장. 검색·SEO·접근성
- 13장. 오류·로그·보안 헤더
- 14장. 테스트와 브라우저 검증
- 15장. 동일 LocalLoop 화면
- 16장. Vercel Preview 배포
- 17장. Vercel Production·도메인·TLS
- 18장. Vercel CDN과 캐시 운영
- 19장. Docker standalone build
- 20장. EKS 배포
- 21장. 관측·알림·롤백
- 22장. 16.3 전환·패치 절차
- 23장. 출시 체크리스트
- 24장. 권리와 출간 검수
- 25장. 실습 환경을 같은 상태로 맞춘다
- 26장. 예약 도메인을 상태 기계로 설계한다
- 27장. Server Action을 실제 계약으로 만든다
- 28장. 캐시를 데이터 분류표로 결정한다
- 29장. OAuth callback을 공격자의 눈으로 시험한다
- 30장. 업로드를 별도 보안 경계로 다룬다
- 31장. 접근성을 자동 검사와 사람 검토로 묶는다
- 32장. Playwright로 구매 가능한 서비스인지 검증한다
- 33장. 관측성을 사용자 여정에 연결한다
- 34장. Vercel 배포를 증거 기반으로 승인한다
- 35장. EKS의 최소 운영 단위를 완성한다
- 36장. DNS·TLS·CDN 전환을 리허설한다
- 37장. 장애 훈련 — 예약은 됐는데 화면이 실패했다
- 38장. 장애 훈련 — 캐시가 취소된 클래스를 판다
- 39장. 10일 완주 프로젝트
- 40장. 현장 체크 카드와 최종 판정
- 41장. 무중단 migration을 직접 연습한다
- 42장. 비용과 성능을 같은 표에서 판단한다
- 43장. 독자 최종 실기 시험