React 개발을 위해 환경 설정을 해봅시다.


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 Installation on Windows

Node.js Installation on Mac OS