검색창 구현 + 검색어 추천 기능 구현 + 캐싱 기능 구현
2023.09.05 - 2023.09.08
$ git clone https://github.com/0chae01/searchbar.git
$ npm install
$ npm start
https://searchbar-0chae01.vercel.app
- 사용자의 편의를 위해 질환명에 대한 검색어 추천 기능을 제공합니다.
- 입력한 검색어에 대응하는 추천 검색어가 없을 경우, 검색어 없음 안내 문구를 출력합니다.
- 사용자의 입력값이 없거나 한글 음절이 완성되지 않은 경우(즉, 자음 또는 모음만 입력된 경우), 데이터 요청을 하지 않아 불필요한 네트워크 트래픽을 최소화합니다.
- 한글의 경우 완전한 음절이 완성되지 않으면(자음/모음만 입력 시) 해당 부분을 필터링하여 요청합니다.
- ex)
감ㅁ기 → 감기
,감기ㅁ → 감기
- ex)
- 디바운스 기법을 활용하여 500ms 동안 타이핑 멈춤 감지 시에만 데이터를 실제로 요구함으로써 서버와 클라이언트 간의 부담을 줄입니다.
- 모든 API 응답은 로컬에서 캐싱되며, 이후 동일한 요청이 발생하면 API를 호출하는 대신 캐시에서 데이터를 가져옵니다.
- 캐싱된 데이터는 24시간이 지나면 만료됩니다.
- 사용자가 추천된 검색어 중 원하는 항목으로 이동하고 선택할 수 있도록, 위/아래 방향키(ArrowUp/ArrowDown)와 엔터 키의 조합을 활용할 수 있습니다.
- 브라우저의 Cache Storage에 API 요청을 캐싱합니다.
- Cache Storage에 데이터 저장 시 header에 fetch date를 저장합니다.
- 이후 동일한 쿼리로 요청이 발생하면
match()
메소드로 비교후 쿼리가 같은 경우 새로 API 요청을 하지 않고, 캐시 데이터를 반환합니다. - 해당 시점과 fetch date의 시차가 24시간이 넘은 경우 새로 API 요청 결과를 반환합니다.(
console.info(calling api)
)
- 입력값이 아무것도 없으면 요청하지 않습니다.
- 디바운싱을 활용해 500ms이상 타이핑이 멈추면 데이터를 요청하도록 유도하여 불필요한 요청을 줄였습니다.
- 한글의 경우 완전한 음절이 완성되지 않으면(자음/모음만 입력 시) 해당 부분을 필터링하여 요청합니다. ex)
감ㅁ기 → 감기
,감기ㅁ → 감기**
- 사용자가 추천된 검색어 중 원하는 항목으로 이동하고 선택할 수 있도록, 위/아래 방향키(ArrowUp/ArrowDown)와 엔터 키의 조합을 활용할 수 있습니다.
📦src
┣ 📂apis
┣ 📂components
┣ 📂constants
┣ 📂containers
┣ 📂hooks
┣ 📂types
┣ 📂utils