본문으로 건너뛰기

자동완성 검색

문제​

검색어를 입력하면 추천 검색어를 보여주는 기능을 설계해봅니다.

요구사항​

  • 입력 중 추천 검색어를 보여준다.
  • 요청을 너무 많이 보내지 않는다.
  • 늦게 온 응답이 최신 결과를 덮어쓰지 않게 한다.

상태 설계​

  • query: 입력값
  • suggestions: 추천 목록
  • isLoading: 불러오는 중인지 여부
  • error: 오류 상태
  • activeIndex: 키보드로 선택 중인 항목

API 요청 전략​

  • debounce를 둔다.
  • request 취소 또는 request id 비교로 오래된 응답을 막는다.

성능 고려사항​

  • 짧은 query에서는 요청하지 않는다.
  • 같은 검색어 결과는 cache할 수 있다.

접근성 고려사항​

  • keyboard 이동을 지원한다.
  • 입력창과 추천 목록을 접근성 속성으로 연결한다.

선택 기준​

  • debounce 시간이 길면 요청 수는 줄지만 반응성이 떨어집니다.
  • cache를 추가하면 사용성은 좋아지지만 갱신 기준이 필요합니다.