최종 프로젝트 14일 차 @필수 입력 과정 조정, 리스트 필터를 쿼리 스트링으로 관리, html 렌더링 오류 수정, 검색 디바운싱

오늘은 css 과정을 마치고 튜터님의 피드백을 받아서 ux를 개선하거나 코드를 리펙터링 하는 등의 작업을 거쳤다.

 

필수 입력 과정 조정

내가 만든 참가하기 기능은 모집 하기 이후에 반드시 실행되어야 하는데, 모달 창을 사용자가 닫지 못하게 했지만 이 정도로는 부족하다는 것을 피드백을 통해 통감했다. 아예 새로고침하거나 브라우저나 탭을 닫아버리면 문제가 일어나는 것은 똑같았기 때문이다. 

 

그래서 나는 모집하기 마지막에 기본 프로필로 참가하기 로직을 삽입하고 이후 뜨는 모달창에서는 이미 삽입한 기본 프로필을 업데이트하는 방식을 선택했다. 이러한 방법을 사용하면 사용자가 예상 외의 행동을 하더라도 오너 정보가 없어서 오류가 뜨지는 않을 것이다. 

 

검색 디바운싱

또 지적 당한 것이 크게 필요성을 느끼지는 못했던 검색 디바운싱이다. 기존에 익숙한 검색 방식이 검색어를 입력하면 그에 즉각적으로 검색결과가 나타나는 방식이었던지라 검색 디바운싱에 크게 매력을 느끼지 못했던 것이다. 하지만 supabase 요금 이야기를 들으니 절로 고개가 숙여질 수밖에 없었다. 

 

그래서 결국 검색 디바운싱을 하게 되었는데 내가 기존에 강의로 배운 검색 디바운싱 방식은 lodash라는 라이브러리를 사용하는 방식이었던지라 이것을 사용하지 않는 방법을 따로 찾아보았다. 

 

아래가 검색 결과를 내 방식대로 고쳐본 코드이다. 1초마다 디바운스 될 때마다 검색어가 전달되도록 하였다. 

// 커스텀 훅
const useDebounce = (value: string, delay: number) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    }; //value 변경 시점에 clearTimeout을 해줘야함.
  }, [value]);

  return debouncedValue;
};

// 사용
const debounce = useDebounce(text, 1000);

useEffect(() => {
    router.push('/?' + createQueryString('search', debounce));
    }, [debounce]);

리스트 필터를 쿼리 스트링으로 관리

또 들은 것이 보통 홈과 같은 페이지는 검색 결과를 완전히 state로 관리하지 않고 url로 관리한다는 것이었다. 확실히 생각해보니 여태껏 복사 붙여넣기 하던 url들은 이런저런 쿼리가 붙어있던 것을 확인할 수 있었다. 이러면 새로고침해도 검색결과가 초기화되지 않으니 확실히 유용한 테크닉인 것 같았다. 

 

위의 코드 일부가 바로 이러한 쿼리스트링을 통한 리스트 필터 기능이다.

useEffect(() => {
    router.push('/?' + createQueryString('search', debounce));
    }, [debounce]);

 

html 렌더링 오류 수정

 

이건 피드백과는 상관없는 이전부터 있었던 오류인데, 재생바에서 html hydration 오류가 가끔씩 발생하는 것이다. 짐작하기로는 next.js의 클라이언트 컴포넌트는 근본적으로 서버 컴포넌트이기 때문에 서버 상태와 클라이언트 상태가 충돌해서 발생하는 문제인 것 같았다. 

 

이를 근거로 setState에 지정한 초기값을 0으로 지정해보니 이러한 오류가 없어지는 것을 확인할 수 있었다.