개발 서버

<aside> 💡

코드 변경 사항 실시간 반영

</aside>

• 코드 변경을 자동으로 반영하여, 개발 생산성 UP
• 개발 전용 설정 제공

개발 서버 동작 방식

번들링 기반 개발 서버 - Webpack, Rollup

<aside> 💡

서버 시작 시 하나의 번들 ⇒ HRM을 이용해 반영

</aside>

ESM 기반 개발 서버 - Vite, ESBuild

<aside> 💡

사전 번들 X ⇒ 필요한 모듈만 실시간 요청

</aside>

개발 서버 설정하기

// webpack.config.js
const path = require('path');

module.exports = {
  devServer: {
    static: { directory: path.join(__dirname, 'public') },
    compress: true,
    port: 9000,
    historyApiFallback: true, // 존재하지 않는 모든 경로에 대해서도 index.html 제공
    proxy: [
      {
        context: ['/api'], // CORS
        target: '<http://localhost:3000>', // '/api' 요청을 proxy
        changeOrigin: true, // 요청 헤더 변경
        secure: false, // HTTPS 검증 유무
      },
    ],
  },
};