Nuxt.js window document is not defined 에러 해결

window document is not defined... error

Nuxt.js 에서 window혹은 document를 쓰고, npm run dev 하면 자주 나오는 에러 화면

알고보니 넉스트는 서버에서 페이지를 렌더링하고, 서버에는 window와 document가 없기 때문에 나는 에러였다..

고로 서버쪽에서 document,window를 쓰려면 정의하고 사용해야 한다는 것!

예를 들면,

if (process.client)document.querySelector("#header");

이렇게 if로 감싸주거나 앞에 붙여주면, 에러가 사라지는걸 확인할 수 있다.
(쓸때마다 해줘야 하기 때문에 좀 빡세다,,)

프로젝트를 SEO때문에 vue.js로 하다가Nuxt.js
로 바꿨는데,
에러가 참 다양한 종류로 뜨고 어질어질하다..그래도 하나씩 해결하는 재미가 쏠쏠하네오.

이참에 넉스트를 익혀봅시다.