document is not defined.
Cookie를 쓰려고 했어요.
프로젝트에서 cookie를 이용해 사용자가 찾아본 구장을 저장하고, 최근 본 구장목록을 띄워주는 로직을 작성했다. 중요하지 않은 정보라 생각했고, 단순히 cookie에 구장의 id값을 기록해서 해당 리스트로 목록을 출력하려 했다.
어렵지 않았다. 그저 단순히 document.cookie를 이용해 구장 페이지를 볼 경우와, 지도에서 해당 구장을 클릭해서 상세정보를 볼 때 cookie에 해당 값을 넣어줬다.
이후 사용자 프로필 UI에서 최근 본 구장목록을 document.cookie를 사용해 가져왔고, 이후 SWR을 통해 구장리스트를 가져와서 출력했다.
그런데.
새로고침을 하는 순간 에러가 떴다.
왜?
서버 pm2 monit에 떠 있던 에러는.
📄documnet is not defined.
document가 정의되지 않았다?!
웹페이지 그 자체인 document가 정의되지 않았다? 아니 이게 무슨소리야.
먼저 Next js, SSR, CSR에 대해 더 잘 알아봐야 한다.
SSR, CSR
SSR은 접속한 페이지를 서버에서 렌더링 후 사용자에게 제공된다. 이후 페이지를 동작하게 하거나 구성하는 리소스들을 로드하도록 한다. 이를통해 사용자에게 더 빠른 경험을 전할 수 있고, 검색엔진에 의해 내용을 크롤링하여 SEO 문제도 해결 할 수 있다. 그러나 페이지 이동시에는 해당 페이지를 요청, 렌더링을 해야 하므로 CSR보다 느리다는 단점이 있다.
반면 CSR은 모든 페이지를 사용자가 로드 후에 렌더링을 하게 되므로, 로딩 시간이 SSR보다 느리다. 하지만 다른 페이지로 넘어갈 때, 이미 모든 페이지가 렌더링이 되어 있기 때문에 SSR보다 빠르게 동작한다.
Next js
모바일의 발전이 모바일 앱과 같은 웹페이지를 요구했고 이에 CSR이 가능한 SPA인 React, Vue 등 여러 라이브러리, 프레임워크가 모습을 드러냈다. 그러나 SPA는 여러단점들이 존재했고, 이러한 단점을 보완하기위해 Next js와 같은 SSR구현을 쉽게 해주는 프레임워크가 등장했다. React도 SSR이 가능하지만 구현이 어렵다.
Next 프레임워크는 SSR의 장점을 사용하여 첫 접속한 페이지(링크를 통한 접속이나 주소를 통한 접속)를 빠르게 렌더링하여 사용자 경험을 높일 수 있다. 또한 이후 이벤트를 통한 페이지 접속은 CSR 방식으로 작동된다.
document의 정의 시점
document의 정의 시점은 모든 요소들이 로드되었을 때이다. 즉 document가 정의되기 전에 document객체에 접근했기 때문에 오류가 났던 것이다.
다시 SSR의 상황을 생각해보면 요소들이 load되기전에 document객체를 활용해 데이터를 가져와서 페이지를 조작하려 했기 때문이었다.
해결
해결을 간단했다. 요소들이 mount된 후. 즉 ComponentDidMount의 시점에 document.cookie를 호출하면 되는 것이었다. 그러나 hooks를 사용중이므로 useEffect를 통해 document 객체에 접근 후 SWR을 사용하여 필요한 데이터를 가
져왔다.
마무리
이제 프로젝트 마무리 한답시고 진행중인 상황에 나의 부족함이 여실히 드러났다. 단순히 "SEO를 적용하고 싶으니까", "코드스플리팅 기능도?!", "라우팅이 쉬우니까"라며 사용했던 나를 반성한다. 기능을 사용할 때 좀 더 구조적인 측면이나 아키텍쳐에 대한 이해가 수반되어야 하겠다.
겉핥기가 아니라 꿰뚫자.
