CRA (Create-React-App)

CRA (create-react-app)

React 프로젝트를 개발하고 실행하기 위해서는 Babel, Webpack 등 많은 설정이 필요합니다.

이는 React 프로젝트를 시작하는데 큰 어려움으로 작용합니다.

따라서, 페이스북은 많은 사람들이 쉽고 빠르게 React를 시작할 수 있도록 create-react-app을 제공하기 시작했습니다.

---

CRA 기능

• 자동 최적화

  React와 여러 패키지들의 지속적인 업데이트에 대비해 페이스북에서 React의 지속적인 업데이트를 담당합니다.

  즉, 개발자의 노력 없이 CRA를 실행시키는 것만으로도 자동 최적화되어 React 프로젝트를 개발할 수 있습니다.

• Only One Dependency

  앱에는 하나의 빌드 dependency가 필요합니다.

  CRA는 모든 기본 요소가 복잡한 버전 불일치 없이 원활하게 작동하는지 확인하는 역할을 수행합니다.

• No Lock-In

  CRA는 Webpack, Babel, ESLint 등 다양한 패키지를 포함하고 있습니다.

  고급 구성이 필요한 경우 CRA에서 언제든지 꺼내어 구성 파일을 직접 편집할 수 있습니다.

---

React 프로젝트 생성

• Node.js v14.0.0 이상, npm v6.14.0 이상 필요

1. CRA 설치

   npm i create-react-app
   
   create-react-app --version
   <!-- 5.0.1 -->
   

2. 프로젝트 생성

   npx create-react-app <프로젝트명>
   

   • public

     create-react-app으로 개발할 React 프로젝트의 Static 파일들(index.html 등)이 저장된 폴더

   • public/index.html

     개발한 React 프로젝트가 표시될 파일

   • src

     실제 React를 사용하여 개발을 할 때 사용하는 폴더

   • src/index.js

     우리가 개발한 React 프로젝트를 index.html 파일에 표시하기 위한 파일

   • src/App.js

     기본적으로 제공되는 React 컴포넌트 예제

   • src/App.css

     App 컴포넌트에서 사용하는 CSS 파일

   • src/App.test.js

     App 컴포넌트를 테스트하기 위한 파일

   • src/reportWebVitals.js

     React의 성능을 측정하기 위한 파일

   • src/setupTests.js

     React에서 테스트를 실행하기 위한 설정 파일

   • package.json

     개발에 필요한 라이브러리를 관리하는 파일

3. 프로젝트 실행

   package.json파일을 열면 다음 내용을 확인할 수 있습니다.

   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   

   • start

     React 프로젝트를 개발할 때 사용

   • build

     개발한 React 프로젝트를 배포하기 위해 사용

   • test

     React 프로젝트를 테스트할 때 사용

   • eject

     create-react-app에서 관리하는 React 프로젝트를 일반 프로젝트로 전환합

   명령어를 입력해 실행합니다.

   npm start
   

   정상적으로 실행된다면, 브라우저에 http://localhost:3000으로 페이지가 열립니다.