Create-React-App는 무엇을 설치해주나?

React.js 프로젝트를 쉽게 생성하기 위한 툴이다. React.js를 처음 사용하는 개발자들은 개발 환경 설정이 어려울 수 있지만, Create-React-App을 사용하면 초기 설정을 간편하게 해결할 수 있다.

Create React App

Create-React-App 설치시 자동으로 설치되는 패키지들

Create-React-App을 사용하여 React.js 프로젝트를 생성하면 다양한 패키지들이 자동으로 설치된다. 이러한 패키지들은 React.js 프로젝트를 개발하는 데에 필요한 다양한 도구들을 제공한다. 자동으로 설치되는 패키지는 아래와 같다.

• react
• react-dom
• react-scripts

react 와 react-dom 은 React.js 라이브러리이며, react-scripts는 Create-React-App에서 사용하는 스크립트를 포함한 패키지이다.

my-app/
├── README.md
├── node_modules/
├── package.json
├── .gitignore
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
└── src/
    ├── index.js
    ├── App.js
    ├── App.css
    ├── logo.svg
    └── serviceWorker.js

Create-React-App의 구조

Create-React-App 을 사용하여 생성된 프로젝트는 다음과 같은 구조로 이루어져 있다.

 

public/ 디렉토리는 웹 페이지의 루트 디렉토리이다. src/ 디렉토리는 React.js 프로젝트의 코드를 작성하는 디렉토리이다. node_modules/ 디렉토리는 프로젝트에서 사용하는 모듈들이 설치되는 디렉토리이다. package.json 파일은 프로젝트에 필요한 의존성 정보를 포함한 파일이다.

 

마지막으로 package.json의 파일을 열어보면

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

이런식으로 작성되어 있음을 알 수 있다, 여기서 "dependencies"는 프로젝트가 의존하는 외부 라이브러리를 의미한다. 위 예시에서는 react, react-dom, react-scripts 세 가지 라이브러리가 설치되어 있다.

"scripts"는 프로젝트에서 사용할 수 있는 스크립트 명령어를 정의하는 부분이다. 위 예시에서는 start, build, test, eject 등의 명령어가 정의되어 있다.

그 외에도 eslintConfig는 ESLint 설정을, browserslist는 브라우저 지원 범위를 지정하는 부분이다.