Search-Box

프로젝트 개요

질환명 검색시 API 호출 통해서 검색어 추천 기능 구현

구현 화면

1) 검색창 구현

• 검색어 입력시 추천 검색어 노출
• api를 호출한 후 try-catch를 이용하여 에러 핸들링 처리
• 검색어 없을 시 “검색어 없음”, 검색어 입력 중 "검색중.." 노출
• 해당 검색어 bold 처리

2) 키보드로 검색어 이동

• custom hook을 사용해서 up, down 이벤트를 처리
• ref로 전체 리스트(ul)에 접근해 키보드로 검색어(li) index 선택

3) API 호출 최적화

• Debounce로 0.5s 후 api를 호출하도록 하여 api 호출 횟수 최소화
• 검색어 호출 custom hook을 사용해서 캐싱 기능 구현
• getSickResults() 함수에 사용자가 입력한 input 값이 들어오면 Map에 해당 값이 있는지 확인
  • input에 매치되는 key가 있다면 해당 value 값을 리턴
  • 없다면 새로운 key, value 생성

과제 요구사항

1) 범위

• 사이트 검색 영역 클론하기

2) 요구사항

• 사용자가 입력한 텍스트와 일치하는 부분 볼드처리
• 검색어가 없을 시 “검색어 없음” 표출
• API 호출 최적화
  • API 호출별로 로컬 캐싱 구현
    • 캐싱 기능을 제공하는 라이브러리 사용 금지(React-Query 등)
  • 입력마다 API 호출하지 않도록 API 호출 횟수를 줄이는 전략 수립 및 실행
  • API를 호출할 때 마다 console.info("calling api") 출력을 통해 콘솔창에서 API 호출 횟수 확인이 가능하도록 설정
• 키보드만으로 추천 검색어들로 이동 가능하도록 구현

실행 방법

$ git clone https://github.com/Jooseulgi/search-box.git
$ cd search-box
$ npm install
$ npm start

사용 기술

• TypeScript
  • 컴파일 단계에서 오류 확인이 가능해 코드의 안정성을 주고 type 학습을 위해 선택했다.
• Axios
  • fetch와 비교해 서버로부터 데이터를 받은 후, json으로 변환할 필요가 없는 장점이 있다.
  • instance를 제작하여 fetch보다 가독성 높은 코드를 작성할 수 있어 선택했다.
• Tailwind CSS
  • 클래스의 이름을 생각할 필요가 없다는 장점이 있고 러닝 커브가 크지 않은 것 같아 학습해 볼 겸 선택했다.

폴더 구조

search-box
├─ 📁 husky
├─ 📁 data # json-server data가 있는 폴더입니다.
├─ 📁 public
├─ 📁 src
│  ├─ 📁 components  # search-box 관련 components가 모여있는 폴더입니다.
│  ├─ 📁 hooks  # keyboard event, cache 관련 hook이 있는 폴더입니다.
│  ├─ 📁 pages  # 페이지 폴더입니다.
│  ├─ 📁 types  # 타입 선언 폴더입니다.
│  ├─ index.css
│  └─ index.tsx
├─ ⚙️ .eslintrc.json
├─ ⚙️ .gitignore
├─ ⚙️ .prettierrc.json
├─ ⚙️ package-lock.json
├─ ⚙️ package.json
├─  README.md
├─ ⚙️ tailwind.config.js
└─ ⚙️ tsconfig.json