1. 개요
사건의 전말은 이렇다. 2차 데모 데이까지 5일도 남지 않은 상태에서 겨우 모든 컴포넌트 구현을 끝내고 기능 구현에 들어갔다. 프론트엔드 개발자 두 명이서 당장 MVP 기능 API 연결을 모두 완료해야 하는 상황이었는데, 시간이 시간이다보니 깔끔하고 좋은 코드를 작성할 여유조차 없었다. 그렇게 데모 데이 날이 되고, 스터디에 계신 모든 직군 분들이 우리 서비스를 테스트해 보시는데 아래와 같은 에러가 반복해서 표시됐다.
사실 간절하게 바란 건 아무도 개발자 도구를 켜 보지 않는 것이었는데, 예리하신 개발자 분들이 처음 서비스를 들어가실 때부터 개발자 도구를 켜고 들어가시더라. (당연함나였어도그랬을거니까) 성능 및 UI/UX 이슈도 당연히 있었지만 당장 문제가 가장 커 보이는 것은 바로 검색 기능이었다. 검색어를 입력하지 않았음에도 불구하고 계속해서 쿼리 요청을 보내고, 서버는 검색 내용도 없는데 자꾸 응답을 달라고 하니까 400을 꾸역꾸역 반복적으로 보내 주고 있는 거였다. 서버야... 못난 프론트엔드 개발자가 미안타...... 🥲
2. Tanstack query enabled
조건이 없어서 쿼리가 자동 실행 되고 있다는 것을 알았으니 이걸 막기만 하면 된다. 말은 참 쉬운데 사실 해결 방법도 굉장히 쉽다. 나는 서버 상태 관리를 Tanstack Query로 진행했는데, enabled라는 옵션이 이 상황을 해결해 줄 수 있을 것 같았다.
1. enabled란?
- boolean type
- 쿼리가 자동으로 실행되지 않도록 하는 코드
- 조건을 만족할 때만 쿼리가 실행되도록 함 (false일 경우 쿼리가 자동으로 실행되지 않음)
2. enabled option 추가
return useInfiniteQuery<
ISearchComponentPageData,
Error,
InfiniteData<ISearchComponentPageData>
>({
queryKey: ["searchComponents", keyword],
queryFn: fetchSearchComponent,
...
enabled: !!keyword, // keyword가 입력되지 않을 경우 쿼리가 자동 실행되는 것을 막음
});3. 결과
키워드 검색 시에만 API가 정상적으로 호출되고, 검색하지 않을 경우(keyword가 없을 경우)에는 API 호출이 일어나지 않았다. 한 줄로 문제 해결!
