# Next.js 완전 초보자를 위한 웹 개발 완벽 가이드 - 전체 목차

# Next.js 완전 초보자를 위한 웹 개발 완벽 가이드 - 전체 목차

 

---

요즘 바이브 코딩을 계기로 코딩에 접하시는 분들이 많이 계신 것 같습니다. 웹사이트를 한 순간에 제작해주는 놀라운 세상입니다.

이 글을 보시는 분들은 한번쯤은 시도해 보셨을 텐데요, 문제는 Claude Code, Cursor, Lovable, v0와 같은 툴로 웹사이트를 제작하였을 때 화면 뒷편의 장황한 코드들을 목도하는 순간 어지러움을 겪으실 것이라는 점입니다.

하지만 이 글을 통해 몇 가지 규칙만 알게 되신다면, 바이브 코딩으로 제작한 웹사이트의 지도를 마치 다니던 길처럼 느끼시게 될 것입니다.

여러분들을 응원합니다.

---

## 📚 학습 과정 소개

이 가이드는 프로그래밍 경험이 전혀 없는 분들도 Next.js를 활용하여 현대적인 웹사이트를 만들 수 있도록 설계된 30개 챕터의 완전한 학습 자료입니다. 각 챕터는 독립적인 블로그 포스팅으로 활용할 수 있으며, 순서대로 따라가면서 점진적으로 실력을 쌓을 수 있습니다.

## 🎯 학습 목표

- HTML/CSS 기초부터 시작하여 Next.js 프레임워크 완전 정복
- 실제 동작하는 웹사이트 제작 능력 습득
- 컴포넌트 기반 개발 방법론 이해
- 모던 웹 개발 베스트 프랙티스 학습

---

## 📖 전체 챕터 목차

### Part 1: 개발 환경과 기초 (챕터 1-4)

**챕터 1: 웹 개발의 첫걸음 - 개발 환경 준비하기**
- Node.js, VS Code, Chrome 설치 및 설정
- 터미널 사용법 기초
- 개발 도구 이해하기

**챕터 2: Next.js 프로젝트 생성과 실행**
- create-next-app으로 프로젝트 시작하기
- 프로젝트 구조 이해하기
- 개발 서버 실행과 확인

**챕터 3: HTML의 기본 개념과 div 태그 이해하기**
- HTML이란 무엇인가
- div 태그의 역할과 중요성
- 중첩 구조 만들기

**챕터 4: HTML 기본 태그 완전 정복**
- 제목 태그 (h1~h6)
- 문단, 링크, 이미지 태그
- 리스트와 테이블 만들기

### Part 2: 스타일링 기초 (챕터 5-8)

**챕터 5: CSS 기초 - 웹페이지에 스타일 입히기**
- CSS란 무엇인가
- 선택자와 속성 이해하기
- 색상, 크기, 여백 다루기

**챕터 6: Global CSS로 전체 스타일 관리하기**
- global.css 파일 이해하기
- CSS 리셋과 기본 스타일 설정
- 폰트와 색상 변수 활용

**챕터 7: Tailwind CSS 시작하기**
- Tailwind CSS의 개념과 장점
- 유틸리티 클래스 이해하기
- 기본 클래스 사용법

**챕터 8: Tailwind CSS 실전 활용법**
- 반응형 디자인 만들기
- Flexbox와 Grid 레이아웃
- 커스텀 스타일 확장하기

### Part 3: React 컴포넌트 (챕터 9-15)

**챕터 9: Components - 레고 블록처럼 조립하기**
- 컴포넌트란 무엇인가
- 함수형 컴포넌트 이해하기
- 컴포넌트 분리의 장점

**챕터 10: 첫 번째 컴포넌트 만들기**
- Button 컴포넌트 제작
- Card 컴포넌트 제작
- 컴포넌트 재사용하기

**챕터 11: Props - 컴포넌트에 데이터 전달하기**
- Props의 개념과 사용법
- 다양한 타입의 Props 전달
- 기본값 설정하기

**챕터 12: State - 변하는 데이터 관리하기**
- useState Hook 이해하기
- 카운터 만들기 실습
- State 업데이트 패턴

**챕터 13: 이벤트 처리 마스터하기**
- onClick, onChange 이벤트
- 폼 입력 처리하기
- 이벤트 버블링과 방지

**챕터 14: 조건부 렌더링 테크닉**
- if문과 삼항 연산자 활용
- && 연산자로 조건부 표시
- 로딩 상태 구현하기

**챕터 15: 반복 렌더링과 리스트 처리**
- map 함수 활용법
- key prop의 중요성
- 필터링과 정렬 구현

### Part 4: 애니메이션과 인터랙션 (챕터 16-17)

**챕터 16: CSS 애니메이션 기초**
- transition 속성 활용
- transform으로 움직임 만들기
- @keyframes 애니메이션

**챕터 17: Tailwind로 만드는 인터랙티브 효과**
- hover, focus 효과
- 애니메이션 유틸리티 클래스
- 커스텀 애니메이션 만들기

### Part 5: 라우팅과 네비게이션 (챕터 18-24)

**챕터 18: 라우팅의 개념 이해하기**
- 라우팅이란 무엇인가
- 파일 기반 라우팅 시스템
- 페이지 간 이동 원리

**챕터 19: 정적 라우팅 구현하기**
- 페이지 파일 만들기
- 중첩 라우트 구조
- 404 페이지 처리

**챕터 20: 동적 라우팅 마스터하기**
- [slug] 파라미터 활용
- 동적 경로 생성하기
- 쿼리 파라미터 처리

**챕터 21: Link 컴포넌트 완벽 가이드**
- Link vs a 태그의 차이
- 프리페칭과 성능 최적화
- 액티브 링크 스타일링

**챕터 22: 네비게이션 바 만들기**
- 헤더 컴포넌트 구조
- 메뉴 아이템 구성
- 모바일 반응형 메뉴

**챕터 23: 네비게이션 디자인과 UX**
- 드롭다운 메뉴 구현
- 브레드크럼 네비게이션
- 사이드바 네비게이션

**챕터 24: Layout 컴포넌트로 일관성 유지하기**
- 레이아웃 컴포넌트 패턴
- 공통 요소 관리하기
- 중첩 레이아웃 활용

### Part 6: 고급 기능 (챕터 25-28)

**챕터 25: 이미지 최적화와 처리**
- Next.js Image 컴포넌트
- 반응형 이미지 구현
- 레이지 로딩과 성능

**챕터 26: 폼과 사용자 입력 처리**
- 제어 컴포넌트 패턴
- 폼 유효성 검사
- 에러 메시지 표시

**챕터 27: API 라우트 만들기**
- API 라우트란 무엇인가
- GET, POST 요청 처리
- 데이터베이스 연동 기초

**챕터 28: 데이터 페칭 전략**
- 클라이언트 사이드 페칭
- 서버 사이드 렌더링
- 정적 생성과 ISR

### Part 7: 배포와 마무리 (챕터 29-30)

**챕터 29: 배포 준비하기**
- 프로덕션 빌드 이해하기
- 환경 변수 설정
- 성능 최적화 체크리스트

**챕터 30: Vercel로 배포하기**
- Vercel 계정 만들기
- Git 연동과 자동 배포
- 커스텀 도메인 연결

---

## 🚀 학습 방법 가이드

1. **순차적 학습**: 각 챕터를 순서대로 학습하시는 것을 권장합니다
2. **실습 중심**: 모든 예제 코드를 직접 타이핑하며 실습하세요
3. **반복 학습**: 이해가 안 되는 부분은 여러 번 반복해서 읽으세요
4. **프로젝트 적용**: 배운 내용을 자신만의 프로젝트에 적용해보세요

## 💡 학습 팁

- 에러를 두려워하지 마세요. 에러는 학습의 일부입니다
- 코드를 복사-붙여넣기보다는 직접 타이핑하세요
- 궁금한 점은 바로바로 실험해보세요
- 작은 성취도 축하하며 동기부여를 유지하세요

이제 첫 번째 챕터부터 시작하여 여러분만의 웹사이트를 만들어봅시다!