4. Webpack, Babel에 대해서 알아보기

1. Webpack

1.1 Webpack이란?

정의:

Webpack은 JavaScript, CSS, 이미지, HTML 등 애플리케이션에서 사용되는 여러 종류의 파일들을 하나 또는 여러 개의 번들(bundle) 파일로 묶어주는 모듈 번들러(Module Bundler) 입니다.
주요 기능:
- 모듈 번들링:
  
  여러 파일과 모듈을 하나의 번들로 만들어 네트워크 요청 횟수를 줄여 성능을 향상시킵니다.
- 코드 분할(Code Splitting):
  
  애플리케이션을 여러 부분으로 나누어 필요한 시점에만 로드할 수 있게 합니다.
- 로더(Loaders) 및 플러그인(Plugins):
  
  다양한 유형의 파일을 처리하거나 추가적인 기능(예: 파일 최적화, 환경 변수 주입 등)을 적용할 수 있습니다.

1.2 Webpack 적용 전후 비교

적용 전 (전통적 방식):
- 여러 <script> 태그와 <link> 태그를 HTML 파일에 삽입해야 하며, 파일들이 개별적으로 요청됩니다.
- 코드 및 리소스가 분산되어 관리되므로, 의존성 관리가 어려워집니다.

적용 후 (Webpack 사용):

모든 모듈과 리소스가 하나 또는 필요한 여러 개의 번들 파일로 묶여, 네트워크 요청을 줄입니다.
의존성 관계가 명확하게 정리되어 유지보수와 업데이트가 용이해집니다.

예시 (Webpack 사용 후 생성된 index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Gemini App</title>
</head>
<body>
  <div id="root"></div>
  <!-- 모든 JS, CSS 등이 번들 파일로 묶여 한 번에 로드됩니다 -->
  <script src="/bundle.js"></script>
</body>
</html>

코드 설명

1.3 Webpack 설정 예제 상세 설명

webpack.config.js 예제:

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

// 환경 변수 로드 (.env 파일 및 시스템 환경 변수)
dotenv.config();

// process.env에 포함된 모든 값을 문자열로 변환하여 DefinePlugin에 전달
const envKeys = Object.keys(process.env)
  .filter(key => key.startsWith("REACT_APP_"))
  .reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(process.env[next]);
    return prev;
  }, {});

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    fallback: {
      process: require.resolve("process/browser"),
    },
  },
  module: {
    rules: [
      {
        test: /\\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: "babel-loader", // Babel Loader를 통해 최신 자바스크립트 및 JSX를 변환
      },
      {
        test: /\\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { modules: true }, // CSS Modules 활성화
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new webpack.ProvidePlugin({
      process: "process/browser", // process 변수를 브라우저 환경에 주입
    }),
    new webpack.DefinePlugin(envKeys), // 환경 변수 주입
  ],
};

설명:
- Entry와 Output:
  - entry는 애플리케이션의 진입점이며, output은 번들 파일이 생성될 위치와 파일 이름을 정의합니다.
- Resolve:
  - 확장자 자동 해결 및 process polyfill을 추가해 브라우저 환경에서도 Node.js의 process를 사용할 수 있도록 합니다.
- Module Rules:
  - .ts 및 .tsx 파일은 Babel Loader를 통해 처리되어, 최신 JavaScript와 JSX 구문이 호환되는 코드로 변환됩니다.
  - CSS 파일은 CSS Modules 방식으로 관리되어, 클래스 충돌을 방지합니다.
- Plugins:
  - HtmlWebpackPlugin은 지정된 HTML 템플릿을 기반으로 번들 파일을 자동으로 삽입한 최종 HTML 파일을 생성합니다.
  - DefinePlugin은 환경 변수를 문자열로 변환하여, 코드 내에서 process.env.VARIABLE_NAME으로 접근 가능하게 합니다.

1. Webpack

1.1 Webpack이란?

1.2 Webpack 적용 전후 비교

1.3 Webpack 설정 예제 상세 설명

2. Babel

2.1 Babel이란?