[React] Create React App(CRA) 사용하기

 

Create React App(CRA)

초기 환경을 일일이 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 셋업을 완료해 놓은 틀이라고 보면 된다.

 

React 앱을 만들 때는 React 라이브러리뿐 아니라 Webpack, Babel 등의 라이브러리들이 필요하다.

Webpack은 리액트 프로젝트에서 사용되는 여러 개의 자바스크립트 파일을 하나로 합쳐주는 모듈 번들러이며,

Babel은 프로젝트에서 JSX 문법을 사용할 수 있게 해 준다. 

이외에도 다양한 라이브러리를 사용하는데,

이런 부수적인 모듈을 개발자가 일일이 다운로드하기는 번거로운 일이다.

 

(아래 화면과 같은 세팅은 매우 번거롭다.)

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
</script>

 

이렇게 패키지 등 번거로운 react 초기 세팅 작업을 미리 하고,

그 환경을 다시 패키징 한 것이 바로 create-react-app이며,

축약해서 CRA이라고도 부른다.

 

 

React 실습환경 구축

📍 Creact React App Site

Create React App

 

Creact React App 프로젝트를 시작하기 위해서는 

npx create-react-app my-app 명령어를 사용해야 하는데,

npx라는 명령어를 실행하기 위해서는 Node.js를 설치해줘야 한다.

Node.js 설치하기

 

1. VScode 터미널에서 다음과 같이 입력해 준다.

$ npx create-react-app <폴더 이름>

 

만약 해당 폴더에 실행하고 싶다면

$ npx create-react-app . 

이렇게 (콤마)를 작성해 주면 된다.

 

2. 프로젝트가 생성되면 $ npm start 명령어를 실행해 준다.

$ npm start

완료되면 자동으로 샘플 React 애플리케이션이 열린다.

 

 

create-react-app을 실행한 뒤 설치된 프로젝트 폴더의 구성은 다음과 같다.

프로젝트
├── node_modules
│ └── ...
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
├── public
│ ├── 🗑️ favicon.ico
│ ├── index.html
│ ├── 🗑 logo192.png
│ ├── 🗑 logo512.png
│ ├── 🗑 manifest.json
│ └── 🗑 robots.txt
└── src
  ├── 🗑 App.css
  ├── App.js
  ├── 🗑 App.test.js
  ├── 🗑 index.css
  ├── index.js
  ├── 🗑 logo.svg
  ├── 🗑 reportWebVitals.js
  └── 🗑 setupTests.js

 

 

파일명 앞에 🗑 아이콘이 붙은 파일들은 학습 단계에서 삭제해도 실행에 영향을 미치지 않는 파일들이다.

src 폴더의 파일들은 App.js와 index.js가 참조하고 있으니, 삭제 후 코드를 수정해주어야 한다.

 

src폴더 - 모든 파일들을 넣을 폴더

index.js의 코드들은 index.html에서 보여진다.

 

node_modules 폴더

Node.js의 패키지 구성요소 중 하나로 외부 모듈을 저장하는 폴더이다.

React도 외부 모듈이므로 여기에 저장된다.

node_modules 폴더는 설치된 외부 모듈들의 소스코드를 갖고 있기 때문에 매우 큰 용량을 차지한다.
협업을 위해 github 또는 드라이브에 프로젝트를 공유할 때는

.gitignore 파일에 명시하여 공유하는 파일의 용량을 줄이는 게 좋다.

 

 만약 node_modules 폴더가 없을 경우
$ npm i를 실행하면 node_modules 폴더가 자동으로 다운로드된다.

 

 

728x90