Bundling Fundamentals

Appearance

개발 서버로 생산성 높이기 ​

지금까지는 코드를 수정할 때마다 매번 npm run build를 돌리고, 브라우저 새로고침을 직접 눌러야 했죠.

이제는 그럴 필요 없어요. 웹팩 개발 서버를 도입하면 코드를 저장하는 순간 자동으로 브라우저에 반영돼요.
게다가 화면이 리로드되지 않아도 컴포넌트가 실시간으로 바뀌는 Hot Module Replacement 기능까지 쓸 수 있어요.

웹팩 개발 서버(webpack-dev-server) ​

웹팩 개발 서저는 우리가 작성한 코드를 메모리에 번들링해서, 브라우저에 빠르게 반영해주는 가상의 개발용 서버로, 다음과 같은 기능을 제공해요.

  • 코드 저장시 자동 새로고침
  • 스타일이나 컴포넌트 수정 시 상태를 유지하면서 실시간 반영(Hot Module Replacement)
  • 브라우저에서 에러 메시지를 오버레이로 띄워주기
  • API 서버와 연동 시 프록시 설정 가능

1. 개발 서버 설치하기 ​

먼저 다음 명령어로 개발 서버 패키지를 설치할게요.

bash
npm install --save-dev webpack-dev-server

2. 웹팩 설정에 devServer 추가하기 ​

다음으로 webpack.config.js 파일에 개발 서버 설정을 추가해 주세요.

js
const path = require("path");

module.exports = {
  // ... 기존 설정
  devServer: {
    static: {
      directory: path.join(__dirname, "dist") // 빌드된 파일을 이 경로에서 서빙해요
    },
    port: 3000, // localhost:3000에서 실행
    open: true, // 서버 실행 시 브라우저 자동 열기
    hot: true, // HMR 사용
    historyApiFallback: true, // SPA 라우팅 지원
    client: {
      overlay: true // 에러 발생 시 브라우저에 띄워줘요
    }
  }
};

3. package.json에 실행 스크립트 추가하기 ​

npm start로 바로 실행할 수 있도록 package.json에 스크립트를 추가해요.

json
{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

이제 아래 명령어로 개발 서버를 실행해볼 수 있어요.

bash
npm start

브라우저가 자동으로 열리고, 코드를 수정하면 바로바로 반영되는 걸 확인할 수 있어요.

정리 ​

지금까지는 코드를 수정할 때마다 npm run build를 직접 실행하고, 브라우저를 새로고침해가며 웹팩의 동작을 직접 경험해봤죠.

개발 서버를 마지막에 소개한 건 의도적인 선택이었어요. 이 과정을 거쳤기 때문에, 이제 웹팩 개발 서버의 편리함이 훨씬 더 와닿을 거예요. 마치 수동 변속기로 운전을 배운 뒤 자동 변속기의 고마움을 느끼는 것처럼요. 😊

지금까지 웹팩의 핵심 개념부터 실전 적용까지 한 걸음씩 밟아왔어요. 단계마다 실제 '오늘의 이모지' 프로젝트를 개선하면서 웹팩이 어떤 역할을 하고, 어떤 문제를 해결해주는지 몸으로 익힐 수 있었을 거예요.

이제 여러분은 웹팩을 단순한 설정 도구가 아니라 프로젝트를 더 잘 구조화하고 유지보수하기 위한 도구로 활용할 수 있을 거예요.

앞으로 새로운 프로젝트를 시작할 때 자신만의 웹팩 설정을 만들어보세요. 이 튜토리얼이 그 출발점이 되어주길 바래요!