Gatsby란?

정적 사이트 생성기이다.
리액트, 웹팩, graphql을 하나로 통합한 프레임워크이다.
서버 사이드 렌더링을 지원한다.

문제점

Gatsby는 기본적으로 서버 사이드 렌더링을 지원한다. 그렇기 때문에 서버 사이드에서 실행되는 코드는 브라우저에서 사용할 수 있는 window, document 객체 등을 사용할 수 없다.

해결 방법

해결 방법으로는 브라우저 api 객체가 있는지 확인하는 방법과, 페이지가 렌더링 되고 난 후 실행하는 방법이 있다.

1. 객체 확인

   1  typeof window !== "undefined";

   구문을 추가해서 window 객체가 존재할 때만 코드를 실행한다.
2. React의 useEffect 사용
   useEffect 내부 코드는 렌더링이 되고 난 후 실행되기 때문에 서버 사이드 렌더링이 완료된 후 코드를 실행하는 방법으로 해결할 수 있다.