Ubuntu로 React 쓸 때 세이브 반영이 안 되는 문제

아침 내내 React와 씨름을 하고 왔습니다. WSL2와 우분투로 리액트를 까는 건 처음이었거든요. 

 

이전부터 여러 테스트를 돌리기 위해 우분투 터미널을 쓰고 있었고, 과제 진행하면서도 /mnt/c 로 윈도우 바탕화면까지 경로를 이동하여 거기서 작업을 하곤 했습니다. 보통 우분투를 처음 깔면 주어지는 경로가 home인데, 그곳이 아니라 윈도우 desktop까지 경로를 지정해가며 옮겨간 거죠. 그쪽이 아무래도 윈도우 유저는 시각적으로 편하니까(...)

 

하여튼 경로 이동에 자신감이 붙은 저는 이번에도 윈도우 폴더에 react 폴더를 생성해준 뒤 접속했습니다. (이 과정에서 nodejs가 14이전 버전이라 깔리지 않는다는 에러가 떠서 기겁하며 다시 업데이트 하고, npm도 지우고 다시 깔긴 했지만 생략하겠습니다. 기억하세요... react는 너무 낮은 nodejs에서는 깔리지 않습니다...터미널에서 node --version으로 확인 가능할 겁니다.)

 

저를 고통스럽게 한 문제는 세이브에서 발생합니다.

리액트에는 원래 npm run start를 통해 실행시키면 자동으로 브라우저가 뜨고, VS code에서 세이브를 할 때마다 자동 새로고침 되어 수정 사항을 반영해주는 즉시 반영 시스템이 있습니다. 매번 npm run start를 해주지 않아도, 직접 새로고침을 하지 않아도 웹페이지가 수정이 되는 걸 볼 수 있죠. 이게 얼마나 편한지 아실 겁니다... 

제 문제는 여기서 생겼는데요. 아무리 세이브를 눌러도 새로고침을 해도 반영이 되지 않는 거였습니다. 여러 방법을 찾아 고뇌하던 중 유사한 문제를 안고 있는 분을 만나 문제를 해결하게 되었습니다.

 

리액트 파일 생성 경로를 처음에 윈도우에 한 점이 문제였습니다. 어떤 이유에서인지 /mnt/c 즉 윈도우 쪽에 깔린 리액트 파일은 아무리 새로고침을 해봐도 변화가 보이지 않습니다. 그러면 에러를 해결할 가장 쉬운 방법은 뭘까요?

... 바로 우분투 리눅스의 초기 경로, 즉 home 밑에 작업하고 싶은 폴더를 만들어주는 겁니다. 물론 파일을 윈도우에서 작업할 수 없다는 단점이 있지만, 어쨌거나 가장 빠르고 확실한 답인 것 같습니다. 심지어 윈도우에서는 npm run test까지 시간이 1분 이상 걸렸는데 경로를 바꿔주고 나니 속도도 훨씬 개선이 되었습니다. 속이 뻥 뚫려요.

 

혹시 이런 상황이 의심되시나요? 자신의 경로상 위치를 알고 싶다면 당장 터미널에 pwd를 쳐보세요. 그러면 현재 있는 위치까지의 경로가 뜨는데, /mnt 가 중간에 들어있지는 않은지... 자신이 home 밑에 있는지를 보시면 됩니다. 혹시라도 mnt에 있다면 축하합니다, 리눅스를 벗어나 윈도우로 가셨습니다. 리눅스로 돌아와주세요. home의 밑에서 리액트 폴더를 만든 뒤 세이브 및 npm run start 하면 수정 사항이 바로 반영되는 웹페이지가 생성되는 것을 볼 수 있습니다. 

 

 

 

문제 해결 참조: 

https://stackoverflow.com/questions/69276057/wsl-2-react-not-reloading-with-file-changes

WSL 2 , React not reloading with file changes?

 

리눅스와 mnt의 관계 : 

https://velog.io/@joygoround/Linux

[Linux] wsl + ubuntu 세팅