[React] 리액트 환경설정

 

 

리액트 프로젝트를 시작하기 위해서는 몇 가지 준비해야 할 것들이 있습니다.

 

1. Node.js

Node.js는 자바스크립트 런타임입니다. 

일반적으로 JavaScript는 크롬과 같은 브라우저에 내장되어 있습니다. 즉, 브라우저에 종속되어있었습니다.

이러한 JavaScript를 브라우저 밖에서 사용할 수 있도록 해주는 것이 Node.js입니다.

 

 

2. Webpack

Webpack은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾아 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러입니다. 코딩할 때 생성된 여러 개의 모듈을 그대로 이용하는 것은 네트워크 비용 측면에서 좋지 않기 때문에 이를 하나의 파일로 묶어주는 역할을 하는 것입니다.

프로젝트 전체를 하나의 단위로 분석합니다. 지정한 메인 파일에서 시작해 자바스크립트의 require과 import문을 참고해 프로젝트의 모든 의존성을 조사하고 로더를 이용해 처리한 후 번들로 묶은 자바스크립트 파일을 생성합니다.

 

 

3. Babel

바벨은 자바스크립트의 ES6문법을 ES5문법으로 변환해주는 트랜스 파일러입니다. 이는 React를 일반 브라우저(ES6를 지원하지 않는 브라우저)에서 실행할 수 있도록 해줍니다.

 

 

4. Yarn

Yarn은 개선된 버전의 npm입니다.

npm은 Node.js를 설치할 때 같이 딸려오는 패키지 매니저 도구입니다. 프로젝트에서 사용되는 라이브러리를 설치하고, 해당 라이브러리들의 버전 관리를 하게 될 때 사용합니다.Yarn은 비교적 더 나은 속도와 더 나은 캐싱 시스템을 제공합니다.

 

 

create-react-app

페이스북에서 제공하는 리액트 앱을 구성해주는 도구입니다.

 

  npm install -g create-react-app  

  yarn global add create-react-app 

 

위와 같이 npm 또는 yarn을 통해 설치합니다.

 

  create-react-app 프로젝트명  

 

그리고 다음 명령어를 통해 프로젝트를 생성할 수 있습니다.

만들어진 앱에는 기본적으로 Webpack, Babel 모듈을 포함합니다.