[React] CRA 없이 리액트 환경 설정하기: 바벨, 웹팩, 패키지 설치부터 빌드까지

쫀구·2022년 7월 26일

create-react-app을 사용하면 빠르게 개발에 집중할 수 있지만, 내부 설정을 잘 알지 못하는 단점이 있다. 이번에는 create-react-app 없이 직접 리액트 환경을 설정해보자. 다음과 같은 순서로 진행한다:
바벨 설정 → 웹팩 설정 → 패키지 설정 → JS, HTML 파일 셋팅 → 개발 서버 렌더링 → 빌드 및 배포

환경변수도 설정해주면 좋으니 .env 파일을 생성하고 아래 코드를 입력한다:

ANGEROUSLY_DISABLE_HOST_CHECK=true

필요한 모듈 설치

먼저 package.json 파일을 생성해주자:

$ npm init -y

필요한 모듈을 설치한다:

$ npm i react react-dom
$ npm i webpack webpack-cli webpack-dev-server
$ npm i babel-loader css-loader style-loader
$ npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
$ npm i --save-dev html-webpack-plugin
$ npm i --save-dev clean-webpack-plugin
$ npm install http-proxy-middleware --save

하나씩 설치하는 방법도 있지만, 필수 명령어를 먼저 실행하여 필요한 모듈을 설치한 후 시작하는 것이 헷갈리지 않는다.

바벨 설정

babel.config.js 파일을 생성한 후, 아래 코드를 작성한다:

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
};

웹팩 설정

webpack.config.js 파일을 생성한 후, 다음과 같이 작성한다:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'docs'),
    filename: '[name].bundle.js',
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'docs'),
    },
    compress: true,
    port: 8080,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

패키지 설정

package.json 파일의 scripts 부분에 아래 코드를 추가한다:

"scripts": { 
  "dev": "webpack-dev-server",
  "build": "webpack --progress --mode production",
  "test": "echo \"Error: no test specified\" && exit 1"
}

dev는 create-react-app에서 npm run start 명령어와 같은 역할을 하며, 설정한 포트(8080)에서 실시간 렌더링을 확인할 수 있다.
build는 코드 번들링을 최적화하여 배포용 파일을 생성한다.

JS 및 HTML 파일 설정

HTML 파일 설정
index.html 파일에 id="root"을 가진 <div> 요소를 추가해준다:

<html>
  <body>
    <div id="root"></div>
  </body>
</html>

JS 파일 설정
설치한 모듈을 불러와 리액트 환경을 설정해준다:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <div>Hello React!!!!</div>;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);