브라우저 렌더링 프로세스
우리가 프론트엔드 개발을 할때 next라면 yarn dev 명령어를 통해 프론트엔드 서버를 구동시켜
개발을 해 왔을 것이다.
이제는 렌더링이 어떠한 프로세스를 가지는 지 알아볼 시간이다.
우리가 코드를 실행시키면 서버와 브라우저는 렌더링을 하게된다.
우선 서버에서 밑그림을 그리고 브라우저에서 다시 완벽하게 그리기 시작한다.
하지만 여기서 문제가 하나 있다.
서버에서 렌더링을 하는데 브라우저전용 코드 혹은 변수를 쓴다면??..
당연하게도 undefined 에러가 나올 것이다. 예를들어 window, localStorage등이 있다.
그럼 이 문제를 어떻게 해결 할 것인가.
3가지 정도 방법이 있지만 나는 react와 next를 사용하는 만큼
useEffect를 활용하길 바란다. useEffect함수는 브라우저가 렌더링될때 시작되는 함수라
이 함수 안에 있는 브라우저 전용코드들은 서버사이드 렌더링에서는 렌더링되지 않아
에러가 발생하지 않는다.