실전 React/Next.js 기반 "To do list" app

0. 프로젝트 생성 (터미널)

npx create-next-app@latest my-todo-app # - TypeScript: Yes # - App Router: Yes # - Tailwind: Yes cd my-todo-app claude

1. 전체 설계 요청 프롬프트

이 프로젝트는 React + Next.js(App Router + TypeScript + Tailwind) 기반 투두 앱입니다. 요청: 1. 아래 목표를 바탕으로 폴더 구조를 설계해 주세요.    - 목표: 최소 투두 리스트, 추가/삭제, 더미 데이터 기반, 추후 API 연동 계획 2. 다음 구조를 제안해 주세요.    - src/app/layout.tsx, src/app/page.tsx    - src/components/todo/ (TodoList, TodoItem 등)    - src/lib/todo.ts (더미 데이터, 간단한 헬퍼)    - src/types/index.ts (Todo 타입)    - 필요하면 src/app/api/ (추후 API용) 3. 가장 작은 첫 마일스톤(예: 루트 페이지에 투두 리스트 표시)을 정의해 주세요. 4. 그 마일스톤을 달성하기 위한 단계별 작업을 나눠서 설명해 주세요.

이 프롬프트는 Next.js App Router 기반 구조를 먼저 정리하고, 첫 마일스톤을 정의하게 합니다.

2. 초기 파일·구조 생성 프롬프트

설계에 따라 이 Next.js 프로젝트의 초기 파일을 생성해 주세요. 요청: - src/app/layout.tsx - src/app/page.tsx - src/app/globals.css (Tailwind 기본 임포트) - src/components/layout/Header.tsx - src/components/todo/TodoList.tsx - src/types/index.ts (Todo 타입) - src/lib/todo.ts (더미 데이터 배열, id, title, completed 필드 포함) 주의: - 아직 기능 구현은 하지 말고, 파일 구조와 타입만 잡기 - TypeScript 에러가 없게 타입 정의 - 기존 create-next-app에 이미 있는 파일은 그대로 유지

이 프롬프트는 실제 폴더와 파일을 Claude Code가 생성하게 하며, React/Next.js 구조를 잡아줍니다.

3. CLAUDE.md 작성 요청 프롬프트 (React/Next.js용)

이 프로젝트를 위한 CLAUDE.md 파일을 만들어 주세요. 내용: - 프로젝트 목적: React + Next.js 기반 투두 앱 - 기술 스택:   - React + Next.js(App Router)   - TypeScript   - Tailwind CSS - 폴더 구조:   - src/app/: App Router 페이지   - src/components/: 재사용 컴포넌트   - src/lib/: 유틸리티, 더미 데이터   - src/types/: 타입 정의 - React 규칙:   - 함수형 컴포넌트, TypeScript 사용   - Tailwind로 스타일링   - 불필요한 리팩터링 금지   - 새 기능은 작은 단위로 나누기 - 프롬프트 규칙:   - 이 저장소를 먼저 분석하고 계획을 먼저 제안   - 기능은 한 번에 한 마일스톤씩 진행   - 테스트가 필요하면 간단한 React 테스트 패턴을 따르기 이 파일을 먼저 생성하고, 이후의 모든 작업에서 이 파일을 참고하게 해 주세요.

이 CLAUDE.md는 이후의 모든 투두 앱 작업의 “규칙 문서” 역할을 합니다.

4. 첫 마일스톤 구현 프롬프트 (UI + 더미 데이터)

이 저장소를 먼저 분석하고, 다음 마일스톤을 구현해 주세요. 마일스톤: 루트 페이지에 투두 리스트 UI 표시 (더미 데이터, 클라이언트 상태) 요청: 1. Todo 타입을 src/types/index.ts에 정의    - id: number    - title: string    - completed: boolean 2. src/lib/todo.ts에 더미 데이터 배열을 추가 3. src/components/todo/TodoList.tsx    - title, completed 표시    - 완료/미완료 스타일 타일윈드 적용    - useState로 checked 상태를 관리 4. src/app/page.tsx    - Header, TodoList 컴포넌트 사용    - 전체 테마를 Tailwind로 간단히 스타일링 제약: - App Router 규칙 유지 - TypeScript 에러 없게 타입 정의 - 아직 서버 API나 DB는 사용하지 않기 (완전 더미) - 최소한의 파일만 수정

이 프롬프트를 실행하면, 화면에 실제로 투두 리스트가 보이는 상태가 됩니다.

5. 기능 추가 프롬프트 (예: 투두 추가 기능)

이 저장소를 읽고, 투두 추가 기능을 추가해 주세요. 기능: - TodoList 위에 input + 버튼으로 투두 추가 - 새 투두는 useState로 관리, 기존 더미 데이터와 합쳐서 표시 요청: 1. 관련 파일을 먼저 파악 2. 변경 계획을 짧게 설명 3. 코드를 수정 4. 수정 후, 변경된 파일과 이유를 한 번에 요약 규칙: - 기존 구조와 타입 유지 - App Router 패턴 유지 - 불필요한 리팩터링 금지 - TypeScript 에러 없게 타입 정의

이렇게 하면 “추가/삭제” 기능까지 확장할 수 있습니다.

6. API 연동 준비 프롬프트 (Next.js API Route)

이 저장소를 읽고, 향후 API 연동을 위한 구조를 준비해 주세요. 요청: 1. src/app/api/todos/route.ts (Next.js API Route)를 생성    - GET: 더미 todos 배열 반환    - POST: 새로운 todo를 받아서 추가 (메모리상에서만) 2. src/lib/api.ts에 간단한 fetch 함수 정의    - /api/todos 엔드포인트 사용 3. src/app/page.tsx에서 지금은 더미 데이터를 사용하지 말고,    - 마운트 시에 API를 호출해 todos를 가져오는 방식으로 변경    - 서버에서 넘겨받은 데이터를 useState로 관리 주의: - 아직 DB는 사용하지 않고, 메모리상 더미로 유지 - TypeScript 타입을 일관되게 유지 - 기존 컴포넌트는 최소한만 수정

이 프롬프트로 “클라이언트 → Next.js API Route” 구조를 만들고, 이후 DB나 외부 API를 연동하기 위한 토대를 잡을 수 있습니다.

7. 테스트/커밋용 프롬프트 (선택)

이 저장소의 변경을 기준으로 커밋 전에 점검해 주세요. 확인 항목: - 빌드/실행에 문제가 없는지 (Next.js dev 서버) - TypeScript 에러가 없는지 - TypeScript 또는 ESLint 경고가 있는지 - 테스트가 필요하면, 간단한 테스트를 jest/React Testing Library로 작성 - 불필요하게 수정된 파일이 있는지 마지막에 커밋 메시지 초안도 제안해 주세요.

이 프롬프트는 Git으로 커밋을 남기기 전에 안정성을 확인하는 용도로 사용할 수 있습니다.