추천 Todo 불러오기 및 Todo를 추가할 수 있는 웹 사이트입니다.
- 기존 코드인 Todo의 CRUD 리팩터링(ts 적용, style 파일 분리 등)
- 추천 Todo가 무한 스크롤로 출력되도록 구현
useThrottle
커스텀 훅을 생성하여 무한 스크롤 구현 시 검색 결과 출력 API 호출 최적화Context API
를 사용하여 컴포넌트들이 동일한Context
를 사용할 수 있도록 구현- Todo를 삭제할 때
Optimistic Update
기법을 사용하여 사용자 UI 개선
npm install
npm start
- 테스트 환경: Chrome browser
- IDE: Visual Studio Code 1.71.0 (Universal)
- 인프라: Vercel
- 주요 라이브러리
- react: 18.0.0
- typescript": 5.0.4
📦public
📦src
┣ 📂api
┣ 📂components
┃ ┣ 📜Dropdown.tsx
┃ ┣ 📜DropdownItem.tsx
┃ ┣ 📜Header.tsx
┃ ┣ 📜InputTodo.tsx
┃ ┣ 📜TodoItem.tsx
┃ ┗ 📜TodoList.tsx
┣ 📂css
┣ 📂hooks
┣ 📂pages
┃ ┗ 📜Main.tsx
┣ 📂static
┣ 📂types
┣ 📜App.css
┣ 📜App.tsx
┗ 📜index.tsx