[Candly/ISSUE] 검색이 제대로 안될 때(삼성전자를 쳤는데 삼성전기까지?)

이 글은 알파코에서 진행 중인 [신한투자증권] 프로디지털아카데미의 과정에서 신윤수 강사님과 진행한 프로젝트를 기반으로 작성되었습니다

 

 

프로젝트 진행 중에 검색 기능을 구현하게 되었다. 몇 번 테스트를 해본 결과, 잘 나오는구나라고 생각하던 도중 다른 팀원에게 "삼성전자를 쳤는데 삼성전기도 같이 나와요" 라는 말을 듣게 되었다. 늘 그랬던 것은 아니나 어쩌다 한 번씩 아래의 사진처럼 삼성전자를 쳤는데 삼성전기의 데이터도 같이 조회되는 것이었다 . . . 

 

 

 

 

개발자 도구로 응답도 확인했으나 분명 삼성전자의 데이터만 조회하는 요청이 제일 마지막에 위치한 것도 보았다. 이런 저런 시도를 해봤지만, 알 수 없어 강사님께 도움을 요청했다.

 

 

요청과 응답의 시간을 보니 아마 요청이 너무 빠르게 가다 보니 "삼성전자"보다 "삼성전"의 응답이 더 늦게 도착해서 일어난 일이라고 하셨다. 네트워크의 문제이기 때문에 이 오류를 해결할 수 있는 방법은 요청을 느리게 보내는 것이엇다.

 

 

 

아래는 내가 원래 작성했던 코드이다. 원 코드는 검색창에 키워드를 입력할 때마다 api요청을 보내고 있었다. 

  useEffect(() => {
    const fetchData = async () => {
      const result = await getPracticeList(
        page,
        keyword,
        filterCategory || "all"
      );
      setProblems(result.practiceProblem);
      setTotalPages(result.totalPages);
    };

    const fetchCorrect = async () => {
      const result = await getRankPracProblem(auth.token);
      setCorrectProblems(result.data);
    };

    fetchData();
    fetchCorrect();
  }, [page, keyword, filterCategory]);

 

 

 

그래서 검색창에 값이 입력할 때마다 요청을 보내는 것을 방지하기 위한 기술이 있는데 바로 debounce이다. debounce는 무엇일까?

debounce란?

연속적으로 발생하는 이벤트를 처리할 때, 짧은 시간 간격으로 반복되는 이벤트를 묶어서 마지막 이벤트 또는 특정 시간 이후의 이벤트를 처리하도록 하는 기술이다.

 

이를 이용해서 검색창에 문자를 입력할 때마다가 요청을 보내는 것이 아니라 다 입력한 뒤에 요청을 한 번 보낼 수 있게 하였다. 

  useEffect(() => {
    const fetchData = async () => {
      const result = await getPracticeList(
        page,
        keyword,
        filterCategory || "all"
      );
      setProblems(result.practiceProblem);
      setTotalPages(result.totalPages);
    };

    const fetchCorrect = async () => {
      const result = await getRankPracProblem(auth.token);
      setCorrectProblems(result.data);
    };

    const fetchAll = debounce(() => {
      fetchData();
      fetchCorrect();
    }, 200);

    fetchAll();

    return () => {
      fetchAll.cancel();
    };
  }, [page, keyword, filterCategory]);

 

 

위처럼 요청을 1번 보내니 매 요청마다 데이터를 조회해서 가져오는 것보다는 살짝 delay가 있었지만, 다시는 같은 오류가 나지 않았다.

 

 

 

debounce 공식 문서 : https://es-toolkit.dev/reference/function/debounce.html