Next.js
학습 목표: App Router에서 경로·서버/클라이언트 경계·데이터 조회·배포 흐름을 연결합니다. 선수 지식: React 컴포넌트와 state, JavaScript 비동기 처리, HTTP 기초가 필요합니다. 초급·중급·고급의 목표를 확인하고 현재 공개된 글부터 학습하세요. 빈 단계는 계획을 유지하며 내용을 차례로 보강합니다.
단계별 학습 목표
각 단계의 학습 목표입니다. 공개된 글은 위의 단계별 링크에서 바로 볼 수 있습니다.
초급 목표
라우팅과 페이지 구성의 기본을 익혀, 서버와 브라우저의 역할을 구분하고 데이터가 표시되는 웹 화면을 만드는 방법을 다룹니다.
학습 주제
- 파일 기반 라우팅
- 서버와 클라이언트 경계
- 데이터 표시와 오류 화면
중급 목표
데이터 갱신과 인증 흐름을 화면에 연결하여, 로딩과 오류 및 캐시로 생기는 실제 사용자 문제를 해결하는 방법을 다룹니다.
학습 주제
- 데이터 변경과 갱신
- 인증과 접근 제어
- 캐시와 오류 처리
고급 목표
서비스의 데이터 특성과 운영 조건을 기준으로, 렌더링과 캐시 및 배포 구조의 장단점을 비교하는 설계를 다룹니다.
학습 주제
- 렌더링 전략 비교
- 캐시 일관성 설계
- 운영 관측과 배포 선택
단계 안에서는 학습 순서대로 표시합니다. 선택 참고는 필수 진도에 포함하지 않습니다.
초급 14개
학습 1 / 37 · 필수 학습
Next.js App Router 첫 프로젝트 만들기학습 2 / 37 · 필수 학습
Next.js package.json scripts dependencies 이해학습 3 / 37 · 필수 학습
Next.js Server Component와 Client Component 구분학습 4 / 37 · 필수 학습
Next.js next 폴더와 빌드 산출물 이해학습 5 / 37 · 필수 학습
Next.js Route Group Private Folder template tsx학습 6 / 37 · 필수 학습
Next.js Parallel Routes default tsx학습 7 / 37 · 필수 학습
Next.js Intercepting Routes 모달 라우팅학습 8 / 37 · 필수 학습
Next.js 동적 라우트 slug params catch-all학습 9 / 37 · 필수 학습
Next.js params should be awaited 오류 해결학습 10 / 37 · 필수 학습
Next.js loading error not-found 라우트 상태 처리학습 11 / 37 · 필수 학습
Next.js window is not defined 오류 해결학습 12 / 37 · 필수 학습
Next.js hydration failed 오류 해결학습 13 / 37 · 필수 학습
Next.js Server Component 데이터 조회와 Streaming
이 단계의 학습 글은 준비 중입니다.
중급 15개
학습 14 / 37 · 필수 학습
Next.js MSW 2 Mock API 만들기학습 15 / 37 · 필수 학습
Axios 설치와 Next.js API 요청 구조학습 16 / 37 · 필수 학습
Next.js Route Handler 405 오류 해결학습 17 / 37 · 필수 학습
Next.js Server Actions React Hook Form 검증학습 18 / 37 · 필수 학습
Next.js Auth.js 로그인 세션 로그아웃학습 19 / 37 · 필수 학습
Next.js 인증 페이지와 Proxy 접근 제어학습 20 / 37 · 필수 학습
Next.js useSearchParams Suspense 오류 해결학습 21 / 37 · 필수 학습
Next.js fetch 캐시와 재검증학습 22 / 37 · 필수 학습
Next.js TanStack Query SSR HydrationBoundary학습 23 / 37 · 필수 학습
Next.js cookies headers Dynamic server usage 오류 해결학습 24 / 37 · 필수 학습
Next.js 환경변수 env local 적용 오류 해결학습 25 / 37 · 필수 학습
Next.js Metadata API와 generateMetadata학습 26 / 37 · 필수 학습
Next.js metadata 적용 오류 해결학습 27 / 37 · 필수 학습
Next.js Image remotePatterns 오류 해결학습 28 / 37 · 필수 학습
Next.js redirects 설정과 URL 이동 처리
이 단계의 학습 글은 준비 중입니다.
고급 9개
학습 29 / 37 · 필수 학습
Next.js 캐시 구조 Request Data Full Route Router Cache학습 30 / 37 · 필수 학습
Next.js SEO 체크리스트 metadata 초기 HTML OG학습 31 / 37 · 필수 학습
Next.js SEO 종합 가이드 App Router부터 배포 확인학습 32 / 37 · 필수 학습
Next.js 성능 최적화 체크리스트 번들 이미지 캐시학습 33 / 37 · 필수 학습
Next.js 렌더링 성능 최적화 기준학습 34 / 37 · 필수 학습
Next.js Proxy 마이그레이션 matcher Node.js Runtime학습 35 / 37 · 필수 학습
Next.js 보안 패치 영향 범위 점검학습 36 / 37 · 필수 학습
Next.js SEO SSR 초기 HTML 검색 노출 구조학습 37 / 37 · 필수 학습
Next.js 캐시 API 변화 useCache deprecation 대응
이 단계의 학습 글은 준비 중입니다.
개념·참고 1개
참고 1 / 1 · 선택 참고
Next.js로 TaskFlow 만들기: 38편 학습 과정 미리보기
이 단계의 학습 글은 준비 중입니다.