🔨 create-react-app 겉핥기

Lee Jooam·2022년 5월 11일

Less to Learn
You don't need to learn and configure many build tools. Instant reloads help you focus on development. When it's time to deploy, your bundles are optimized automatically.

출처: create react app

🧛‍♀️ CRA가 없다면?

리액트를 비롯해 대부분의 다른 프레임워크, 라이브러리는 순수한 js만으로 이루어져있지 않다.

하지만 브라우저는 순수한 js, html, css만을 읽을 수 있다.

이럴 때 우리는 작업했던 파일들을 브라우저가 읽을 수 있는 형태로 변환해야 한다.

번들러를 사용한다면 babel-loader와 필요한 플러그인들을 통해 이런 과정을 수행할 수 있고, 혹은 babel을 직접 실행시켜 변환할 수도 있다.

하지만 직접 번들러의 config 파일을 조정하거나 필요한 패키지들을 매번 설치하기란 여간 번거로운 일이 아니다.

이를 간편하게 해주는 도구가 CRA이다. 간단하게 말하면 react 환경을 위한 보일러 플레이트라고 볼 수도 있겠다.

🏸 사용법

npx create-react-app my-app

yarn create react-app my-app

본인의 환경에 맞게 CRA 명령어를 호출하면 된다.

yarn create react-app my-app --template typescript

다음과 같이 특정 설정을 추가할 수도 있다. 이렇게 생성된 프로젝트는 웹팩 기반으로 설정된다.

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

실행하면 다음과 같은 폴더 구조가 생성되는데, public 폴더 내의 index.html은 웹팩의 template, index.js는 엔트리포인트 역할을 한다.

    plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
          },

프로젝트의 node_modules/react-scripts/config를 확인해보면 웹팩을 비롯한 다양한 config 설정을 볼 수 있다.

🎁 특이사항

{
  "name": "first_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "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"
    ]
  }
}