[리액트] CRA란? 리액트 프로젝트 생성하기

CRA(Create React App) 이란

공식 사이트를 빌려 표현하자면 Set up a modern web app by running one command. 이라고 한다.

명령어 한줄로 프로젝트를 구성할 수 있다.

프로젝트 구성은 환경설정과의 싸움이다. Webpack, vite 등 모듈 번들...바벨...각종 설정파일... 처음 CRA를 보고 가장 먼저 생각난건 Spring Initializr 였다. 환경설정 싫어하는건 다들 비슷하다... CRA를 사용하면 리액트를 실행하기위해 필요한 모듈들을 설치해서 환경을 구성해주고 설치된 모듈들은 생성된 프로젝트 내의 node_modules 폴더 안에 저장된다.

yarn 명령어, CRA로 리액트 프로젝트 생성하기

1. 프로젝트 생성할 디렉토리로 이동한다. cd 디렉토리명

2. 해당 디렉토리에서 yarn create react-app 프로젝트명 을 실행한다.
   (만약 npm을 사용중이라면 npm init react-app 프로젝트명 을 실행한다)

3. 프로젝트명으로 디렉토리가 생성되고 프로젝트가 설정되었다.
   해당 경로로 이동해서 생성된 프로젝트를 확인하자

   

4. 터미널에서 해당 디렉토리로 이동해서 프로젝트를 실행하자
   yarn을 사용할 경우 yarn start 명령어,
   npm 일 경우 npm start 명령어를 사용한다.

   cd 프로젝트명
   yarn start

   
   

5. 리액트 웹사이트가 실행된다.