🔎 추천 검색어 기능

🛫 백엔드

• backend - prisma

// /api/keyword/[keyword].ts
// async 함수 내부에 있다고 가정
const keywords = await prisma.keyword.findMany({
  where: {
    keyword: {
      contains: keyword,
    },
  },
  select: {
    keyword: true,
  },
});

🛬 프론트

1. 디바운스 적용

디바운스란 연속해서 같은 요청이 들어올 경우 제일 마지막 요청만 유효하게 처리하는 방법

상품 검색의 경우 검색어를 입력할 때의 이벤트에 추천 검색어를 받아와서 보여주는 기능이 있는데 이것을 디바운스를 적용하지 않게되면 사용자가 한글자를 누를 때마다 한번의 요청이 날아가기 때문에 서버에 부담이 심해질 수 있습니다.

이런 문제를 해결하기 위해서 디바운스를 적용해서 검색어를 연속적으로 입력할 때는 서버로 요청을 보내지 않도록 처리했습니다.

2. 포커싱

추천 검색어를 받아오고나서 랜더링했을 경우 사용자가 검색창에 포커스를 줬을 경우에만 추천 검색어를 보여주도록 만들었습니다.

초기에는 onFocus와 onBlur를 이용해서 포커스가 떠나면 추천 검색어들이 사라지도록 만들었는데 그렇게 구현하면 추천 검색어를 클릭하거나 추천 검색어에 포커스를 주도록 이동할 경우에 검색창의 onBlur가 실행되어 추천 검색어들이 사라지는 문제가 발생했습니다.

문제를 해결하기 위해서 이전에 사용해봤던 모달 영역외 클릭 시 닫는 기능을 가져와서 적용했습니다.

// 2022/04/16 - 키워드 값 - by 1-blue ( react-hook-form의 useForm() )
const keyword = watch("keyword");
// 2022/04/16 - 키워드 포커스 여부 및 관련 키워드 보여줄지 결정할 변수 - by 1-blue
const [isFocus, setIsFocus] = useState(false);
// 2022/04/16 - 키워드 검색 시 디바운스 적용할 때 사용하는 변수 - by 1-blue
const [debounce, setDebounce] = useState(false);
// 2022/04/16 - 키워드 검색 시 디바운스 적용할 때 사용하는 함수 - by 1-blue
const debounceKeyword = useCallback(() => setDebounce(true), [setDebounce]);
// 2022/04/16 - 키워드 검색 시 디바운스 적용 - by 1-blue
useEffect(() => {
  const timerId = setTimeout(debounceKeyword, 300);

  return () => {
    clearTimeout(timerId);
    setDebounce(false);
  };
}, [debounceKeyword, keyword, setDebounce]);
// 검색창과 추천 검색어를 자식으로 가지는 element
const wrapperRef = useRef<HTMLDivElement>(null);
// 2022/04/16 - 영역외 클릭 시 추천 키워드 창 닫기 - by 1-blue
const handleCloseModal = useCallback(
  (e: any) => {
    if (
      isFocus &&
      (!wrapperRef.current || !wrapperRef.current.contains(e.target))
    )
      setIsFocus(false);
  },
  [isFocus, setIsFocus, wrapperRef]
);
// 2022/04/16 - 추천 키워드 창 닫기 이벤트 등록 - by 1-blue
useEffect(() => {
  setTimeout(() => window.addEventListener("click", handleCloseModal), 0);
  return () => window.removeEventListener("click", handleCloseModal);
}, [handleCloseModal]);
// 2022/04/16 - 추천 키워드 패치 - by 1-blue
const { data: recommendKeywords } = useSWR<IResponseOfRecommendKeywords>(
  debounce && keyword ? `/api/keyword/${keyword}` : null
);

• 영역외 클릭 시 모달 닫기 참고한 사이트