/wanted-10th-3

원티드 프리온보딩 기업과제

Primary LanguageTypeScript

원티드 프리온보딩 기업과제

🔗 배포 링크

목차

1. 프로젝트 소개

추천 Todo 불러오기 및 Todo를 추가할 수 있는 웹 사이트입니다.

2. 주요 기능

  • 기존 코드인 Todo의 CRUD 리팩터링(ts 적용, style 파일 분리 등)
  • 추천 Todo가 무한 스크롤로 출력되도록 구현
  • useThrottle 커스텀 훅을 생성하여 무한 스크롤 구현 시 검색 결과 출력 API 호출 최적화
  • Context API를 사용하여 컴포넌트들이 동일한 Context를 사용할 수 있도록 구현
  • Todo를 삭제할 때 Optimistic Update 기법을 사용하여 사용자 UI 개선

3. 실행 방법

install

npm install

start

npm start

4. 개발 환경

  • 테스트 환경: Chrome browser
  • IDE: Visual Studio Code 1.71.0 (Universal)
  • 인프라: Vercel
  • 주요 라이브러리
    • react: 18.0.0
    • typescript": 5.0.4

5. 기술 스택

Environment

config

Language

Development

deploy

6. 파일 구조

 📦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