트러블 슈팅 | 검색 기능 구현 중 발생한 중복 요청 및 딜레이 문제

문제

• 사용자가 검색어를 입력할 때마다 관련 검색 결과를 표시하기 위해 서버에 GET 요청을 보내는 과정에서 중복 요청이 발생하고 있다. 이로 인해 서버 부하가 증가하여 서버 성능에 영향을 미칠 수 있다. 또한, 동일한 데이터가 여러 번 생성되어 데이터 불일치 문제가 발생할 가능성이 있다.
• 또 다른 문제로, 제때에 요청 되었지만 결과가 표시되기까지 문자 하나를 더 입력해야 하는 딜레이 문제가 발생했다. 이는 사용자 경험을 저하시킨다.

시도

• 총 3가지 방법을 고려해 보았다.

1. API 요청 취소 기능

   Axios와 같은 HTTP 라이브러리에서 제공하는 요청 취소 기능을 사용하여 중복 요청을 방지하고, 사용자가 새로운 입력을 시작할 때 이전 요청을 취소한다.

2. Throttle 함수 사용하기

   이벤트의 발생 빈도를 일정한 시간 간격으로 제한하여 과도한 이벤트 처리를 방지한다.

3. Debounce 함수 사용하기

   사용자가 입력을 계속할 때는 API 요청을 보내지 않고, 입력이 일정 시간 동안 멈추었을 때만 요청을 보낸다.

해결

• 검색 기능 구현 시, 검색어 입력이 멈췄을 때 최신 결과를 표시하는 것이 가장 자연스럽다.
• API 요청 취소 기능은 주로 실시간 업데이트 및 동기화 같은 상황에서 HTTP 요청을 관리하고 취소하는 데 사용되며, 검색 기능과는 사용 목적이 다르다.
• Throttle 함수는 일정 시간 동안 발생하는 이벤트 중 첫 번째 이벤트만 처리하고 나머지 이벤트를 해당 시간 동안 무시한다. 이로 인해 최신 입력이 반영되지 않아 사용자 경험이 저하되고, 일정한 시간을 기다려야 하기 때문에 응답이 지연된 것처럼 느낄 수 있다.
  

따라서 마지막으로 입력한 검색어 즉 최신 입력을 기반으로 정확한 검색 결과를 제공하는 debounce 함수를 사용하여 중복 요청 및 딜레이 문제를 해결하였다.