[ REACT ] CRA로 프로젝트 생성하기 ( Create React App )

CRA : Create React App 

CRA로 리액트 프로젝트를 생성하면,

웹팩,바벨의 설치 및 설정과정을 생략하고 바로 프로젝트 작업 환경을 구축 할 수 있다.

 

 

1. CRA로 프로젝트 생성하기

// yarn 
$ yarn create react-app 프로젝트이름

// npx
$ npx create-react-app 프로젝트이름 

ex ) 
$ yarn create react-app NewProject
$ npx create-react-app NewProject

--use-npm 옵션 사용하기
yarn이 설치된 컴퓨터에서 npx create-react-app OOO 를 실행하면

자동으로 npm을 패키지 매니저로 사용하는것이 아닌 yarn을 패키지 매니저로 사용하는 형태로 설치가 된다고 한다.

이럴때는 아래와 같이 실행한다.

// yarn
$ yarn create react-app 프로젝트이름 --use-npm

// npm
$ npx create-react-app 프로젝트이름 --use-npm

 

--template옵션 사용하기 & Custom Templates

react-scripts 버전 3.3.0이상에서 사용 가능하다고 하는 Custom Templates

npm에서 다른사람이 등록한 template을 찾아서 설치 할수도 있다고 한다. 링크

// npm
$ npx create-react-app 프로젝트이름 --template 커스텀템플릿이름

// yarn
$ yarn create react-app 프로젝트이름 --template 커스텀템플릿이름

--template을 지정하지 않으면 기본으로 설치되는 내용은 이 링크에서 확인가능

아래 링크에서 커스텀 템플릿을 등록하는 방법도 확인 할 수 있다

https://create-react-app.dev/docs/custom-templates/

Custom Templates | Create React App

 

TypeScript 함께 설치하기

 

// yarn
$ yarn create react-app 프로젝트이름 --typescript

//npm
$ npx create-react-app 프로젝트이름 --typescript

/* template 사용한 설치 */
// yarn
$ yarn create react-app 프로젝트이름 --template typescript

//npm
$ npx create-react-app 프로젝트이름 --template typescript

* 참고 이전에 설치한 프로젝트에 TypeScript 설치하기

// yarn
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

// npm
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

 

2. 프로젝트 생성후 실행시켜보기

프로젝트 폴더로 이동 후 실행한다.

// 프로젝트를 생성한 폴더의 위치라고 가정함
$ cd 프로젝트이름
$ npm start

그런 다음 http://localhost:3000/ 을 열어 확인하면 된다!

 

 

---

 

✔️ 참고

https://www.daleseo.com/create-react-app/

https://create-react-app.dev/docs/