[React] vscode react 프로젝트 생성 (wsl 사용, linux명령어)

직전에 WSL을 사용할 수 있게 환경설정을 했으니 바로 react project를 생성해 보겠다. 

 

1) npm install -g create-react-app

 

2) create-react-app [name]

 

name 은 폴더 이름이며, react application을 생성한다.

 

3) 새로 만들어진 폴더로 이동하여 npm start를 입력시 웹서버가 시작된다. 

 

cd [name]

npm start 

 

 

vscode에서 확인하기

1) 먼저 앱 작업영역을 확인한다.

ubuntu를 실행한 다음 ls 를 누르면 작업 폴더가 바로나온다.

나는 절대 경로를 알고 싶어서 cd ../ 로 끝까지 나간 다음 ls로 확인했다. 

작업영역은 home/jieun/mi-primera-app 인것이다. 

 

2) f1 > remote-wsl 검색 후 새 창 open > WSL vscode에서  앞서 찾은 절대경로 home/jieun/mi-primera-app입력 

 

3) <p> 태그 안의 내용을 바꿔보자 나는 하트로 바꿨다.

ctrl+s 를 통해 저장까지!

 

4) ubuntu에서 작업 영역 확인하며 작업영역에 들어가 있는 상태에서

npm start 하면 프로젝트가 실행된다.

 

잘 작동되는 것을 확일할 수 있다. 

 

 

참고로 vscode에서 터미널을 열어서 바로 명령어를 치는 방법도 있다. 꼭 ubuntu LTS를 사용하지 않아도 된다.