코드를 수정하고 즉시 변경 사항을 확인할 수 있는 HMR (Hot Module Replacement) 기능은 개발자에게 매우 편리합니다. HMR은 모듈의 변경된 부분만을 실시간으로 교체하여 애플리케이션을 다시 로드할 필요 없이 변경 사항을 즉시 반영할 수 있게 해줍니다.
최근에는 타입스크립트를 사용하여 프론트엔드 애플리케이션을 개발할 때 HMR을 지원하는 모듈 번들러가 많이 등장하고 있습니다. 이러한 번들러를 사용하면 타입스크립트로 작성된 코드를 빌드할 때 HMR을 쉽게 활용할 수 있습니다.
Webpack
가장 널리 사용되는 모듈 번들러인 Webpack은 타입스크립트와 함께 사용할 수 있는 다양한 HMR 플러그인을 제공합니다. 이를 통해 코드 변경을 감지하고 해당 모듈을 실시간으로 교체하여 브라우저에서 바로 확인할 수 있습니다.
Webpack을 통해 타입스크립트 애플리케이션을 빌드할 때 webpack-dev-server와 함께 HMR을 활성화하면 개발자는 코드 수정을 할 때마다 페이지를 새로고침하지 않고도 변경 사항을 즉시 확인할 수 있습니다.
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.ts',
devServer: {
hot: true,
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [path.resolve(__dirname, 'src')],
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
Vite
Vite는 최신 프론트엔드 프레임워크 및 라이브러리에 특화될 뿐만 아니라 HMR을 지원하면서 빠른 빌드 시간과 개발용 서버 실행 시간을 제공합니다.
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [],
server: {
hmr: {
overlay: false,
},
},
});
Vite를 사용하면 번거로운 설정 없이 타입스크립트 애플리케이션에서 HMR을 손쉽게 활용할 수 있습니다.
위에서 언급한 Webpack과 Vite 외에도 Snowpack, Parcel 등의 모듈 번들러들도 타입스크립트와 HMR을 함께 사용할 수 있는 다양한 옵션을 제공하고 있습니다.
개발자는 프로젝트의 요구 사항과 선호도에 따라 적절한 모듈 번들러를 선택하여 타입스크립트 애플리케이션에 효율적으로 HMR을 적용할 수 있습니다.
이처럼 타입스크립트 모듈 번들러의 HMR 기능을 활용하면 코드 수정 시 바로 결과를 확인할 수 있어 개발 생산성을 향상시킬 수 있습니다.
참고 자료
- Webpack HMR 공식 문서: https://webpack.js.org/concepts/hot-module-replacement/
- Vite 공식 홈페이지: https://vitejs.dev/
- Snowpack 공식 홈페이지: https://www.snowpack.dev/
- Parcel 공식 홈페이지: https://parceljs.org/