[React] 환경 구축

node.js 설치

---

Webpack, Babel 등과 같은 사용 도구들이 자바스크립트 런타임인 node.js 를 기반으로 만들어졌다.

도구들을 사용하기 위해서 Node.js 를 설치해야 한다.

 

https://nodejs.org/en/

Node.js

 

 

위의 사이트로 이동하면 아래와 같이 다운로드 받을 수 있는 아래와 같은 화면이 보인다.

LTS는 안정화된 버전이고 Current는 현재 최신의 버전이다.

개인의 취향에 따라 선택하여 파일을 다운로드한 후 설치하면 된다.

 

 

 

설치를 제대로 했는지 확인하기 위해서는 Window 기준으로 cmd 창을 실행하여, nmp -v 을 입력했을 때 버전이 뜬다면 정상적으로 설치된 것이다.

 

 

 

Create-react-app 설치

---

아래의 방법은 공식 메뉴얼의 방식으로 진행한 것은 아닙니다.

 

 

1. npm install -g create-react-app

npm install -g create-react-app 명령어를 실행하여 설치합니다.

 

 

혹시 권한이 없어서 에러가 난다면, sudo npm install create-react-app 명령어를 실행한다.

 

 

2. create-react-app -V

create-react-app -V 명령어를 실행하여 버전 정보가 나온다면 정상적으로 설치가 된 것입니다.

 

 

공식 문서에는 npx를 사용하여 설치하라고 가이드가 나와있습니다.

npx는 create-react-app 을 임시로 설치해서 한 번만 실행시키고 지우는 용도로, 실행할 때마다 다운로드를 새로 받기 때문에 컴퓨터 공간을 낭비하지 않고 항상 최신 상태를 유지할 수 있다는 장점이 있기 때문에 권장하는 것 같습니다.

 

 

3. 디렉터리 설정

우선 원하는 위치에 폴더명을 react-app으로 만듭니다. 저는 D드라이브에 폴더를 생성하였습니다.

마찬가지로 cmd를 실행하여 해당 폴더로 이동한 후, create-react-app . 명령어를 실행하면 현재 디렉터리가 create-react-app에 의해서 개발환경이 됩니다.

 

 

세팅이 되고 나면 port는 기본적으로 3000으로 webpack dev server를 열어주는데, 만약에 이 포트를 변경하고 싶다면 node 환경 변수를 변경하면 된다.