- Clone the repo
$ git clone https://github.com/wanted-pre-onboarding-team-9/pre-onboarding-10th-2-9.git- Install NPM packages
$ npm install- Getting Started
$ npm start
2.mov
- Cache는 클래스로 만든 뒤 index.ts에서 instance 생성 후 useSuggestions으로 넘겨줍니다.
- cache를 얼마나 유지할 것인지 cacheTime(ms)를 constructor에서 받고 있으며, 따로 설정하지 않을 경우 기본값은 5분으로 설정하였습니다.
- cache.set 실행 시 해당 cacheMap expireTime에 Date.now() + cacheTime을 설정하고, cache.get을 할 때 Date.now()와 expireTime을 비교하여 지났으면 remove, 지나지 않았으면 캐시된 데이터를 리턴해주도록 구현하였습니다.
API 호출을 조절하는 방법에는 여러가지가 있지만 그 중 debounce가 API 호출을 줄이는데 더 효과적이라고 생각하여 선택했습니다. 다만 유저 입력이 끝난 뒤에 결과가 보여지기 때문에 사용자 경험이 좋지 않을 수 있다는 의견이 있었지만. 이는 debounce delay 시간을 짧게 설정함으로 해결할 수 있었습니다.
- 키보드 입력시 키 값을 전달 받고, ArrowUp, ArrowDown, Enter 키가 각각 다른 동작을 수행하도록 설계하였습니다.
- 자동완성된 단어들은 Focus Index의 state에 따라 조절되며 ArrowUp의 경우 Index를 -1 씩 줄이고, ArrowDown의 경우 Index를 1씩 늘립니다.
- Enter 키를 입력했을 경우에는 자동완성 리스트의 해당 index를 가지는 단어가 input에 반영되도록 구현하였습니다.
Best Practice 선정 과정은 레포지토리 Wiki에 정리되어 있습니다. Wiki 바로가기
📦src
┣ 📂@types
┃ ┗ 📜search.ts
┣ 📂api
┃ ┣ 📜ApiUrl.ts
┃ ┣ 📜index.ts
┃ ┗ 📜searchAPI.ts
┣ 📂components
┃ ┣ 📜Dropdown.tsx
┃ ┣ 📜DropdownItem.tsx
┃ ┣ 📜SearchIcon.tsx
┃ ┣ 📜SearchInput.tsx
┃ ┣ 📜Title.tsx
┃ ┗ 📜style.tsx
┣ 📂contexts
┃ ┗ 📜SuggestionsContext.tsx
┣ 📂hooks
┃ ┣ 📜useBoolean.tsx
┃ ┣ 📜useClickOutside.ts
┃ ┗ 📜useDebounce.ts
┣ 📂pages
┃ ┣ 📜SearchPage.tsx
┃ ┗ 📜style.tsx
┣ 📂utils
┃ ┣ 📜cache.ts
┃ ┣ 📜const.ts
┃ ┣ 📜debounce.ts
┃ ┗ 📜keyboard.ts
┣ 📜index.tsx
┗ 📜style.tsx| 박상우 | 장소진 | 이아영 |
|---|---|---|
| SangWoo9734 | sojinjang | ARONGLEE |
 |
 |
 |
| 이지현 | 김성현 | 이한나 |
|---|---|---|
| j2h30728 | kimisadev27 | Han-Na-05-22 |
 |
 |
 |
| 전민지 | 조하닮 | 김현정 |
|---|---|---|
| mjjeon2645 | ohcmadah | sena-22 |
 |
 |
 |