인프런 커뮤니티 질문&답변

gatsby develop 시에는 문제가 안되지만, gatsby build 시에 문제가 되는 부분입니다.

참고한 사이트는 아래와 같습니다.

https://stackoverflow.com/questions/59424347/gatsby-intersectionobserver-is-not-defined

마지막 코드 observer 부분은 하기 내용과 같은데

  const observer: IntersectionObserver = new IntersectionObserver(
    (entries, observer) => {
      if (!entries[0].isIntersecting) return;

      setCount(value => value + 1);
      observer.disconnect();
    },
  )

  useEffect(() => setCount(1), [selectedCategory])

  useEffect(() => {
    if (
      NUMBER_OF_ITEMS_PER_PAGE * count >= postListByCategory.length ||
      containerRef.current === null ||
      containerRef.current.children.length === 0
    )
      return

    observer.observe(
      containerRef.current.children[containerRef.current.children.length - 1],
    )
  }, [count, selectedCategory])

IntersectionObserver 구문을 useEffect 안으로 넣어야 할 것 같습니다.

    useEffect(() => setCount(1), [selectedCategory])

    useEffect(() => {
        const observer: IntersectionObserver = new IntersectionObserver(
            (entries, observer) => {
                if (!entries[0].isIntersecting) return;

                setCount(value => value + 1);
                observer.disconnect();
            }
        )

        if (
            NUMBER_OF_ITEMS_PER_PAGE * count >= postListByCategory.length ||
            containerRef.current === null ||
            containerRef.current.children.length === 0
        ) return

        observer.observe(
            containerRef.current.children[containerRef.current.children.length - 1]
        )
    }, [count, selectedCategory])