TL; DR

핫 리로드 (Hot Module Replacement)와 함께 개발을 WSL (WSL2)에서 수행 할 때 /mnt/c/Users/username와 /home/username에 걸쳐 상호 작용해서는 안됩니다. WSL 측에서 실행중인 패키지 관리자 (npm, yarn, webpack 등)가 마운트 처의 Windows 시스템 측을 보러 가면 그것이 병목이되어 힘들다.

무슨 일이 있었는지

Windows 10 Home에서 WSL2를 사용할 수 있고 여러가지 기운도 있어 vue를 시작할까 하는 것이 되었다. Ubuntu 20.04도 넣어 Windows Terminal을 열고 n => node => yarn => @vue/cli로 인스코했다. $ vue create hello-world의 $ cd hello-world && yarn serve에서 개발 서버를 시작해 보았지만 더 이상 일어나지 않습니다. 아무튼 처음에는 이런 걸까와 튜토리얼을 보면서App.vue를 만져 보는 것도 일방에 페이지가 반영되지 않는다(핫 리로드라고 녀석이 디폴트로 기능하고 있는 것은 아닐까?).vue.config.js의 webpack 측 설정을 강제로 강제로 핫 리로드 할 수 있도록 재설정했지만, 이번에도 빌어 먹을만큼 느립니다. 프런트 엔드의 개발은 이렇게도 스트레스 풀인 가운데에서 노력하고 있는 것인가…… (착각)



아니 1분 이상 어두운 화면 바라볼 수 있는 기분을 생각해줘…

시도한 것

컴파일이나 변환 (bundle?)은 녀석이 느리지 않을까 생각하고 webpack 측이 이상하다는 것을 의심한다. worker memory limit라는 표시를 보면, 그쪽이 박박하고 있을지도 모른다고 생각하고 어떻게 든 조정한다. 하지만, 변화 없음…

webpack을 고속으로 하는 소수처 테크닉을 찾는 것도 거의 변화 없음.
ESLint 야라 Prettier가 나쁜 일을 할 수 있다고 생각했다. 성형 기능은 정상적으로 움직이고, 바삭바삭인데… 우~응.

원인

WSL 측에 실행 경로가 있는데 일부러 마운트처의 C드라이브내까지 파일을 보러 왔던 것이 원인이었다.

Windows Terminal에서 WSL을 열면 기본 디렉토리가 Windows 측의 사용자 홈 디렉토리입니다. GUI 에디터에서는 wsl상의 파일을 편집하는 것은 뼈가 부러지는 장면도 있을까라고 생각해 ①실행은 WSL상 ②파일 실체는 Windows의 C드라이브상에서 행하는 구성으로 하고 있었다.

해결

실행 환경과 파일 실체를 동일한 환경으로 하면 된다.

명령 프롬프트와 PowerShell에 node 환경을 준비하는 것이 억지로 느껴지기 때문에 wsl에서 실행하여 wsl에 파일 실체가있는 구성으로 만드는 것을 생각했다.

개선 전: 83384 ms

개선 후: 346 ms

솔직히 여기까지 속도에 차이가 있으면 바보같게 되어 버린다. 바보인가?

새로운 문제와 해결책

wsl에서 모든 것을 수행하면 문제가 발생하지 않는다는 것을 알았지 만, 그대로의 유명한 emacs와 vim에서 눈물을 흘리면서 프로그램을 작성하게됩니다. 단지 익숙하지 않은 언어에 도전하려고 하는데 에디터의 사용법까지 동시에 배우는 것은 유석에 너무 고통스럽다.

그래서 Vscode (insiders) Remote - WSL를 사용하기로 결정했습니다. 이렇게하면 wsl의 파일을 스트레스없이 편집 할 수 있습니다. emacs 나 vim에게 영혼을 팔지 않아도됩니다.

【Remote - WSL】VScode의 새로운 기능으로 WSL상에 로컬 개발 환경을 구축한다 - Qiita

참고문헌

Hot Module Replacement 설정 및 메커니즘 이해 - Qiita

우분투에 최신 Node.js를 어려움없이 설치 - Qiita

【메모】Vue CLI에서 핫 리로드가 효과가 없다 - Qiita

계속 · VSCode에서 vue 파일에 대해 ESLint와 Prettier가 편안하게 작동하는 설정 - Qiita

Remote - WSL - Visual Studio Marketplace

【Remote - WSL】VScode의 새로운 기능으로 WSL상에 로컬 개발 환경을 구축한다 - Qiita