Webpack과 함께하는 리액트 프로젝트 초심자 가이드: 설정부터 배포까지

2025-04-02 18:48:55

webpackbuildtoolsreactfrontend

웹팩(Webpack)을 통한 리액트(React) 프로젝트 설정부터 배포까지

웹 개발의 세계는 끊임없이 진화하고 있으며, 최적의 성능, 모듈성, 확장성을 찾기 위한 노력은 계속되고 있습니다. 이러한 노력의 한가운데에 있는 도구가 바로 웹팩(Webpack)입니다. 웹팩은 자바스크립트 애플리케이션을 번들링하고 최적화하는 작업을 간소화시켜주는 도구로, 현대적인 웹 개발에서 없어서는 안 될 친구와 같은 존재입니다.

웹팩이란 무엇인가?

웹팩은 모든 분산된 자바스크립트 애플리케이션 파일을 정리된 패키지로 묶어주는 정적 모듈 번들러입니다. 쉽게 말해, 개발자가 작성한 코드를 작은 단위로 나누고, 웹팩이 이를 모아서 브라우저가 빠르게 로드할 수 있도록 최적화된 번들을 생성해주는 것입니다.

웹팩의 내부 동작 원리

웹팩은 주로 다섯 단계의 프로세스를 따릅니다:

Entry: 프로젝트의 진입점 설정(대개 index.js 파일).
Modules: 의존성 그래프 작성.
Loaders: 다양한 파일 유형을 변환.
Plugins: 추가적인 기능 구현(압축 등).
Output: 최종 결과물 생성.

웹팩으로 리액트 프로젝트 설정하기

리액트 프로젝트를 웹팩과 함께 구축하려면 몇 가지 핵심 단계가 필요합니다. 이 특별한 과정은 처음에는 복잡하게 느껴질 수 있지만, 차근차근 따라 하다 보면 이해할 수 있을 것입니다.

1. 프로젝트 구조 생성

가장 먼저 해야 할 일은 프로젝트 디렉터리를 만드는 것입니다.

mkdir react-webpack-app && cd react-webpack-app
npm init -y

2. 필수 종속성 설치

리액트 및 리액트 돔 모듈 설치와 함께 웹팩과 바벨을 포함하는 기본 도구를 설치합니다.

npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev html-webpack-plugin

3. 폴더 구조 정의

프로젝트 폴더를 만들어 필요한 파일들을 배치합니다.

react-webpack-app/
│
├── public/
│   └── index.html
├── src/
│   └── index.jsx
├── webpack.config.js
└── .babelrc

4. 초기 파일 작성

public/index.html과 src/index.jsx를 작성하여 웹팩 설정을 시작합니다.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>React Webpack App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

// src/index.jsx
import React from "react";
import { createRoot } from "react-dom/client";

const App = () => <h1>Hello Webpack + React!</h1>;

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

5. 바벨(Babel) 설정

바벨 설정 파일 .babelrc에서 사용하는 프리셋을 지정합니다.

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

6. 웹팩 설정

webpack.config.js 파일을 통해 웹팩 설정을 진행합니다. 이는 프로젝트의 종합적인 컴파일 절차를 정의합니다.

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.jsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    clean: true,
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 3000,
    open: true,
  },
  mode: "development",
};

애플리케이션 실행하기

package.json 파일의 스크립트를 추가하여 애플리케이션을 실행할 수 있도록 합니다.

"scripts": {
  "start": "webpack serve",
  "build": "webpack"
}

명령어를 실행하여 앱을 미리보기합니다.

npm start

브라우저에 "Hello Webpack + React!"라는 메시지가 나오면 성공입니다. 복잡한 디버깅 없이 결과물을 확인할 수 있습니다.

웹팩의 내부 탐색

로더(Loaders)

웹팩은 JS/JSON 외의 파일을 인식하지 못합니다. 로더는 이 문제를 해결하기 위해 존재하며, 다양한 파일 유형을 자바스크립트로 변환합니다. 예를 들어, babel-loader는 JSX/ES6를 오래된 브라우저에 맞게 ES5로 변환합니다.

플러그인(Plugins)

플러그인은 웹팩의 특별한 기능을 수행합니다. HtmlWebpackPlugin은 번들된 JS 파일을 HTML로 자동으로 삽입하며, 그 외에도 여러 플러그인이 존재합니다.

개발 서버(Dev Server)

webpack-dev-server는 로컬 환경에서의 애플리케이션 실행을 지원하며, 코드 변경 시 자동으로 브라우저를 새로고침해 편리한 개발 환경을 제공합니다.

보너스: CSS 지원 추가하기

CSS 파일을 번들링하기 위해 추가 패키지를 설치하고 설정합니다.

npm install --save-dev style-loader css-loader

webpack.config.js에 다음을 추가합니다.

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

JSX 파일에서 CSS를 직접 임포트하여 사용할 수 있습니다.

import './styles.css';

결론

웹팩은 단순한 번들러 그 이상으로, 프론트엔드 자산의 처리 및 배포를 완벽하게 제어할 수 있는 강력한 도구입니다. Vite나 CRA(Create React App)와 같은 도구도 있지만, 웹팩을 이해함으로써 빌드를 커스터마이징하고 최적화하는 능력을 가질 수 있습니다. 더 많은 프론트엔드 개발 및 소프트웨어 엔지니어링 정보를 원하신다면 Dev.to에서 저를 팔로우하세요.

R_11