WSL2에서 React App(create-react-app) 시작하기

들어가기에 앞서, wsl2(ubuntu 18.04) 에서 React App을 설치하는 방법임을 알립니다.

본인 컴퓨터에 우분투 기반 리눅스가 설치되어 있다면 아래 3가지만 더 준비하면 됩니다.

 

 

node js + npm

🔽 아래 사이트에서 무료로 다운 가능

https://nodejs.org/ko/download/

다운로드 | Node.js

 

🔽ubuntu가 설치되어 있으면 아래 사이트에서 명령어로 간단하게 설치 가능

https://github.com/nodesource/distributions/blob/master/README.md#deb

nodesource/distributions

 

npx

npm install npx -g

 

 

git

https://git-scm.com/downloads

Git - Downloads

git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EC%84%A4%EC%B9%98

Git - Git 설치

 

 

 

 

node.js , npx, git 이 깔려 있다면 준비는 끝났습니다!

설치가 되어 있는지 아닌지 기억나지 않는다면 version을 확인해 보세요.

 

---

 

저희는 지금 windows 운영 체제 위에 WSL(Windows Subsystem for Linux) 이라는 리눅스 소프트웨어를 실행시키고 있습니다. 따라서, ubuntu 기반 터미널을 통해서도 windows directory로 접근이 가능합니다.

 

/mnt 디렉토리를 통하여 리눅스 터미널에서도 윈도우에 접근할 수 있는데 결론부터 말하자면 React App을 윈도우 폴더에 설치하면 설치가 끝난 후 제대로 실행이 되지 않습니다.

 

참고로 저는 이미 한 번 실패를 경험했는데 /mnt/User/users/Documents 디렉토리에 create-react-app 을 설치했더니 보통 20~30초면 설치가 끝나는 과정을 20분이 넘는 시간이 걸렸고 만고의 기다림 끝에 VSC 에서 npm start 를 했더니 웹에서 app을 실행할 수 없다는 뼈아픈 결론만 얻었습니다...

결국 다 지우고 다시 시작했는데 저와 같은 사람이 없길 바라는 마음에 이 글을 씁니다.

 

 

 

로컬에서 설치하기 위해 리눅스 폴더로 이동합니다.

home 디렉토리에 도달했으면 마지막으로 계정이름으로 된 폴더로 들어가면 됩니다.

 

 

npx create-react-app <폴더명>

위 명령어를 입력해주고 기다리면 설치 완료!

 

그 다음 VSC(Visual Studio Code)에서 위에서 만든 폴더를 열고

 

npm start

 

터미널 창에 npm start를 입력해주면 starting development sever... 라는 문구가 뜨고

원자 모형의 멋있는 화면이 나타납니다. (chrome을 디폴트 브라우저로 사전에 설정했음)  

 

 

---

이 글을 쓰기 위해 구글 검색을 하던 중 알게 된 사실인데 마이크로소프트 공식 사이트에서도 windows에서 node.js 를 시작하기 위해서는 wsl2를 사용하여 개발 환경을 설정하는 것이 좋다고 나와 있습니다.

 

더 궁금한 내용이 있으면 아래 글 참고!

 

docs.microsoft.com/ko-kr/windows/nodejs/beginners

초보자를 위한 Windows에서 NodeJS 사용 시작