Svelte - window is not defined

 오랜만에 SPA로 돌아왔습니다. vue2로 어드민을 하다가 결국 어드민 프론트가 flutter-web으로 결정되어 앞으로 프론트는 할 일이 없다고 생각하고 하던 Java나 열심히 하고 Kotlin으로 서버도 만들어보고 그렇게 살고 있었습니다. 

 그러다가 flutter-web이 사용성이 너무 떨어진다는 의견이 나와 결국엔 웹 프레임워크로 돌리자는 말이 나왔습니다. 부랴부랴 프레임워크를 선정해야 해서 React와 Svelte 두 개 중에 하나를 고심했는데 React로 하려했으나 하다보니 이건 일정 안에 불가능 하겠는데? 싶어서 결국 Svelte로 진행하게 되었습니다.

 그렇게 한창 Svelte로 로그인과 로그아웃을 진행하던 와 중에 다 잘 되고 있다고 생각되던 순간, 옆 자리 후임이 저한테 절망적인 말을 했습니다.

선임님, F5 눌러서 새로고침하니까 에러가 나요

 

 비장하게 인용문 한번 써 봤습니다. vue를 할 때도 그렇고 SPA는 기본적으로 node에서 SSR(server side rendering)을 하기에 새로고침을 하게 되면 종종 스토어 등에 보관한 것들이 사라지는 건 알고 있었습니다. 근데 새로고침에서 뜨는 에러가 바로 'window is not defined' 였습니다. 사실 새로고침 하기 전에도 종종 뜨던 에러였는데, 이리 저리 browser니 onMount니 하는 잡기술로 떼우고 어찌저찌 cookie에 token 박아 놓고 진행 중이었는데, 새로고침을 하니 또 window를 못 찾는 참사가 일어나 버렸습니다.

 그래서 cookie 방식을 svelte가 제공하는 locals로 고치고 진행 해봤는데 새로고침하면 없어지기는 마찬가지  였습니다. 사실 Axios를 써서 문제가 발생한 거라 Fetch로 다 갈아치우면 되지만(사실 이게 맞는 거 같...),  아무튼 저희는 새창이든 새로고침이든 cookie에 정보를 박아둬야 데이터가 휘발되지 않으므로 이 문제를 해결해야 Svelte로 어드민을 완성할 수 있을 거 같아 열심히 구글신님에게 질문을 해봤습니다만.. 외국애들도 그렇고 PHP 하시다가 Svelte로 건너오신 분 블로그도 보고 했는데 다들 browser랑 onMount만 얘기해서 별로 도움이 되진 않았습니다. 그러다가 npm에서 결국 찾아냈습니다. 

https://www.npmjs.com/package/@mszu/pixi-ssr-shim

@mszu/pixi-ssr-shim

 위 모듈을 npm i @mszu/pixi-ssr-shim 로 프로젝트에 설치해주고 window is not defined 에러가 뜨는 곳에

import '@mszu/pixi-ssr-shim';

 

만 해주면 해결 되었습니다. 그 후에도 종종 새로고침 할 때 browser에 그리는 게 느려져서 이상한 에러들이 뜰 때가 있는데(axios가 두 번 통신 한다던지.. cookie가 늦게 읽어와 진다던지..), 그럴 때는 저걸 넣어주고 아래에 onMount로 문제가 되는 코드를 넣어주면 새로고침을 해도, 주소를 치고 들어가도 문제가 되지 않는 걸 확인할 수 있습니다. 다들 저처럼 window is not defined에 고통 받지 말기를 바라겠습니다.