병명을 검색 시 입력된 단어를 바탕으로 추천검색어를 보여주는 로직을 구현했습니다.
🌐 배포 사이트 바로가기
디바운싱 및 데이터 캐싱 | |
---|---|
키보드로 포커스 이동 |
📦src
┣ 📂api
┃ ┣ 📜apiClient.ts
┃ ┗ 📜search.ts
┣ 📂components
┃ ┗ 📂Search
┃ ┃ ┣ 📜Search.style.ts
┃ ┃ ┣ 📜SearchBar.tsx
┃ ┃ ┗ 📜index.tsx
┣ 📂hooks
┃ ┣ 📜useDebounce.ts
┃ ┗ 📜useSearchResult.ts
┣ 📂types
┃ ┗ 📜TypeSearchResult.ts
┣ 📂utils
┃ ┗ 📜cacheStorage.ts
┣ 📜App.tsx
┣ 📜index.css
┗ 📜index.tsx
- axios instance로 api호출 및 캐싱 관리
- 검색창 영역인 SearchBar 컴포넌트와 추천리스트 영역인 SearchSuggestionBox 컴포넌트로 분리
- 캐시스토리지에 저장 ( 로컬/세션 스토리지에 저장하기엔 5mb 용량제한때문에 관리가 어려울것이라 예상)
- 쿼리별 최초 api 호출 시 받아온 데이터를 캐시스토리지에 저장하고, 이후 api요청 시 캐시된 데이터가 있는지 확인 후 캐시된 데이터가 있으면 해당 데이터 리턴
- 캐시데이터 저장 시 헤더에 expireDate를 저장 → 캐시된 데이터를 불러올 때 expireDate를 체크하여 만료된 경우 새롭게 api를 호출하고, 해당 데이터로 기존 캐싱데이터를 업데이트함### Assignment 3. 입력 시 API 호출 횟수 최소화 전략
- useDebounce hook을 통해 디바운싱 로직 처리
- debouncedKeyword state를 만들고 일정 시간동안 입력이 없으면 해당 키워드를 debouncedKeyword 상태로 업데이트
- debouncedKeyword를 trim()메서드로 공백 제거 후 api요청
- focusedIndex state를 통해 현재 포커스된 li요소의 상태를 관리
if(e.nativeEvent.isComposing) return;
처리를 통해 한국어 입력시 마지막 글자 한번 더 입력되는 이슈 해결
- 추천 검색어 리스트에서 리스트 항목 클릭 시 해당 항목으로 검색어 키워드 변경
- 추천 검색어 최대 7개까지 노출