개발 환경을 설정하기 전, Webpack과 Babel은 무엇일까?

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

React 개발 환경 구성

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

1) Node.js

먼저 Node.js는 V8(자바스크립트 엔진)으로 빌드 된 이벤트 기반의 자바스크립트 런타임입니다. React Project를 구동시키기 위해서 필수적으로 설치해야 합니다. 다만 윈도우와 맥에서의 설치 방법이 다르므로 자신의 컴퓨터 운영체제에 해당하는 페이지로 가 올바른 방법으로 Node.js를 깔고 다음 단계를 진행해주시기 바랍니다.

먼저, 윈도우에서는 Node.js 공식 사이트(https://nodejs.org/ko/)에서 다운로드 받을 수 있습니다. 보다 안정적이고 신뢰도가 높은 LTS 버전으로 다운로드해주세요. 다운로드 후, Node.js 설치가 끝났다면 cmd 창을 열어 아래와 같은 커맨드를 입력해보세요.

node -v
npm -v

버전이 정상적으로 잘 뜬다면 설치가 아무 이상 없이 끝났다는 뜻입니다.

다음은 맥북에서의 설치 방법입니다. 먼저 NVM(Node Version Manager)를 설치해봅시다. 터미널에서 아래와 같이 커맨드를 입력해 nvm을 설치해주세요.

curl https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

그 다음, 쉘을 재시작하거나, 아래의 커맨드를 입력합니다.

source ~/.bash_profile

아래와 같은 커맨드를 입력함으로써 nvm이 제대로 설치되었는지 확인해봅시다.

nvm --version

이제 Node.js를 설치해봅시다. 가장 최신의 안정된 버전을 설치하기 위해 아래와 같은 커맨드를 입력해주세요.

nvm install stable

만약 Node.js 설치가 완료되었다면 아래와 같은 커맨드를 입력해 아무 이상 없이 잘 설치되었는지 확인해주세요.

node -v

2) Yarn

Yarn은 패키지 매니저 모듈입니다. 원래 Node.js를 설치하면 npm 이라는 패키지 매니저 모듈이 같이 설치되는데 Yarn은 npm보다 더 빠르고, 안정적이기 때문에 되도록 Yarn을 설치하기를 바랍니다. Yarn은 공식 홈페이지(https://yarnpkg.com/en/docs/install)에서 자신의 컴퓨터 운영체제에 맞는 버전을 설치해주세요.

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.