dynamicImport
-
[next.js] window 객체가 undefined일 때React 2022. 10. 26. 01:56
동생의 포트폴리오 홈페이지를 next.js를 써서 간단하게 만들어주고 있다. 작품 사진이 있는 /works 페이지에서 작품 이미지들을 드래그 & 드랍할 수 있도록 구현하고 있는데, 모바일을 고려하면 터치도 지원해야할 것 같아서 터치도 지원하도록 구현하고 있다. 그런데 이제 라이브러리 없이! 구현할 때까지만해도 큰 문제가 없었는데 배포하고 보니 모바일 화면에서 터치가 구현이 제대로 안되었다. window.innerWidth를 사용해서 이 이상으로는 이미지가 움직이지 못하도록 제한을 걸어놓았는데, SSR의 특성상 서버에서 HTML을 다 만들어서 주기 때문에 이 시점에는 window 객체가 없어 undefined가 뜨는 것이었다. SSR의 특성까지 생각해보면 자연스러운 현상인데! 검색해보니 다양한 방법들이 나..