3장: Claude Code로 React 앱 만들기 — 개발 편¶

AI와 함께하는 첫 웹 프로젝트

목차¶

무엇을 만들 건가요?
개발 환경 준비
Claude Code로 프로젝트 생성
컴포넌트 만들기
스타일링
기능 추가하기
로컬에서 실행 확인
빌드와 마무리

1. 무엇을 만들 건가요?¶

Claude Code와 함께 Todo 리스트 앱을 만듭니다. 간단하지만 웹 개발의 기본이 모두 들어있습니다.

최종 화면:
┌─────────────────────────────────────┐
│  📝 나의 할 일                       │
│  ┌─────────────────────┐ ┌───┐     │
│  │ 오늘의 할 일을 입력  │ │추가│    │
│  └─────────────────────┘ └───┘     │
│                                     │
│  ☑ 숙제하기         [삭제]          │
│  ☐ 운동하기         [삭제]          │
│  ☐ 책 읽기          [삭제]          │
│                                     │
│  완료: 1 / 전체: 3                  │
└─────────────────────────────────────┘

배우는 것¶

항목	설명
Vite	빠른 개발 서버 + 빌드 도구
React	컴포넌트 기반 UI 라이브러리
useState	상태 관리 (할 일 목록)
CSS	컴포넌트 스타일링

2. 개발 환경 준비¶

필요한 것¶

항목	확인 명령어	필요 버전
Node.js	`node --version`	18 이상
npm	`npm --version`	9 이상
Git	`git --version`	2.x
Claude Code	`claude --version`	최신

프로젝트 폴더 만들기¶

mkdir my-todo-app
cd my-todo-app

3. Claude Code로 프로젝트 생성¶

Claude Code 실행¶

claude

프롬프트: Vite + React 프로젝트 생성¶

Vite + React를 사용해서 프로젝트를 초기화해줘.
TypeScript는 쓰지 않고 JavaScript만 사용해.
불필요한 기본 파일은 정리해줘.

Claude Code가 알아서 다음을 수행합니다:

실행 순서:
1. npm create vite@latest . -- --template react
2. npm install
3. App.css 내용 정리
4. index.css 내용 정리
5. App.jsx 기본 구조 작성

프로젝트 구조 확인¶

my-todo-app/
├── index.html        ← 진입점 HTML
├── package.json      ← 프로젝트 설정
├── vite.config.js    ← Vite 설정
├── public/           ← 정적 파일
└── src/
    ├── main.jsx      ← React 앱 진입점
    ├── App.jsx       ← 메인 컴포넌트
    ├── App.css       ← 메인 스타일
    └── index.css     ← 전역 스타일

여기서 잠깐: Claude Code가 한 일 이해하기¶

Claude Code가 한 일:
1. npm create vite 명령어 실행  → Vite 프로젝트 생성
2. npm install 실행              → 패키지 설치
3. 파일 수정 (Read → Edit)      → 불필요한 코드 정리

직접 했으면:
1. npm create vite@latest my-todo-app -- --template react 입력
2. cd my-todo-app
3. npm install
4. 에디터로 파일 하나씩 수정...

4. 컴포넌트 만들기¶

프롬프트: Todo 앱 구현¶

간단한 Todo 리스트 앱을 만들어줘. 기능:
1. 할 일 입력하고 추가하기
2. 할 일 완료 체크 (체크박스 클릭 → 취소선)
3. 할 일 삭제하기
4. 하단에 완료 개수 / 전체 개수 표시

useState를 사용하고, 모든 코드는 App.jsx 하나에 작성해줘.

Claude Code가 작성하는 코드¶

// src/App.jsx
import { useState } from 'react'
import './App.css'

function App() {
  const [todos, setTodos] = useState([])
  const [input, setInput] = useState('')

  const addTodo = () => {
    if (input.trim() === '') return
    setTodos([...todos, { id: Date.now(), text: input, done: false }])
    setInput('')
  }

  const toggleTodo = (id) => {
    setTodos(todos.map(t =>
      t.id === id ? { ...t, done: !t.done } : t
    ))
  }

  const deleteTodo = (id) => {
    setTodos(todos.filter(t => t.id !== id))
  }

  const doneCount = todos.filter(t => t.done).length

  return (
    <div className="app">
      <h1>📝 나의 할 일</h1>
      <div className="input-row">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && addTodo()}
          placeholder="할 일을 입력하세요"
        />
        <button onClick={addTodo}>추가</button>
      </div>
      <ul className="todo-list">
        {todos.map(todo => (
          <li key={todo.id} className={todo.done ? 'done' : ''}>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => toggleTodo(todo.id)}
            />
            <span>{todo.text}</span>
            <button className="delete-btn" onClick={() => deleteTodo(todo.id)}>
              삭제
            </button>
          </li>
        ))}
      </ul>
      <p className="counter">완료: {doneCount} / 전체: {todos.length}</p>
    </div>
  )
}

export default App

코드 핵심 설명¶

useState([])        → 할 일 목록 (초기값: 빈 배열)
useState('')        → 입력 필드 값 (초기값: 빈 문자열)

addTodo()           → 새 할 일 추가
  Date.now()          → 고유 ID 생성
  [...todos, 새항목]  → 기존 배열 + 새 항목

toggleTodo(id)      → 완료/미완료 토글
  map()으로 전체 순회 → 일치하는 id의 done을 반전

deleteTodo(id)      → 할 일 삭제
  filter()로 전체 순회 → 일치하는 id만 제외

5. 스타일링¶

프롬프트: CSS 작성¶

App.css에 깔끔한 스타일을 작성해줘.
- 가운데 정렬된 카드 레이아웃
- 완료된 항목은 취소선
- 부드러운 색상 (파란색 계열)
- 모바일에서도 잘 보이게

Claude Code가 작성하는 CSS¶

/* src/App.css */
.app {
  max-width: 480px;
  margin: 40px auto;
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  font-family: 'Noto Sans KR', sans-serif;
}

h1 {
  text-align: center;
  color: #1a73e8;
  margin-bottom: 24px;
}

.input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.input-row input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
}

.input-row input:focus {
  border-color: #1a73e8;
  outline: none;
}

.input-row button {
  padding: 10px 20px;
  background: #1a73e8;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-list li {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  background: #f8f9fa;
  border-radius: 8px;
  gap: 10px;
}

.todo-list li.done span {
  text-decoration: line-through;
  color: #999;
}

.delete-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: #e53935;
  cursor: pointer;
  font-size: 13px;
}

.counter {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin-top: 16px;
}

6. 기능 추가하기¶

프롬프트: 기능 추가¶

아래 기능을 추가해줘:
1. 빈 목록일 때 "할 일을 추가해보세요!" 안내 문구 표시
2. localStorage에 저장해서 새로고침해도 데이터 유지

추가되는 코드¶

// localStorage 초기값 불러오기
const [todos, setTodos] = useState(() => {
  const saved = localStorage.getItem('todos')
  return saved ? JSON.parse(saved) : []
})

// todos가 변경될 때마다 localStorage에 저장
useEffect(() => {
  localStorage.setItem('todos', JSON.stringify(todos))
}, [todos])

// 빈 목록 안내
{todos.length === 0 && (
  <p className="empty">할 일을 추가해보세요!</p>
)}

필수 import 추가:

import { useState, useEffect } from 'react'

7. 로컬에서 실행 확인¶

프롬프트: 개발 서버 실행¶

개발 서버를 실행해줘.

또는 직접 실행:

npm run dev

  VITE v6.x.x  ready in 300ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.0.5:5173/

브라우저에서 확인¶

http://localhost:5173/ 열기
할 일 입력 후 추가
체크박스로 완료 표시
새로고침 후 데이터 유지 확인
삭제 버튼 동작 확인

Claude Code로 수정하기¶

실행 중 문제가 발견되면 바로 Claude Code에 요청합니다:

할 일이 없을 때 빈 화면이 아니라
"아직 할 일이 없습니다. 추가해보세요!" 메시지가 보이게 해줘.

삭제 버튼을 누르면 바로 삭제되지 않고
"정말 삭제하시겠습니까?" 확인 창이 뜨게 해줘.

8. 빌드와 마무리¶

프로덕션 빌드¶

프로덕션 빌드를 실행해줘.

npm run build

dist/
├── index.html
├── assets/
│   ├── index-abc123.js    ← 압축된 JavaScript
│   └── index-def456.css   ← 압축된 CSS

빌드 결과 확인¶

npm run preview

빌드된 결과물이 정상 동작하는지 미리 확인합니다.

Git으로 관리¶

이 프로젝트를 Git으로 관리하고, 첫 커밋을 만들어줘.

git init
git add .
git commit -m "feat: Todo 리스트 앱 초기 버전"

핵심 요약¶

단계	명령어/프롬프트	결과
프로젝트 생성	"Vite + React 프로젝트 초기화"	Vite + React 셋업
앱 구현	"Todo 리스트 앱 만들어줘"	App.jsx 작성
스타일링	"깔끔한 CSS 작성"	App.css 작성
기능 추가	"localStorage 저장 추가"	영속성 구현
실행	`npm run dev`	localhost:5173 확인
빌드	`npm run build`	dist/ 폴더 생성
Git	"첫 커밋 만들어줘"	git init + commit

Claude Code 팁¶

상황	이렇게 요청하세요
처음 시작	"Vite + React 프로젝트를 만들어줘"
기능 추가	"localStorage 저장 기능을 추가해줘"
버그 수정	"새로고침하면 데이터가 사라져. 원인 찾아줘"
스타일 수정	"버튼 색을 초록으로 바꿔줘"
실행	"개발 서버를 실행해줘"
빌드	"프로덕션 빌드해줘"

다음 장에서는 이 프로젝트를 Cloudflare Pages에 배포합니다.