PART 07. 프로젝트 1 — React + TypeScript 할 일 앱
지금까지 TypeScript의 문법과 타입 설계 원칙을 배웠습니다. 이제 실전입니다. 머릿속에 있는 개념을 코드로 옮기는 순간, 진짜 실력이 쌓입니다.
이 PART에서는 React 19와 TypeScript를 조합해 할 일(Todo) 앱을 처음부터 완성까지 만들어 나갑니다. 단순한 예제가 아닙니다. 실무에서 마주치는 패턴들 — Props 타이핑, 상태 관리, 이벤트 핸들러, API 연동, 커스텀 Hook — 을 하나씩 적용하면서 앱을 점진적으로 키워갑니다.
챕터가 끝날 때마다 앱에 새로운 기능이 하나씩 추가됩니다. 코드가 쌓이는 만큼 TypeScript의 힘이 실감납니다.
이 PART에서 만드는 것
할 일 앱은 단순해 보이지만, 프론트엔드 개발의 핵심 패턴이 모두 담겨 있습니다.
- 할 일 추가, 완료 토글, 삭제
- 전체 / 완료 / 미완료 필터링
- 로컬 스토리지 연동으로 새로고침 후에도 데이터 유지
- JSONPlaceholder API에서 초기 데이터 불러오기
- 재사용 가능한 커스텀 Hook으로 로직 분리
챕터 구성
| 챕터 | 제목 | 추가되는 기능 |
|---|---|---|
| Ch 01 | Vite로 React + TypeScript 프로젝트 생성 | 프로젝트 뼈대, 기본 타입 정의 |
| Ch 02 | 컴포넌트 Props 타이핑 | TodoItem, TodoList 컴포넌트 |
| Ch 03 | 상태 관리와 Context 타이핑 | useReducer + Context로 전역 상태 관리 |
| Ch 04 | 이벤트 핸들러 타이핑 | 할 일 추가 폼, 필터 버튼 |
| Ch 05 | API 연동과 응답 타이핑 | 초기 데이터 fetch, 로딩/에러 상태 |
| Ch 06 | 커스텀 Hook 만들기 | useTodos, useLocalStorage, useFetch |
기술 스택
이 PART에서 사용하는 기술은 다음과 같습니다.
- Vite 6: 빠른 개발 서버와 번들러
- React 19: 최신 React, 새로운 컴파일러 최적화 포함
- TypeScript 5.8: 엄격한 타입 검사
- CSS Modules: 컴포넌트 단위 스타일링
외부 UI 라이브러리는 사용하지 않습니다. TypeScript 타입이 잘 보이도록 코드를 단순하게 유지합니다.