작업 기록

💫 프로젝트 소개

json-server를 활용한 백엔드 API를 사용하여 구현한 검색어 조회 사이트입니다.

단순히 해당 값이 존재하는지 검사하는 것에서 그치지 않고 input 값의 변화에 따른 검색 요청을 최적화할 수 있는 방법에 대해 고민하고 적용해보았습니다.

또한 맡은 역할만 구현하는 것에서 더 나아가, 각자 모든 기능을 구현할 수 있는 방법에 대한 자료를 찾아보고, 구현 방법을 연구해보았습니다. 이후 각자 맡은 역할에 대한 구현 사항을 취합하여 하나의 프로젝트 사이트로 완성했습니다.

💫 배포 링크

• Client (Vercel)

React App

• Server (Glitch)

JSON Server

💫 팀원

💫 API 최적화를 위해 사용한 방법

• 검색 API Call 최적화 방법으로 많이 사용되는 debouncing, throttling을 공부한 후 비교해본 결과 검색 기능 API Call 최적화에는 debouncing이 더 적합하다고 판단하여 해당 방법을 사용하기로 결정하였습니다.
  • 승용
    • 검색 기능 구현이 목적이므로, debouncing을 사용해야 마지막 타이핑 이후 다른 타이핑이벤트가 시작했을 때 바로 해당 함수 호출이 가능하다고 판단하였음
  • 재원
    • 정해진 시간이 지났을 때 요청이 보내지는 throttling 보다 onChange 이벤트에 따라 저장된 input 값을 그룹화 해서 요청을 보내는 debouncing이 검색 기능에 더 적합하다고 생각하였음
  • 정우
    • input 창의 값을 활용하는 검색에서는 시간을 정해두고 호출 횟수를 막는 것보다 입력을 감지해서 입력이 끝날 때만 요청을 보내는 것이 더 적합하다고 생각했음