데이터를 그리기 위한 Front_End 공부하기 : Next.js 학습 로드맵.
데이터를 그리기 위한 Front_End 언어 공부하기 : Next.js 학습 로드맵.
▽ 데이터를 그리기 위한 Front_End 언어 공부하기 : Next.js 학습 로드맵.
목 차
📒 기초 개념
1. Next.js 철학
1-1. React 위에서 동작하는 프레임워크
1-2. Zero-Config 철학
2. Hybrid Rendering
2-1. CSR(Clinet Side Rendering)
2-2. SSR(Sever Side Rendering)
2-3. SSG(Static Site Generation)
2-4. ISR(Incremental Static Regeneration)
3. React App 대비 장점.
3-1. 파일 기반 라우팅: pages/ 또는 app/ 구조 기반
3-2. SEO 친화적: SSR과 메타 태그 관리
3-3. 이미지 최적화: <Image /> 컴포넌트
3-4. 코드 스플리팅 자동 지원: 라우트별 코드 분리
3-5. 서버리스 친화: API Routes 내장
4. 라우팅.
4-1. Pages 디렉토리
4-2. 동적 라우팅.
5. 데이터 패칭
5-1. getStaticProps
5-2. getServerSideProps
5-3. 클라이언트 사이드 fetch
6. 정적 파일 관리
6-1. /public 디렉토리 → / 루트에서 접근 가능
6-2. 이미지, 아이콘, robots.txt, sitemap.xml 관리
7. 스타일링
7-1. Tailwind CSS
📒 심화 개념
1. App Router (Next.js 13+)
1-1. pages Router vs App Router 비교
1-2. 디렉토리 구조
1-3.Server Actions: 서버 함수 직접 호출
2. 서버 컴포넌트 vs 클라이언트 컴포넌트
2-1. Server Component
2-2. Client Component
3. Streaming & Suspense
3-1. Streaming
3-2. Suspense
4. API Routes
5. 서버리스 & Edge Runtime
5-1. 서버리스 함수
5-2. Edge Runtime
6. 이미지 최적화 : Image/ 컴포넌트
7. 국제화(i18n) & SEO
7-1. i18n
7-2. SEO 최적화
8. 보안
8-1. Middleware 활용
8-2. CSP(Content Security Policy)
9. ISR (Incremental Static Regeneration) : 정적 페이지 부분 업데이트
10. Caching 전략
10-1. HTTP 캐싱 헤더
10-2. Next.js 캐싱 레이어
10-3. SWR/React Query와 병행.
📒 빌드 및 Devops 개념
1. 빌드 최적화
1-1. Bundle Analyzer 사용
1-2. Dynamic Import
2. 배포 전략
2-1. Vercel
2-1-1. GitHub 연동 → CI/CD 자동 배포
2-1-2 Edge Functions & ISR 기본 지원
2-2. Docker 기반 배포
2-2-1. Multi-stage build → 경량 이미지 생성
2-2-2. Nginx Reverse Proxy
3. 운영 모니터링
3-1. Sentry: 에러 로깅
3-2. Vercel Analytics: 실시간 성능 지표
3-3. Lighthouse: 성능 측정
📒 기초 개념
1. Next.js 철학
1-1. React 위에서 동작하는 프레임워크
1-2. Zero-Config 철학
2. Hybrid Rendering
2-1. CSR(Clinet Side Rendering)
2-2. SSR(Sever Side Rendering)
2-3. SSG(Static Site Generation)
2-4. ISR(Incremental Static Regeneration)
3. React App 대비 장점.
3-1. 파일 기반 라우팅: pages/ 또는 app/ 구조 기반
3-2. SEO 친화적: SSR과 메타 태그 관리
3-3. 이미지 최적화 : Image/ 컴포넌트
3-4. 코드 스플리팅 자동 지원: 라우트별 코드 분리
3-5. 서버리스 친화: API Routes 내장
4. 라우팅.
4-1. Pages 디렉토리
4-2. 동적 라우팅.
5. 데이터 패칭
5-1. getStaticProps
5-2. getServerSideProps
5-3. 클라이언트 사이드 fetch
6. 정적 파일 관리
6-1. /public 디렉토리 → / 루트에서 접근 가능
6-2. 이미지, 아이콘, robots.txt, sitemap.xml 관리
7. 스타일링
7-1. Tailwind CSS
📒 심화 개념
1. App Router (Next.js 13+)
1-1. pages Router vs App Router 비교
1-2. 디렉토리 구조
1-3.Server Actions: 서버 함수 직접 호출
2. 서버 컴포넌트 vs 클라이언트 컴포넌트
2-1. Server Component
2-2. Client Component
3. Streaming & Suspense
3-1. Streaming
3-2. Suspense
4. API Routes
5. 서버리스 & Edge Runtime
5-1. 서버리스 함수
5-2. Edge Runtime
6. 이미지 최적화 : Image/ 컴포넌트
7. 국제화(i18n) & SEO
7-1. i18n
7-2. SEO 최적화
8. 보안
8-1. Middleware 활용
8-2. CSP(Content Security Policy)
9. ISR (Incremental Static Regeneration) : 정적 페이지 부분 업데이트
10. Caching 전략
10-1. HTTP 캐싱 헤더
10-2. Next.js 캐싱 레이어
10-3. SWR/React Query와 병행.
📒 빌드 및 Devops 개념
1. 빌드 최적화
1-1. Bundle Analyzer 사용
1-2. Dynamic Import
2. 배포 전략
2-1. Vercel
2-1-1. GitHub 연동 → CI/CD 자동 배포
2-1-2 Edge Functions & ISR 기본 지원
2-2. Docker 기반 배포
2-2-1. Multi-stage build → 경량 이미지 생성
2-2-2. Nginx Reverse Proxy
3. 운영 모니터링
3-1. Sentry: 에러 로깅
3-2. Vercel Analytics: 실시간 성능 지표
3-3. Lighthouse: 성능 측정
