CRA란 무엇일까?

React Application을 생성하기 위해 facebook에서 만든 command line tool. transpiling, code bundling등의 환경설정이 이미 되어있다.
단점으로는 build 환경설정을 커스텀하기 어렵다.
eject을 이용할 수 있지만 cra를 사용하는 의미를 찾기 어렵다

1. 파일생성, npm init

index.html, index.js를 생성하고 npm을 initialize 해줍니다.

2. Install Dependency

npm install react react-dom

React와 관련된 주요 라이브러리

import React from "react";

const App = () => {
  return <div>HI</div>;
};

export default App;

jsx문법을 사용가능한 이유가 react 라이브러리를 사용했기 때문이다
CRA에서는 내부적으로 자동으로 import하기 때문에 직접 import해주지 않아도 괜찮다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

ReactDOM을 통해서 index.html의 root 태그내부에 렌더링한다.

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

webpack 관련 라이브러리

webpack-cli

webpack command Line Interface
웹팩설정에 편리한 command들을 제공한다
ex) webpack server, build 등

webpack-dev-server

save 시에 auto reload되는 dev server를 제공함
CRA에서 save할 경우 auto reload되면서 적용되었던 이유는
내부적으로 webpack-dev-server를 사용하고 있었기 때문이다

html-webpack-plugin

번들된 js파일을 html파일에 로드하기 위해서 필요하다

<script src="index.js" type="module"> </script>

index.html에 입력하지 않아도 번들된 js파일이 자동으로 들어간다
webpack bundle파일 전체가 하나의 즉시실행함수로 이루어져있다

--save-dev

--save-dev option을 통해서 production mode에서는 사용되지 않고 개발과정에서만 사용한다고 알려준다. devDependencies로 install된다
그 반대는 --save-prod이다. 이렇게 할 경우에는 dependency에 기록된다
npm install은 기본적으로 dependency에 있든 devDependency에 있든 똑같이 다운로드하는데 npm install --production으로 옵션을 주면 devDependency에 있는 것들은 제외하고 배포시에 필요한 것들만 install한다

npm install @babel/core babel-loader @babel/preset-react @babel/preset-env

babel 라이브러리

@babel/core

babel의 핵심 기능을 하는 라이브러리

babel-loader

loader는 어떤 파일을 처리해서 어떤 형식으로 반환할지 알려주는 역할을 한다
sass-loader는 sass 파일을 css파일로 변환해주고
css-loader는 webpack5환경에서 동작하며 js파일에서 css파일을 하나의 모듈로써 불러와서 사용한다.
style-loader는 css파일을 dom의 style태그로 삽입한다.
babel-loader는 js파일을 다른 버전의 polyfill로 컴파일해준다

@babel/preset-react

preset: 사전설정
jsx는 javascript xml의 약자로 js안에 html 코드를 적을 수 있도록 한 형식이다.
babel에서 jsx파일도 지원할 수 있도록 하는 라이브러리이다

@babel/preset-env

최신 자바스크립트 언어와 호환이 되도록 지원하고 자바스크립트 번들의 크기를 줄이도록 도와주는 라이브러리

Webpack 환경설정

webpack.config.js

root폴더에 webpack.config.js파일을 추가해준다

entry file 정하기

entry파일이 dependency graph의 기준이 된다
하나의 파일이 다른 파일에 의존할때 dependency 라고 한다
entry 파일부터 시작해 재귀적으로 dependency graph를 빌드한다
필요한 이유는 다른 모듈에 필요한 모듈을 먼저 빌드해야하기 때문

output

  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  }

어떤 폴더에 어떤 파일 이름으로 번들된 js파일을 저장할것인지 지정

plugin

  plugins: [
    new HTMLWebpackPlugin({
      template: "./src/index.html",
    }),
  ]

plugin이 적용된 파일을 template에 적용함

module

  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },

서로 다른 타입의 모듈들을 어떻게 처리할것인지 설정
test: /.js$/ js로 끝나는 파일들은
exclude: /node_modules/ node_modules는 제외하고
babel-loader를 사용해서 transpile한다

전체 webpack.config.js

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
};

npm script 생성

  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },

start: webpack-dev-server를 development mode로 실행하고, 새 창을 열어서 실행하고 변경사항을 즉시 반영
build: production모드로 webpack실행 => 빌드파일 생성

npm start로 실행해보면 잘 실행된다.
하지만 아직 css는 적용되지 않는다

CSS 적용

npm install css-loader style-loader

webpack rule 추가

      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },

.css로 끝나는 파일을 style-loader, css-loader를 통해서 transpile한다는 뜻
image등의 asset이 필요하면 file-loader를 추가로 install하고 적용하면 된다.
css-loader는 import 되는 css파일 내부의 selector들을 난수화하고 json파일로 변환해서 style-loader에게 전달하면 style-loader는 DOM에 style태그를 이용해서 삽입

eslint, prettier 적용

npm install eslint

npm install eslint-config-prettier eslint-plugin-prettier eslint-plugin-react

prettier관련된 패키지와 react와 관련된 패키지를 설치한다

.eslintrc 생성

rc는 run command의 약자이다

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "eslint-config-prettier"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": "warn",
    "@typescript-eslint/no-var-requires": 0
  }
}

.prettierrc생성

{
  "printWidth": 100,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

끝

이렇게 해서 CRA없이 React Application을 만들고
webpack, babel, eslint, prettier 설정까지 해 보았다.
필요하다면 Typescript까지 적용하고 babel의 설정은 babel.config.js파일을 만들어서 따로 관리해도 될 것 같다.
성능을 위해서 CleanWebpackPlugin을 추가해주면 좋다.

file-loader를 대신해서 copyWebpackPlugin을 사용해도 된다
file-loader와 copyWebpackPlugin의 차이점은
둘다 파일을 webpack에서 asset으로 사용할 수 있게 하지만
file-loader는 file의 url을 import해서 사용할 수 있게 해주고
copyWebpackPlugin은 단순히 파일을 이동만 시켜준다