todo-app

Todo App

React + TypeScript + Vite로 만든 Todo 애플리케이션입니다.

기능

• ✅ Todo 추가
• ✅ Todo 완료 토글
• ✅ Todo 삭제
• ✅ 필터링 (전체/완료/미완료)
• ✅ LocalStorage에 데이터 자동 저장
• ✅ TypeScript로 타입 안정성 보장
• ✅ 반응형 디자인

시작하기

설치

npm install

개발 서버 실행

npm run dev

브라우저에서 http://localhost:5173 을 열어 확인하세요.

빌드

npm run build

프리뷰

npm run preview

프로젝트 구조

src/
├── components/          # React 컴포넌트
│   ├── TodoInput.tsx   # 입력 폼
│   ├── TodoList.tsx    # 할 일 목록
│   ├── TodoItem.tsx    # 개별 할 일 항목
│   └── TodoFilter.tsx  # 필터 버튼
├── types/              # TypeScript 타입 정의
│   └── todo.ts
├── App.tsx             # 메인 앱 컴포넌트
├── main.tsx            # 진입점
└── index.css           # 전역 스타일

기술 스택

• React 18
• TypeScript
• Vite
• CSS3

학습 내용

이 프로젝트에서 다루는 React 개념:

• 함수형 컴포넌트
• Hooks (useState, useEffect)
• Props를 통한 데이터 전달
• 이벤트 핸들링
• 조건부 렌더링
• 리스트 렌더링
• LocalStorage 연동
• TypeScript 타입 정의