[torytis] dev server 업데이트 안내

티스토리 스킨 개발 편의를 제공하는 torytis 의 dev server 에 핫리로드 기능이 업데이트 되어 이를 소개 드리기 위해 이렇게 글을 작성하게 되었습니다.

 

업데이트 전

torytis 를 사용해 만든 개발 결과물을 확인해보려면 아래 명령어를 실행해야 합니다.

npm run dev

 

만약 소스코드 내용에 변경이 생겼을 경우 dev server 를 종료하고 다시 위 명령어를 입력해야 했습니다. 수정이 빈번하게 일어나고 결과를 매번 확인해야 하는 상황에선 이 과정이 불편하게 느껴질 수 있던 부분 이었습니다.

 

업데이트 후

torytis 최신 버전에서는 이러한 부분을 개선하였습니다. npm run dev 를 이용해 dev server 를 실행하면 이제는 소스코드 내용에 변경이 생겼다면 자동으로 빌드가 다시 진행되고 브라우저에 이벤트가 전달되어 새로고침 후 변경된 결과가 표시되게 됩니다. 이제 변경 사항이 생겼을 때마다 dev server 를 종료 하고 다시 재실행 하는 과정을 하지 않아도 됩니다! 일명 핫리로드 기능이 추가되었습니다!

 

핫리로드 구현 과정

Vite 활용

핫리로드를 구현하기 위해 빌드시 이미 사용중이었던 Vite 를 활용해 watch.mjs 라는 별도 파일을 작성하였습니다. vite 의 build 함수의 watch 속성을 사용해 소스 코드 변경을 감지 하고 변경이 감지되면 다시 빌드 및 후처리 작업이 진행되도록 하였습니다.

Socket 활용

재빌드 완료 후 이를 브라우저에게 알려줘야 하는데, 여기서 socket 을 활용하였습니다.

Rust 내부 기능 분리 및 api 구현

Vite 를 사용하는 만큼 일부 작업은 node.js 에서 진행되고 또 일부 작업은 rust 에서 진행되는 구조인 상황이었습니다. 특히 dev server 핫리로드 구현시 빌드 될 때마다 중간 중간 rust 에 작성된 기능을 호출해야 했는데, 이를 위해 rust 내부에 작성 되었던 기능들을 함수로 나누고 이를 다시 api 로 오픈하여 Vite 를 사용하는 node.js 단에서도 rust 에 작성된 기능을 api 호출을 통해 사용할 수 있도록 하였습니다.

 

아쉬운 점

didn't resolve at build time 에러

현재(v1.5.1) 기준으로 dev server 를 실행하면 다음과 같이 vite 의 로그가 표시됩니다.

css 에서 ./images 으로 시작하는 경로를 사용한 부분에서 위 에러가 발생하고 있는 것인데, 해당 경로는 dev server 나 티스토리에 스킨을 업로드하면 정상 작동하는 경로입니다. 하지만 vite 입장에서 보면 그런 사실을 모르기 때문에 위 에러가 발생하는 것인데.. 그래서 위 로그가 표시되지 않게 하고 싶었는데 생각보다 오래 걸릴 것 같아 후순위로 미루었습니다. 

 

dev server 핫리로드 시연 영상

 

Windows 환경

windows os 에서 torytis 의 dev server 를 실행할 경우, 네트워크 관련 권한이 없을 경우 에러가 발생할 수 있습니다. 이 부분은 권한 허용 팝업창이 표시됬을 때 허용 버튼을 누르신 후, 다시 dev server 를 실행하시면 됩니다.

 

마치며

dev server 기능이 torytis 를 사용해 티스토리 스킨을 개발하시는 여러분들께 좀 더 많은 도움이 되었으면 좋겠습니다. 감사합니다.