트러블 슈팅

이전에 구현해놨던 무한스크롤에서 이슈를 발견했다. 데이터를 전부 불러왔는데 스크롤을 계속 할 수 있고 페이지 수가 끝없이 늘어나는 버그를 찾았다.

어떻게 버그를 잡아야 할 까 고민하다 useInfinityQuery를 사용해서 무한 스크롤을 구현하기로 결정했다.

const fetchPosts = useCallback(
    async ({ queryKey, pageParam = 0 }: QueryFunctionContext<QueryKey>) => {
      const [, selectedLanguages] = queryKey as readonly [string, string[]];
      const langQuery = selectedLanguages.length > 0 ? `&languages=${encodeURIComponent(JSON.stringify(selectedLanguages))}` : '';
      const response = await fetch(`/api/proMain?page=${pageParam}${langQuery}`);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    },
    []
  );

  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isFetching,
  } = useInfiniteQuery<Posts[], Error>({
    queryKey: ['posts', selectedLanguages] as const,
    queryFn: fetchPosts,
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.length === 10 ? allPages.length : undefined;
    },
    initialPageParam: 0,
  });

  useEffect(() => {
    const handleScroll = () => {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500 && hasNextPage && !isFetchingNextPage) {
        fetchNextPage();
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);


  const filteredPosts = useMemo(() => data?.pages.flat() || [], [data]);

useInfinityQuery로 다시 무한 스크롤을 구현했는데 스크롤을 해서 데이터를 렌더링 할 때 카드 리스트들이 깜빡거리는 현상이 있었다.
이 현상은 CSS의 transition을 사용해서 어느정도 커버 할 수 있었다

.post {
  transition: opacity 0.3s ease-in-out;
}

.post-enter {
  opacity: 0;
}

.post-enter-active {
  opacity: 1;
}

.post-exit {
  opacity: 1;
}

.post-exit-active {
  opacity: 0;
}

리팩토링

페이지 별로 빠르게 기능구현을 하려고 리팩토링을 안하고 있었는데 오늘 리팩토링을 하려니까 코드가 400줄 가까이 됬다
우선 컴포넌트 별로 코드를 분리시켰고 나머지는 커스텀훅으로 리팩토링을 진행 할 예정이다