리액트 - 2. 작업환경 세팅하기

작업 환경 세팅하기

 ❗ 설치 과정은 생략 (인터넷 검색하면 나오므로 과감히 생략!)

 

1. CRA 설치하기 전에

리액트 작업 환경을 직접 세팅하려면 많은 지식과 시간이 필요하지만, CRA는 리액트 작업에 

필요한 도구 (Babel, webpack등) 들을 자동으로 설정해주어 바로 리액트 작업 환경을 구축할

수 있다. 

 

설치하기 앞서, 아래의 것들이 설치되어야 한다. 

 

 1) NodeJS

  - CRA 를 설치하려면 우선, NodeJS가 필요하다

  - 공식 사이트에서 LTS 버전으로 설치한다.

 💡 NodeJS에는 브라우저 밖의 환경에서 자바스크립트를 실행시켜주는 런타임 환경이다.

 

 (설치되었는지 확인)

node -v

 

 

 2) NPM, YARN그리고 NPX

 

  NPM

   - npm은 NodeJS의 패키지를 관리해주는 도구이며 NodeJS를 설치할 때, 같이 설치되므로

    별도로 설치할 필요는 없다. 

 

  YARN

   - yarn은 npm 보다 좀 더 개선된 패키지 도구이며 사용하기 위해서 별도로 설치해야 한다. 

   - yarn 명령어를 사용하기 위해 전역으로 설치한다. 

 

 (설치)     

npm install -g yarn

 

 

  NPX

   - npx 5.2 버전부터 npx 가 기본 패키지로 제공한다. 

     (이전에는 npx를 별도로 설치해야했다.) 

 

   - npm이나 yarn은 로컬에 직접 설치하지만 npx는 매번 최신 버전의 파일만을 임시로 불러와

     실행시킨 후, 종료시 그 파일을 없앤다. 

 

   - CRA와 같은 보일러 플레이트 모듈에 효율적이며 매번 새로운 버전을 가져오므로 어떤 

     버전을 사용하고 있는지 신경 쓰지 않아도 된다. 

 

 

Git bash

 - 터미널은 아무거나 사용해도 상관없지만 window 환경에서는 Git bash를 사용하는 것이 좋다. 

 

-  Git bash는 리눅스 명령어를 사용할 수 있는 터미널이다. 

 

- 공식 사이트에서 Git bash 설치한다.

 

 

2. CRA 설치하기 

 

1) 새 프로젝트 생성하기

예전에는 npx를 전역으로 설치해서 사용했지만 npm의 5.2.0 버전부터 npx가 추가되어 별도로 

설치없이 진행할 수 있다. (따라서 CRA 설치 방식이 좀 달라져서 수정)

 

 다음 npx명령어를 통해 create-react-app을 설치한다.

npx create-react-app myapp

 

 "npx create-react-app 프로젝트명" 으로 입력하면 된다. 만약 현재 폴더로 설치하고

 싶다면 "npx create-react-app ." 으로 입력하면 된다.

 

처음 npx명령어를 통해 create-react-app 을 입력하면 아래와 같은 콘솔 메시지가 출력되는데 

y를 입력해서 진행하면된다. (다음부터 설치할 때는 이런 메시지 없이 설치할 수 있음)

 

 

성공적으로 설치 완료했으면 다음과 같은 결과창이 나온다. 

 

 

 

2) 프로젝트 실행하기 

 CRA를 설치한 폴더로 가서 다음과 같은 명령어를 입력하여 실행한다. 

 

 (설치)

npm start

 

(프로젝트 실행화면)

  

 

 npm script 사용

 위와 같은 npm 명령어는 package.json 파일에서 "scripts" 부분에서 

 얼마든지 변경할 수 있으며 실행하려면 "npm run scripts속성" 으로

 입력하면 된다.

  start는 너무 자주 사용되어 run을 생략해서 사용할 수 있다. 

 

 

 

 

 끝.