[React] 개발환경 setting

npm 설치

node.js 로 만들어진 프로그램을 쉽게 설치할 수 있는 앱스토어 같은 것

npm을 설치할 때는 node.js라는 프로그램을 컴퓨터에 깔면 된다.

 

https://nodejs.org/ko/

Node.js

안정적인 버전, 최신 버전 두 가지 버전이 있는데 난 안정적인 버전을 깔았다.

 

 

 

그리고 cmd를 켜서 npm이 잘 설치되었는지 확인한다.

npm-v 을 쳐서 숫자가 나오면 잘 설치된 것이다.

 

이제 npm으로 create react app을 설치할 것인데 컴퓨터 어디에서든 사용할 수 있도록 -g (global)옵션을 줄 것이다.

npm install -g create-react-app

마찬가지로 설치가 잘 되었는지 확인한다. v는 대문자이다.

create-react-app -V

확인해보니 내가 설치한 버전은 4.0.3 이다.

 

 

npm 과 npx 차이는?

- npm은 프로그램을 설치하는 프로그램이라면 

- npx는 create-react-app을 임시로 설치해서 딱 한 번만 실행시키고 지우는 애이다. ( 장점: 컴퓨터 용량을 낭비하지 않고, 실행할 때마다 새로 다운 받기 때문에 최신 상태이다.)

 

 

 

이제 개발환경을 어느 디렉터리에 셋팅할 것인가? 를 정한다. 바탕화면에 react-app 라는 폴더를 만들어줬다.

그리고 create-react-app에게는 여기를 react 개발환경으로 만들거야! 라는 것을 알려줘야한다.

cd 폴더경로

폴더이름은 자유지만 react는 특수문자로 create-react-app이 거절한다.

create-react-app . 을 치면 create-react-app에 의해서 디렉터리가 개발환경이 된다.

 

 

VScode에서  react-app 폴더를 열고 view > appearance > show panel

 

이렇게 terminal을 볼 수 있다.

 

create-react-app으로 개발환경을 만들고나면 이런 방법으로 실행할 수 있다.

npm run start

입력하고 실행하면 이런 문구가 나오면서 웹 페이지가 열린다.

 

두 주소는 개발하면서 접속해서 개발되는 모습을 확인할 수 있는 주소이다. 

개발 중인 앱을 확인하는!

열린 웹페이지 모습은 이러한데, create-react-app이 가장 최소한의 앱을 구현해서 보여주는 것이다.

react 기술을 이용해서 만든 앱이다. 웹 앱!

 

ctrl+c 를 누르면 종료할 수 있다.