[React] Create React App (CRA) 으로 개발환경 구성하기

 

이전 글에서 React에서 주로 사용하는

webpack과 babel의 차이를 알아보았다.

[React] babel과 webpack의 차이

[React] babel과 webpack의 차이

 

 

Create React App 이란?

React 개발 환경을 설정하기 위해서는

대부분 위 2가지 도구에 대한 설정이 필요하고,

이 외에도 다양한 개발 환경 설정이 필요하다.

 

이러한 설정을 간단하게 대신 해주는 것이

CREATE-REACT-APP이다. 간단하게 CRA라고도 한다.

CRA는  webpack, babel 등 React에서 주로 많이 사용하는 도구 및 설정을 포함하고 있다.

따라서, Create React App을 사용하면

복잡할 설정없이 한번에 React 개발 환경을 구성하고 이용할 수 있다.

 

 

 

Create React App 으로 프로젝트 생성하기

  npm 5.2 이상인 경우  

npx create-react-app my-pjt

이렇게만 입력하면 된다.

이렇게만 입력하면 my-pjt라는 이름의 프로젝트가 하나 생성된다.

(my-pjt라는 이름은 자유롭게 변경해도 된다.)

단, npx는 npm 5.2버전 이후부터 동작하기 때문에, npm은 5.2이상이 설치되어 있어야 한다.

그러면 다음과 같이 my-pjt 프로젝트가 생성된다.

 

 

  npm이 5.1 이하인 경우  

npm install -g create-react-app
create-react-app my-pjt

npm 5.1 이하인 경우에는

create-react-app을 global에 설치한 후 사용할 수 있다.

 

 

  npm 6 이상인 경우  

기본적으로 처음에 소개한 npx를 사용할 수도 있지만,

다음과 같은 방법도 있다.

npm init react-app my-pjt

 

 

  yarn으로 설치하는 경우  

yarn create react-app my-pjt

 

 

 

Create React App 개발 서버 실행하기

cd my-pjt
npm start
(또는 yarn start)

 

먼저, CRA로 생성한 my-pjt 폴더로 이동한 후,

npm start, yarn start 한다.

 

이런 화면이 뜬다면, 성공!!

 

 

다음번 글에는

CRA가 만들어준 프로젝트의 구조를 살펴보도록 하겠다.