# 5일 동안 Next.js (App Router)로 오목 웹 애플리케이션 만들기

이 계획은 Next.js를 학습하면서 단계별로 오목 웹 애플리케이션을 구축하는 것을 목표로 합니다.

---

## 전체 학습 내용

- App Router (`/app` 폴더 구조) 이해

- `useState` & `useEffect`를 활용한 상태 관리

- 동적 라우팅 (`/app/game/[size]`)

- API Routes (`/app/api/`) 활용

- Vercel을 이용한 배포

---

## Day 1: 프로젝트 설정 및 기본 페이지 구현

### 학습 내용

- Next.js 14 기반 App Router 프로젝트 설정

- Tailwind CSS 설치 및 설정

- `layout.js`를 활용한 전역 레이아웃 적용

### 할 일

- Next.js 프로젝트 생성:

  ```bash

  npx create-next-app@latest gomoku-app

  cd gomoku-app

  npm install -D tailwindcss postcss autoprefixer

  npx tailwindcss init -p

  ```

- Tailwind를 `tailwind.config.js` 및 `app/globals.css`에 설정

- `/app/page.js`에 홈페이지 생성

- `/app/difficulty/page.js`에 난이도 선택 페이지 추가

- `/app/layout.js`에 전역 레이아웃 구현

---

## Day 2: 오목판 UI 및 상태 관리

### 학습 내용

- `useState`를 활용한 오목판 상태 관리

- 15x15 또는 19x19 크기의 동적 보드 생성

- Tailwind CSS를 활용한 보드 스타일링

- 동적 라우팅 (`/app/game/[size]`) 구현

### 할 일

- `GameBoard` 컴포넌트 생성

- `useState`를 사용하여 보드 상태 관리

- `/app/game/[size]/page.js`에서 동적 라우팅 구현

- Tailwind CSS를 활용하여 보드 디자인 적용

---

## Day 3: 금수 규칙 및 되돌리기 기능 구현

### 학습 내용

- 금수 규칙(삼삼, 사사, 장목) 구현

- `useState`를 활용한 수 기록 관리

- 되돌리기(Undo) 기능 구현

### 할 일

- 금수 판별 알고리즘 작성

- 되돌리기 버튼 추가 및 직전 상태 복원 기능 구현

---

## Day 4: AI 랜덤 수 및 승리 조건 판별

### 학습 내용

- API Routes (`/app/api/randomMove`)를 활용하여 AI 랜덤 수 구현

- 승리 조건 판별 (5개 연속된 돌 확인)

### 할 일

- AI의 랜덤 착수 기능 구현

- 플레이어가 승리했는지 확인하는 함수 추가

---

## Day 5: 최종 마무리 및 배포

### 학습 내용

- Vercel을 활용한 배포

- `useEffect`를 활용한 코드 최적화

- UI 개선

### 할 일

- Vercel을 사용하여 프로젝트 배포:

  ```bash

  vercel deploy

  ```

- 코드 리팩토링 및 성능 최적화

- UI 개선 및 홈 버튼 추가

---

디시는 마크다운 지원 안하겟지