🗓️ 프로젝트 기간

2023.5.14 ~ 2023.5.17 (4일)

📌 프로젝트 실행 방법

1. Clone the repo

$ git clone https://github.com/wanted-pre-onboarding-team-9/pre-onboarding-10th-4-9.git

2. Install Yarn packages

$ yarn install

3. Getting Started

$ yarn start

🛠️ 기술스택

👀 과제 결과물 프리뷰

🚀 배포 페이지

원티드 프리온보딩 인턴십 4주차 과제 - 9팀 배포 링크

✨ 세부 구현 방법

1. 리팩토링

1-1. 추천 관련 Context 적용

• search context를 사용한 이유는 병렬적 구조로 배열되는 Dropdown 컴포넌트와 InputTodo 컴포넌트에서 사용하기 위함입니다.
• 단일 책임 원칙을 위해서 search Context 에서 상태(state)와 수정함수(modify function)을 분리하여 구현했습니다.

1-2. Todo 관련 Context 적용

• Todo Context에 있는 todos로 투두 리스트를 컨트롤합니다.

1-3. 불필요한 state 사용 제거

• [commit] useSuggestions에 불필요하게 존재하던 moreSuggestion 함수를 없애기 위해, q와 page를 인자로 받아 useEffect dependency array에 설정하고 변경될 경우 데이터를 불러오는 방식으로 변경했습니다.
• [commit] Context에서 Provider에 value를 넘길 때 사용하던 useMemo의 필요성에 의문을 가져 제거하였습니다.
• [commit] 검색 바에서 input value는 SearchContext에서 관리하고, TodoContext에서는 TODO list 관련 상태만 관리하도록 변경하였습니다. 따라서 사용하지 않는 state인 todoText 제거하였습니다.
  

2. 무한스크롤

• 결과가 10개보다 많을때 more 아이콘이 보이고, 하단까지 스크롤 했을때 다음 결과를 추가하며, IntersectionObserver를 이용해 뷰 포트에 ref로 지정한 element가 표시됐는지 확인하여 API를 불러와 무한스크롤을 구현했습니다.

• 추가 검색도중 debounce를 적용하고, 로딩 스피너 아이콘이 표시됩니다.

  
  

3. 테스트 코드

• 코드 작업 시 빠른 피드백을 받고 휴먼에러를 피하기 위해 Jest와 RTL을 사용한 테스트 코드를 추가했습니다.
• context와 같은 종속성은 Jest를 이용해 mocking하여 처리했습니다.
• GitHub Actions를 통해 main branch로 PR시 test code 통과 여부를 검사하도록 자동화함으로써 버그를 일으키는 코드가 merge되는 것을 방지했습니다.
  

4. 에러 처리

• ui상의 에러와 api 요청에서 발생하는 에러를 모두 감싸는 방법으로 context api를 적용했습니다.
• view에서 사용자에게 에러를 표시할 수 있도록 구현했습니다.
  

5. 타입스크립트 적용

• 기존에 자바스크립트로 작성된 과제코드를 타입스크립트로 마이그레이션 했습니다.
  

6. CSS 분리 과정

• 스타일 관련 코드를 styles 폴더로 따로 분리하여 관리함으로써 디렉토리 구조를 개선했습니다.
  

💡 Best Practice 선정 과정

Best Practice 선정 과정은 레포지토리 Wiki에 정리되어 있습니다. Wiki 바로가기

📂 폴더 구조

📦src
 ┣ 📂@types
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜suggestion.ts
 ┃ ┗ 📜todo.ts
 ┣ 📂api
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜search.ts
 ┃ ┗ 📜todo.ts
 ┣ 📂components
 ┃ ┣ 📜Dropdown.tsx
 ┃ ┣ 📜DropdownItem.tsx
 ┃ ┣ 📜ErrorModal.tsx
 ┃ ┣ 📜Header.tsx
 ┃ ┣ 📜InputTodo.tsx
 ┃ ┣ 📜TodoItem.test.tsx
 ┃ ┣ 📜TodoItem.tsx
 ┃ ┣ 📜TodoList.test.tsx
 ┃ ┗ 📜TodoList.tsx
 ┣ 📂contexts
 ┃ ┣ 📜ErrorContext.tsx
 ┃ ┣ 📜SearchContext.tsx
 ┃ ┗ 📜TodoContext.tsx
 ┣ 📂hooks
 ┃ ┣ 📜useDebounce.ts
 ┃ ┣ 📜useElementInViewport.tsx
 ┃ ┣ 📜useFocus.ts
 ┃ ┗ 📜useSuggestions.ts
 ┣ 📂pages
 ┃ ┗ 📜Main.tsx
 ┣ 📂styles
 ┃ ┣ 📜App.css
 ┃ ┣ 📜Dropdown.css
 ┃ ┣ 📜DropdownItem.css
 ┃ ┣ 📜ErrorModal.css
 ┃ ┣ 📜Header.css
 ┃ ┣ 📜InputTodo.css
 ┃ ┣ 📜Main.css
 ┃ ┣ 📜TodoItem.css
 ┃ ┗ 📜TodoList.css
 ┣ 📂utils
 ┃ ┗ 📜debounce.ts
 ┣ 📜App.tsx
 ┣ 📜index.tsx
 ┗ 📜setupTests.ts

⭐️ 팀원 소개

박상우	장소진	이아영
SangWoo9734	sojinjang	ARONGLEE

이지현	김성현	이한나
j2h30728	kimisadev27	Han-Na-05-22

전민지	조하닮	김현정
mjjeon2645	ohcmadah	sena-22