[React] 개발 환경 설정

0. Webpack과 Babel은 무엇일까?

---

React 프로젝트에서는 Webpack과 Babel을 사용한다. React 프로젝트에서는 수많은 컴포넌트가 존재하게 된다. 나중에 프로젝트를 시작하고 관리자 모드를 켜면 알 수 있을 텐데 root라는 id를 가진 div내에 모든 컴포넌트가 들어가게 된다. 이렇게 수많은 컴포넌트를 하나로 결합하는 데 사용되는 것이 Webpack이다. 그리고 React 프로젝트에서는 ECMA Scripts라는 표준화된 자바스크립트 문법이 사용됩니다. 이 스크립트를 사용할 수 있게 해주는 것이 Babel입니다.

1. React 개발 환경 구성

---

React 개발 환경 구성을 위해서는 Node.js와 Yarn을 설치해야 한다.

1-1.Node.js

Node.js는 V8(자바스크립트 엔진)으로 빌드 된 이벤트 기반의 자바스크립트 런타임이다. React Project를 구동시키기 위해서 필수적으로 설치해야 한다.

🖱 Node.js 공식 사이트

보다 안정적이고 신뢰도가 높은 LTS 버전으로 다운로드 한다. Node.js 설치가 끝났다면 cmd 창을 열어 아래와 같은 커맨드를 입력하여 확인하자. 버전이 정상적으로 잘 뜬다면 설치가 아무 이상 없이 끝났다는 뜻이다.

node -v
npm -v

1-2.Yarn

Yarn은 패키지 매니저 모듈이다. 원래 Node.js를 설치하면 npm 이라는 패키지 매니저 모듈이 같이 설치되는데 Yarn은 npm보다 더 빠르고, 안정적이기 때문에 되도록 Yarn을 설치하자.

🖱 Yarn 공식 홈페이지

1-3. create-react-app

create-react-app은 간단한 React 개발 환경 구성을 위해 페이스북에서 개발한 라이브러리이다. 다음과 같은 명령어를 입력하여 설치할 수 있다.

# npm을 사용한 설치
npm install -g create-react-app
# yarn을 사용한 설치
yarn global add create-react-app

create-react-app을 설치했다면 프로젝트를 생성할 디렉토리로 이동하고 아래의 커맨드를 입력한다.

create-react-app react-project

React 프로젝트 구성이 끝났다면 다음과 같이 입력하고 프로젝트가 잘 실행되는지 확인한다.

cd react-project
yarn start

만약 설치가 정상적으로 이뤄졌다면 쉘에서는 아래와 같은 문구가 뜰 것이고 브라우저에서는 아래 사진과 새 창이 하나 열릴 것이다.

Compiled successfully!

You can now view my-project in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.0.9.61:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.