개발 환경을 설정하기 전, 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.
