프로젝트 소개 및 목표

이 30분만에 만드는 Todo App 완성 가이드는 웹 개발 입문자부터 중급 개발자까지 누구나 쉽게 따라할 수 있는 실전 프로젝트입니다. React와 LocalStorage를 활용하여 할 일 목록을 추가, 완료, 삭제할 수 있는 완전한 Todo 애플리케이션을 구축합니다. 이 가이드를 통해 컴포넌트 설계, 상태 관리, 이벤트 핸들링, 데이터 영속성 등 실무에서 필수적인 개념들을 실습할 수 있습니다. 포트폴리오에 추가할 수 있는 완성도 높은 프로젝트를 30분 안에 완성해보세요.

필요한 기술 스택

이 프로젝트를 진행하기 위해서는 다음과 같은 기술 스택이 필요합니다:

• React 18+: UI 컴포넌트 구축을 위한 프론트엔드 라이브러리
• JavaScript (ES6+): 최신 자바스크립트 문법 활용
• CSS3: 스타일링 및 반응형 디자인
• LocalStorage API: 브라우저 로컬 데이터 저장
• Vite: 빠른 개발 환경 구축 도구

Node.js 16 이상이 설치되어 있어야 하며, 기본적인 React Hooks(useState, useEffect) 사용법을 알고 있으면 더욱 수월하게 진행할 수 있습니다.

프로젝트 셋업

먼저 Vite를 사용하여 React 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행하세요:

npm create vite@latest todo-app -- --template react
cd todo-app
npm install
npm run dev

프로젝트 구조를 다음과 같이 정리합니다:

src/
├── components/
│   ├── TodoForm.jsx
│   ├── TodoList.jsx
│   └── TodoItem.jsx
├── App.jsx
├── App.css
└── main.jsx

이제 개발 서버가 실행되었으며 http://localhost:5173에서 확인할 수 있습니다. 기본 파일들을 정리하고 본격적인 구현을 시작하겠습니다.

단계별 구현 과정

1단계: App 컴포넌트 기본 구조 (5분)

먼저 src/App.jsx 파일을 열어 메인 컴포넌트를 작성합니다. 이 30분만에 만드는 Todo App 완성 가이드의 핵심은 효율적인 상태 관리입니다:

import { useState, useEffect } from 'react';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);

  // LocalStorage에서 데이터 불러오기
  useEffect(() => {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      setTodos(JSON.parse(savedTodos));
    }
  }, []);

  // 데이터 변경시 LocalStorage에 저장
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text,
      completed: false,
      createdAt: new Date().toISOString()
    };
    setTodos([newTodo, ...todos]);
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

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

  return (
    

      
📝 My Todo App
      
      
    
  );
}

export default App;

2단계: TodoForm 컴포넌트 구현 (5분)

src/components/TodoForm.jsx 파일을 생성하여 입력 폼을 만듭니다:

import { useState } from 'react';

function TodoForm({ onAdd }) {
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (input.trim()) {
      onAdd(input.trim());
      setInput('');
    }
  };

  return (
    

       setInput(e.target.value)}
        placeholder="할 일을 입력하세요..."
        className="todo-input"
      />
      
        추가
      
    
  );
}

export default TodoForm;

3단계: TodoList 컴포넌트 구현 (5분)

src/components/TodoList.jsx 파일을 생성합니다:

import TodoItem from './TodoItem';

function TodoList({ todos, onToggle, onDelete }) {
  if (todos.length === 0) {
    return 
할 일이 없습니다. 새로운 할 일을 추가해보세요!
;
  }

  const activeTodos = todos.filter(todo => !todo.completed);
  const completedTodos = todos.filter(todo => todo.completed);

  return (
    

      

        전체: {todos.length}
        진행중: {activeTodos.length}
        완료: {completedTodos.length}
      
      {todos.map(todo => (
        
      ))}
    
  );
}

export default TodoList;

4단계: TodoItem 컴포넌트 구현 (5분)

src/components/TodoItem.jsx 파일을 생성합니다:

function TodoItem({ todo, onToggle, onDelete }) {
  return (
    

       onToggle(todo.id)}
        className="checkbox"
      />
      {todo.text}
       onDelete(todo.id)} 
        className="delete-button"
      >
        삭제
      
    
  );
}

export default TodoItem;

5단계: 스타일링 완성 (10분)

src/App.css 파일을 작성하여 깔끔한 디자인을 적용합니다:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 20px;
}

.app {
  max-width: 600px;
  margin: 40px auto;
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 2.5em;
}

.todo-form {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.todo-input {
  flex: 1;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.todo-input:focus {
  outline: none;
  border-color: #667eea;
}

.add-button {
  padding: 15px 30px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.add-button:hover {
  background: #5568d3;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 10px;
  font-weight: bold;
  color: #666;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 2px solid #f0f0f0;
  border-radius: 10px;
  margin-bottom: 10px;
  transition: all 0.3s;
}

.todo-item:hover {
  border-color: #667eea;
  transform: translateX(5px);
}

.todo-item.completed {
  opacity: 0.6;
  background: #f9f9f9;
}

.checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.todo-text {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: #999;
}

.delete-button {
  padding: 8px 16px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.delete-button:hover {
  background: #ee5a52;
}

.empty-message {
  text-align: center;
  color: #999;
  padding: 40px;
  font-size: 18px;
}

테스트 및 배포

애플리케이션이 완성되었으면 다음 기능들을 테스트합니다:

• 할 일 추가 기능 (빈 입력 방지 확인)
• 체크박스 토글로 완료/미완료 전환
• 삭제 버튼으로 항목 제거
• 페이지 새로고침 후 데이터 유지 (LocalStorage)
• 통계 정보 정확성 확인

배포는 Vercel을 추천합니다. 터미널에서 다음 명령어를 실행하세요:

npm run build
npx vercel --prod

또는 GitHub에 푸시 후 Vercel, Netlify, GitHub Pages를 통해 자동 배포할 수 있습니다. 이 30분만에 만드는 Todo App 완성 가이드를 따라했다면 완전히 작동하는 애플리케이션을 배포할 준비가 완료되었습니다.

마무리 및 확장 아이디어

축하합니다! 30분만에 만드는 Todo App 완성 가이드를 성공적으로 완료하셨습니다. 이제 다음과 같은 기능을 추가하여 프로젝트를 더욱 발전시킬 수 있습니다:

• 할 일 수정(edit) 기능 추가
• 카테고리/태그 시스템 구현
• 드래그 앤 드롭으로 순서 변경
• 마감일 설정 및 알림 기능
• 다크 모드 지원
• 백엔드 API 연동 (Firebase, Supabase)
• 사용자 인증 및 멀티 유저 지원

이 프로젝트를 포트폴리오에 추가하고, GitHub에 공개하여 취업이나 프리랜서 활동에 활용해보세요!