JavaScript λͺ¨λ ν« μ λ°μ΄νΈ κ΄λ¦¬μμ λν μ¬μΈ΅ λΆμμΌλ‘, μ λ°μ΄νΈ μ‘°μ μμ€ν , μ΄μ , ꡬν μ λ΅ λ° μνν κ°λ° μν¬νλ‘μ°λ₯Ό μν λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄λ΄ λλ€.
JavaScript λͺ¨λ ν« μ λ°μ΄νΈ κ΄λ¦¬μ: μ λ°μ΄νΈ μ‘°μ μμ€ν μ΄ν΄
μλμ μΈ μΉ κ°λ° μΈκ³μμ ν¨μ¨μ±κ³Ό μλλ λ§€μ° μ€μν©λλ€. JavaScript λͺ¨λ ν« μ λ°μ΄νΈ κ΄λ¦¬μ(HMR)λ κ°λ° νλ‘μΈμ€λ₯Ό κ°μννλ λ° μμ΄μλ μ λ λκ΅¬λ‘ λΆμνμ΅λλ€. μ΄ λ¬Έμμμλ HMRμ 볡μ‘μ±μ μμΈν μ΄ν΄λ³΄κ³ νΉν κΈ°λ₯μ κΈ°μ΄κ° λλ μ λ°μ΄νΈ μ‘°μ μμ€ν μ μ€μ μ λ‘λλ€. ν΅μ¬ κ°λ , μ΄μ , ꡬν μΈλΆ μ 보 λ° λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄λ³΄κ³ λͺ¨λ μμ€μ κ°λ°μλ₯Ό μν ν¬κ΄μ μΈ μ΄ν΄λ₯Ό μ 곡ν©λλ€.
JavaScript λͺ¨λ ν« μ λ°μ΄νΈ κ΄λ¦¬μλ 무μμ λκΉ?
λͺ¨λ ν« μ λ°μ΄νΈ κ΄λ¦¬μλ₯Ό μ¬μ©νλ©΄ μ 체 νμ΄μ§λ₯Ό λ€μ λ‘λνμ§ μκ³ λ μ€ν μ€μΈ μ ν리μΌμ΄μ μμ λͺ¨λμ μ λ°μ΄νΈν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μ ν리μΌμ΄μ μνλ₯Ό μ μ§νκ³ μ½λ λ³κ²½μ λν μ¦κ°μ μΈ νΌλλ°±μ μ 곡νμ¬ κ°λ° μκ°μ ν¬κ² μ€μΌ μ μμ΅λλ€. μ 체 μ ν리μΌμ΄μ μ λ€μ λΉλνκ³ λ€μ λ‘λνλ λμ μμ λ λͺ¨λκ³Ό ν΄λΉ μ’ μμ±λ§ μ λ°μ΄νΈλ©λλ€.
λ€μκ³Ό κ°μ΄ μκ°νμμμ€. μ§(μ ν리μΌμ΄μ )μ μ§κ³ μμ΅λλ€. HMRμ΄ μμΌλ©΄ μ°½(λͺ¨λ)μ λ³κ²½ν λλ§λ€ μ§ μ 체λ₯Ό νλ¬Όκ³ λ€μ λΉλν΄μΌ ν©λλ€. HMRμ μ¬μ©νλ©΄ λλ¨Έμ§ κ΅¬μ‘°λ₯Ό 건λλ¦¬μ§ μκ³ μ°½μ κ΅μ²΄ν μ μμ΅λλ€.
ν« μ λ°μ΄νΈ κ΄λ¦¬μλ₯Ό μ¬μ©νλ μ΄μ λ 무μμ λκΉ?
- λ λΉ λ₯Έ κ°λ° μ£ΌκΈ°: λ€μ λ‘λ μκ°μ΄ μ€μ΄λ€μ΄ νΌλλ°± 루νκ° λΉ¨λΌμ§κ³ κ°λ° ν¨μ¨μ±μ΄ ν₯μλ©λλ€.
- μ ν리μΌμ΄μ μν μ μ§: μ λ°μ΄νΈ μ λ°μ κ±Έμ³ μνκ° μ μ§λλ―λ‘ κ°λ°μλ μ€μν 컨ν μ€νΈλ₯Ό μμ§ μκ³ μ½λμ λν΄ λ°λ³΅μ μΌλ‘ μμ ν μ μμ΅λλ€. 볡μ‘ν νΌμ λλ²κΉ νλ€κ³ μμν΄ λ³΄μμμ€. HMRμ΄ μμΌλ©΄ μ½λ λ³κ²½μ΄ μμ λλ§λ€ νΌμ΄ μ¬μ€μ λμ΄ λͺ¨λ λ°μ΄ν°λ₯Ό λ€μ μ λ ₯ν΄μΌ ν©λλ€.
- ν₯μλ κ°λ°μ κ²½ν: HMRμ λ λΆλλ½κ³ λ°μμ±μ΄ λ°μ΄λ κ°λ° νκ²½μ μ 곡νμ¬ μ λ°μ μΈ κ°λ°μ κ²½νμ ν₯μμν΅λλ€.
- μλ² λ‘λ κ°μ: νμν λͺ¨λλ§ μ λ°μ΄νΈνμ¬ HMRμ κ°λ° μλ²μ λ‘λλ₯Ό μ΅μνν©λλ€.
- ν₯μλ λλ²κΉ : HMRμ μ¬μ©νλ©΄ νΉμ μ½λ λ³κ²½μ μν₯μ 격리νμ¬ λ³΄λ€ μ§μ€μ μΈ λλ²κΉ μ΄ κ°λ₯ν©λλ€.
ν΅μ¬ κ°λ : μ λ°μ΄νΈ μ‘°μ μμ€ν
λͺ¨λ HMR μμ€ν μ ν΅μ¬μ μ λ°μ΄νΈ μ‘°μ λ©μ»€λμ¦μ λλ€. μ΄ μμ€ν μ λͺ¨λμ λ³κ²½ μ¬νμ κ°μ§νκ³ , μ λ°μ΄νΈν΄μΌ νλ λͺ¨λμ κ²°μ νκ³ , μ ν리μΌμ΄μ μ μ 체 μνλ₯Ό λ°©ν΄νμ§ μκ³ μ λ°μ΄νΈ νλ‘μΈμ€λ₯Ό μ€μΌμ€νΈλ μ΄μ νλ μν μ ν©λλ€. λͺ κ°μ§ μ£Όμ κ΅¬μ± μμμ κ°λ μ΄ κ΄λ ¨λμ΄ μμ΅λλ€.1. λͺ¨λ κ·Έλν
λͺ¨λ κ·Έλνλ μ ν리μΌμ΄μ μ λͺ¨λ κ° μ’ μμ±μ λνλ λλ€. HMR λꡬλ μ΄ κ·Έλνλ₯Ό λΆμνμ¬ λ³κ²½ μ¬νμ μν₯μ νμΈνκ³ μ λ°μ΄νΈν΄μΌ νλ λͺ¨λμ μλ³ν©λλ€. ν λͺ¨λμ λ³κ²½μΌλ‘ μΈν΄ μ§κ°μ μ μΌλ‘ μ’ μλ λ€λ₯Έ λͺ¨λμ μ λ°μ΄νΈν΄μΌ ν μ μμ΅λλ€.
κ°μ‘± κ΄κ³λλ₯Ό μμν΄ λ³΄μμμ€. ν μ¬λμ΄ μ§μ (λͺ¨λ λ³κ²½)μ λ³κ²½νλ©΄ λ°°μ°μμ μλ (μ’ μ λͺ¨λ)μκ² μν₯μ λ―ΈμΉ μ μμ΅λλ€. λͺ¨λ κ·Έλνλ HMR μμ€ν μ΄ μ΄λ¬ν κ΄κ³λ₯Ό μ΄ν΄νλ λ° λμμ΄ λλ κ°μ‘± κ΄κ³λμ λλ€.
2. λ³κ²½ μ¬ν κ°μ§
HMR μμ€ν μ λ€μν κΈ°μ μ μ¬μ©νμ¬ λͺ¨λμ λ³κ²½ μ¬νμ κ°μ§ν©λλ€. μ¬κΈ°μλ νμΌ μμ€ν μ΄λ²€νΈ λͺ¨λν°λ§, λͺ¨λ ν΄μ λΉκ΅ λλ μμ μ¬νμ μλ³νκΈ° μν κΈ°ν λ©μ»€λμ¦ μ¬μ©μ΄ ν¬ν¨λ μ μμ΅λλ€.
νμΌ μμ€ν λͺ¨λν°λ§μ μΌλ°μ μΈ μ κ·Ό λ°©μμ λλ€. HMR λꡬλ νμΌ λ³κ²½ μ¬νμ μμ νκ³ μμ μ¬νμ΄ κ°μ§λλ©΄ μ λ°μ΄νΈλ₯Ό νΈλ¦¬κ±°ν©λλ€. λλ μμ€ν μ κ° λͺ¨λμ ν΄μλ₯Ό κ³μ°νμ¬ μ΄μ ν΄μμ λΉκ΅ν μ μμ΅λλ€. ν΄μκ° λ€λ₯΄λ©΄ λ³κ²½ μ¬νμ λνλ λλ€.
3. μ λ°μ΄νΈ μ ν
λ³κ²½ μ¬νμ΄ κ°μ§λλ©΄ HMR μμ€ν μ λͺ¨λ κ·Έλνλ₯Ό ν΅ν΄ μ λ°μ΄νΈλ₯Ό μ νν©λλ€. μ¬κΈ°μλ μμ λ λͺ¨λμ μ§κ°μ μ μΌλ‘ μ’ μλ λͺ¨λ λͺ¨λμ μλ³νκ³ μ λ°μ΄νΈ λμμΌλ‘ νμνλ μμ μ΄ ν¬ν¨λ©λλ€.
μ λ°μ΄νΈ μ ν νλ‘μΈμ€λ λͺ¨λ κ·Έλνμ μ μλ μ’ μμ± κ΄κ³λ₯Ό λ°λ¦ λλ€. μμ€ν μ λ³κ²½λ λͺ¨λλΆν° μμνμ¬ κ·Έλνλ₯Ό μ¬κ·μ μΌλ‘ μννλ©΄μ μ’ μ λͺ¨λμ λ°λΌ νμν©λλ€.
4. μ½λ λ체
ν΅μ¬ μμ μ μ ν리μΌμ΄μ λ°νμμ μ΅μνμΌλ‘ μ€λ¨μν€λ λ°©μμΌλ‘ μ΄μ λͺ¨λ μ½λλ₯Ό μ λ²μ μΌλ‘ λ°κΎΈλ κ²μ λλ€. μ¬κΈ°μλ λ€μκ³Ό κ°μ κΈ°μ μ΄ ν¬ν¨λλ κ²½μ°κ° λ§μ΅λλ€.
- ν« μ€μν: μ 체 λ€μ λ‘λ μμ΄ λ©λͺ¨λ¦¬μμ μ§μ λͺ¨λμ μ½λλ₯Ό λ°κΏλλ€. μ΄λ μ ν리μΌμ΄μ μνλ₯Ό μ μ§νλ λ° μ΄μμ μΈ μλ리μ€μ λλ€.
- λΆλΆ μ λ°μ΄νΈ: μ 체 λͺ¨λμ λ°κΎΈλ λμ ν¨μ λλ λ³μμ κ°μ΄ λͺ¨λμ νΉμ λΆλΆλ§ μ λ°μ΄νΈν©λλ€.
- ν¨μ μ£Όμ : κΈ°μ‘΄ λͺ¨λ λ²μμ μ ν¨μ λλ μμ λ ν¨μλ₯Ό λμ ν©λλ€.
5. μλ½/κ±°λΆ λ©μ»€λμ¦
λͺ¨λμ ν« μ λ°μ΄νΈλ₯Ό λͺ μμ μΌλ‘ "μλ½"νκ±°λ "κ±°λΆ"ν μ μμ΅λλ€. λͺ¨λμ΄ μ λ°μ΄νΈλ₯Ό μλ½νλ©΄ μ ν리μΌμ΄μ μ μ€λ¨νμ§ μκ³ λ³κ²½ μ¬νμ μ²λ¦¬ν μ μμμ λνλ λλ€. λͺ¨λμ΄ μ λ°μ΄νΈλ₯Ό κ±°λΆνλ©΄ μ 체 λ€μ λ‘λκ° νμν¨μ μ립λλ€.
μ΄ λ©μ»€λμ¦μ κ°λ°μμκ² μ λ°μ΄νΈ νλ‘μΈμ€μ λν μΈλΆνλ μ μ΄ κΈ°λ₯μ μ 곡ν©λλ€. μ΄λ₯Ό ν΅ν΄ λͺ¨λμ΄ λ³κ²½ μ¬νμ μ΄λ»κ² λ°μν΄μΌ νλμ§ μ§μ νκ³ μκΈ°μΉ μμ λμμ λ°©μ§ν μ μμ΅λλ€. μλ₯Ό λ€μ΄ νΉμ λ°μ΄ν° ꡬ쑰μ μμ‘΄νλ κ΅¬μ± μμλ λ°μ΄ν° κ΅¬μ‘°κ° μμ λ κ²½μ° μ λ°μ΄νΈλ₯Ό κ±°λΆν μ μμ΅λλ€.
6. μ€λ₯ μ²λ¦¬
μνν HMR κ²½νμ μν΄μλ κ°λ ₯ν μ€λ₯ μ²λ¦¬κ° μ€μν©λλ€. μμ€ν μ μ λ°μ΄νΈ νλ‘μΈμ€ μ€μ λ°μνλ μ€λ₯λ₯Ό μ μμ μΌλ‘ μ²λ¦¬νκ³ κ°λ°μμκ² μ μ΅ν νΌλλ°±μ μ 곡νλ©° μ ν리μΌμ΄μ μΆ©λμ λ°©μ§ν΄μΌ ν©λλ€.
ν« μ λ°μ΄νΈ μ€μ μ€λ₯κ° λ°μνλ©΄ μμ€ν μ μ€λ₯ λ©μμ§λ₯Ό κΈ°λ‘νκ³ λ¬Έμ λ₯Ό ν΄κ²°νλ λ°©λ²μ λν μ§μΉ¨μ μ 곡ν΄μΌ ν©λλ€. λν λͺ¨λμ μ΄μ λ²μ μΌλ‘ λλ리거λ μ 체 λ€μ λ‘λλ₯Ό μννλ λ±μ μ΅μ μ μ 곡ν μλ μμ΅λλ€.
μΌλ°μ μΈ HMR ꡬν
λͺ κ°μ§ μΌλ°μ μΈ JavaScript λ²λ€λ¬ λ° λΉλ λꡬλ μ체 ꡬν λ° κ΅¬μ± μ΅μ κ³Ό ν¨κ» κΈ°λ³Έ μ 곡 HMR μ§μμ μ 곡ν©λλ€. λ€μμ λͺ κ°μ§ μ£Όμ μμ λλ€.1. Webpack
Webpackμ ν¬κ΄μ μΈ HMR ꡬνμ μ 곡νλ λ리 μ¬μ©λλ λͺ¨λ λ²λ€λ¬μ λλ€. μ κ΅ν λͺ¨λ κ·Έλνλ₯Ό νμ©νκ³ μ λ°μ΄νΈ νλ‘μΈμ€λ₯Ό μ¬μ©μ μ§μ νκΈ° μν λ€μν κ΅¬μ± μ΅μ μ μ 곡ν©λλ€.
Webpackμ HMR ꡬνμ webpack-dev-server λ° HotModuleReplacementPluginμ μμ‘΄ν©λλ€. κ°λ° μλ²λ λΈλΌμ°μ μ λ²λ€λ¬ κ°μ ν΅μ μ±λ μν μ νκ³ νλ¬κ·ΈμΈμ ν« λͺ¨λ λ체 κΈ°λ₯μ νμ±νν©λλ€.
Webpack κ΅¬μ± μ:
module.exports = {
// ...
devServer: {
hot: true,
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
};
μ΄ κ΅¬μ±μμ hot: trueλ κ°λ° μλ²μμ HMRμ νμ±ννκ³ webpack.HotModuleReplacementPlugin()μ νλ¬κ·ΈμΈμ νμ±νν©λλ€.
2. Vite
Viteλ κΈ°λ³Έ ES λͺ¨λμ νμ©νμ¬ λ§€μ° λΉ λ₯Έ κ°λ° λΉλλ₯Ό μ 곡νλ μ΅μ λΉλ λꡬμ λλ€. HMR ꡬνμ Webpackκ³Ό κ°μ κΈ°μ‘΄ λ²λ€λ¬λ³΄λ€ ν¨μ¬ λΉ λ¦ λλ€.
Viteμ HMR ꡬνμ κΈ°λ³Έ ES λͺ¨λμ κΈ°λ°μΌλ‘ ꡬμΆλμμΌλ©° ν¨μ¨μ μΈ μ λ°μ΄νΈλ₯Ό μν΄ λΈλΌμ°μ μΊμ±μ νμ©ν©λλ€. λ³κ²½λ λͺ¨λκ³Ό ν΄λΉ μ’ μμ±λ§ μ λ°μ΄νΈνλ―λ‘ κ±°μ μ¦κ°μ μΈ νΌλλ°±μ΄ κ°λ₯ν©λλ€.
Viteλ HMRμ λν μ΅μνμ ꡬμ±μ΄ νμν©λλ€. κ°λ° λͺ¨λμμλ κΈ°λ³Έμ μΌλ‘ νμ±νλ©λλ€.
Vite κ΅¬μ± μ(vite.config.js):
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react()
],
})
μ΄ κ΅¬μ±μμ @vitejs/plugin-reactλ React κ΅¬μ± μμμ λν HMRμ μλμΌλ‘ νμ±νν©λλ€.
3. Rollup
Rollupμ νλ¬κ·ΈμΈμ ν΅ν΄ HMR μ§μμ μ 곡νλ λ λ€λ₯Έ μΌλ°μ μΈ λͺ¨λ λ²λ€λ¬μ λλ€. νλ‘λμ μ μν΄ κ³ λλ‘ μ΅μ νλ λ²λ€μ μμ±νλ κΈ°λ₯μΌλ‘ μ λͺ ν©λλ€.
Rollupμ HMR ꡬνμ @rollup/plugin-hotμ κ°μ νλ¬κ·ΈμΈμ μμ‘΄ν©λλ€. μ΄λ¬ν νλ¬κ·ΈμΈμ λ³κ²½ μ¬ν κ°μ§, μ
λ°μ΄νΈ μ ν λ° λͺ¨λ μ½λ λ체λ₯Ό μν νμν κΈ°λ₯μ μ 곡ν©λλ€.
Rollup κ΅¬μ± μ(rollup.config.js):
import hot from '@rollup/plugin-hot'
export default {
// ...
plugins: [
hot(),
],
};
μ΄ κ΅¬μ±μμ @rollup/plugin-hotλ HMR κΈ°λ₯μ νμ±νν©λλ€.
ꡬν μ λ΅
HMRμ ν¨κ³Όμ μΌλ‘ ꡬννλ €λ©΄ μ ν리μΌμ΄μ μν€ν μ²μ κ°λ° μν¬νλ‘μ°μ νΉμ μꡬ μ¬νμ μ μ€νκ² κ³ λ €ν΄μΌ ν©λλ€. λ€μμ μΌλμ λμ΄μΌ ν λͺ κ°μ§ μ£Όμ μ λ΅μ λλ€.1. λͺ¨λ κ²½κ³
λ³κ²½ μ¬νμ 격리νκ³ μ λ°μ΄νΈμ μν₯μ μ΅μννκΈ° μν΄ λͺ νν λͺ¨λ κ²½κ³λ₯Ό μ μν©λλ€. μ μ μλ λͺ¨λμ μ¬μ©νλ©΄ HMR μμ€ν μ΄ μ’ μμ±μ μΆμ νκ³ μ λ°μ΄νΈλ₯Ό ν¨μ¨μ μΌλ‘ μ ννλ λ° λμμ΄ λ©λλ€.
μ½λ λΆν λ° κ΅¬μ± μμ κΈ°λ° μν€ν μ²μ κ°μ κΈ°μ μ μ¬μ©νμ¬ λͺ¨λμ μ ν리μΌμ΄μ μ λ§λλ κ²μ κ³ λ €νμμμ€. μ΄λ κ² νλ©΄ μ λ°μ΄νΈλ₯Ό κ΄λ¦¬νκ³ μ½λλ² μ΄μ€μ μ λ°μ μΈ μ μ§ κ΄λ¦¬ μ©μ΄μ±μ ν₯μμν€λ λ° λμμ΄ λ©λλ€.
2. μν κ΄λ¦¬
ν« μ λ°μ΄νΈ μ€μ μ μ§λλλ‘ μ ν리μΌμ΄μ μνλ₯Ό ν¨κ³Όμ μΌλ‘ κ΄λ¦¬ν©λλ€. Redux, Vuex λλ MobXμ κ°μ μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ μ ν리μΌμ΄μ μνλ₯Ό μ€μ μ§μ€ννκ³ κ΄λ¦¬ν©λλ€.
μ΄λ¬ν λΌμ΄λΈλ¬λ¦¬λ μ λ°μ΄νΈ μ λ°μ κ±Έμ³ μνλ₯Ό μ μ§νκ³ λ°μ΄ν° μμ€μ λ°©μ§νκΈ° μν λ©μ»€λμ¦μ μ 곡ν©λλ€. λν λ¬Έμ λ₯Ό μλ³νκ³ ν΄κ²°νλ λ° λ§€μ° μ μ©ν μ μλ μκ° μ¬ν λλ²κΉ κ³Ό κ°μ κΈ°λ₯λ μ 곡ν©λλ€.
3. κ΅¬μ± μμ κΈ°λ° μν€ν μ²
λͺ¨λμ μ λ°μ΄νΈλ₯Ό μ©μ΄νκ² νκΈ° μν΄ κ΅¬μ± μμ κΈ°λ° μν€ν μ²λ₯Ό μ±νν©λλ€. κ΅¬μ± μμλ μ ν리μΌμ΄μ μ λ€λ₯Έ λΆλΆμ μν₯μ μ£Όμ§ μκ³ λ 립μ μΌλ‘ μ λ°μ΄νΈν μ μλ μ체 ν¬ν¨ κΈ°λ₯ λ¨μμ λλ€.
React, Angular λ° Vue.jsμ κ°μ νλ μμν¬λ κ΅¬μ± μμ κΈ°λ° μ κ·Ό λ°©μμ κΆμ₯νλ―λ‘ HMRμ ν¨κ³Όμ μΌλ‘ ꡬννκΈ°κ° λ μ½μ΅λλ€. λ¨μΌ κ΅¬μ± μμλ₯Ό μ λ°μ΄νΈνλ©΄ ν΄λΉ κ΅¬μ± μμμ μ§μ μ’ μμ±μλ§ μν₯μ λ―ΈμΉ©λλ€.
4. μλ½/κ±°λΆ μ²λ¦¬κΈ°
λͺ¨λμ΄ ν« μ λ°μ΄νΈμ λ°μνλ λ°©μμ μ μ΄νκΈ° μν΄ μλ½/κ±°λΆ μ²λ¦¬κΈ°λ₯Ό ꡬνν©λλ€. μ΄λ¬ν μ²λ¦¬κΈ°λ₯Ό μ¬μ©νμ¬ λͺ¨λμ΄ λ³κ²½ μ¬νμ μ μμ μΌλ‘ μ²λ¦¬νκ³ μκΈ°μΉ μμ λμμ λ°©μ§νλμ§ νμΈν©λλ€.
λͺ¨λμ΄ μ λ°μ΄νΈλ₯Ό μλ½νλ©΄ λ΄λΆ μνλ₯Ό μ λ°μ΄νΈνκ³ μΆλ ₯μ λ€μ λ λλ§ν΄μΌ ν©λλ€. λͺ¨λμ΄ μ λ°μ΄νΈλ₯Ό κ±°λΆνλ©΄ μ 체 λ€μ λ‘λκ° νμν¨μ μ립λλ€.
μ(Webpack):
if (module.hot) {
module.hot.accept('./myModule', function() {
// This function will be called when myModule.js is updated
console.log('myModule.js updated!');
});
}
5. μ€λ₯ κ²½κ³
ν« μ λ°μ΄νΈ μ€μ λ°μνλ μ€λ₯λ₯Ό ν¬μ°©νκ³ μ ν리μΌμ΄μ μΆ©λμ λ°©μ§νκΈ° μν΄ μ€λ₯ κ²½κ³λ₯Ό μ¬μ©ν©λλ€. μ€λ₯ κ²½κ³λ μμ κ΅¬μ± μμ νΈλ¦¬μ λͺ¨λ JavaScript μ€λ₯λ₯Ό ν¬μ°©νκ³ ν΄λΉ μ€λ₯λ₯Ό κΈ°λ‘νλ©° μΆ©λν κ΅¬μ± μμ νΈλ¦¬ λμ λ체 UIλ₯Ό νμνλ React κ΅¬μ± μμμ λλ€.
μ€λ₯ κ²½κ³λ μ€λ₯λ₯Ό 격리νκ³ μ ν리μΌμ΄μ μ λ€λ₯Έ λΆλΆμΌλ‘ μ νλλ κ²μ λ°©μ§νλ λ° λμμ΄ λ μ μμ΅λλ€. μ΄λ μμ£Ό λ³κ²½νκ³ μ€λ₯κ° λ°μνλ κ°λ° μ€μ νΉν μ μ©ν μ μμ΅λλ€.
HMRμ λν λͺ¨λ² μ¬λ‘
HMRμ μ΄μ μ κ·Ήλννκ³ μνν κ°λ° κ²½νμ 보μ₯νλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄μμμ€.- λͺ¨λμ μκ³ μ§μ€μ μΌλ‘ μ μ§: λͺ¨λμ΄ μμμλ‘ μ λ°μ΄νΈνκΈ° μ½κ³ μ 체 μ ν리μΌμ΄μ μ λ―ΈμΉλ μν₯μ΄ μ μ΅λλ€.
- μΌκ΄λ μ½λ© μ€νμΌ μ¬μ©: μΌκ΄λ μ½λ© μ€νμΌμ μ¬μ©νλ©΄ λ³κ²½ μ¬νμ μΆμ νκ³ μ μ¬μ μΈ λ¬Έμ λ₯Ό μλ³νκΈ°κ° λ μ½μ΅λλ€.
- λ¨μ ν μ€νΈ μμ±: λ¨μ ν μ€νΈλ μ½λκ° μ¬λ°λ₯΄κ² μλνκ³ λ³κ²½ μ¬νμΌλ‘ μΈν΄ νκ·κ° λ°μνμ§ μλμ§ νμΈνλ λ° λμμ΄ λ©λλ€.
- μ² μ ν ν μ€νΈ: κ° ν« μ λ°μ΄νΈ ν μ ν리μΌμ΄μ μ μ² μ ν ν μ€νΈνμ¬ λͺ¨λ κ²μ΄ μμλλ‘ μλνλμ§ νμΈν©λλ€.
- μ±λ₯ λͺ¨λν°λ§: μ ν리μΌμ΄μ μ μ±λ₯μ λͺ¨λν°λ§νμ¬ μ μ¬μ μΈ λ³λͺ© νμμ μλ³νκ³ μ½λλ₯Ό μ΅μ νν©λλ€.
- λ¦°ν° μ¬μ©: λ¦°ν°λ μ μ¬μ μΈ μ€λ₯λ₯Ό μλ³νκ³ μ½λ© νμ€μ μ μ©νλ λ° λμμ΄ λ μ μμ΅λλ€.
- λ²μ μ μ΄ μμ€ν μ¬μ©: Gitμ κ°μ λ²μ μ μ΄ μμ€ν μ μ¬μ©νλ©΄ λ³κ²½ μ¬νμ μΆμ νκ³ νμν κ²½μ° μ΄μ λ²μ μΌλ‘ λλ릴 μ μμ΅λλ€.
μΌλ°μ μΈ λ¬Έμ ν΄κ²°
HMRμ μλΉν μ΄μ μ μ 곡νμ§λ§ ꡬν λ° μ¬μ© μ€μ λͺ κ°μ§ μΌλ°μ μΈ λ¬Έμ κ° λ°μν μ μμ΅λλ€. λ€μμ λͺ κ°μ§ λ¬Έμ ν΄κ²° νμ λλ€.- μ 체 νμ΄μ§ λ€μ λ‘λ: ν« μ λ°μ΄νΈ λμ μ 체 νμ΄μ§ λ€μ λ‘λκ° μμ£Ό λ°μνλ κ²½μ° κ΅¬μ±μ νμΈνκ³ HMRμ΄ μ λλ‘ νμ±νλμ΄ μλμ§ νμΈνμμμ€. λν μλ½/κ±°λΆ μ²λ¦¬κΈ°λ₯Ό νμΈνμ¬ μ λ°μ΄νΈλ₯Ό κ±°λΆνλ λͺ¨λμ΄ μλμ§ νμΈνμμμ€.
- μν μμ€: ν« μ λ°μ΄νΈ μ€μ μ ν리μΌμ΄μ μνκ° μμ€λλ κ²½μ° μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νκ³ κ΅¬μ± μμκ° ν΄λΉ μνλ₯Ό μ¬λ°λ₯΄κ² μ λ°μ΄νΈνλμ§ νμΈνμμμ€.
- μ±λ₯ λ¬Έμ : HMRμ μ±λ₯ λ¬Έμ κ° λ°μνλ κ²½μ° λͺ¨λ ν¬κΈ°λ₯Ό μ€μ΄κ³ μ½λλ₯Ό μ΅μ νν΄ λ³΄μμμ€. λ€λ₯Έ HMR ꡬν λλ λΉλ λꡬλ₯Ό μ¬μ©ν΄ λ³Ό μλ μμ΅λλ€.
- μν μ’ μμ±: μν μ’ μμ±μ HMRμ λ¬Έμ λ₯Ό μΌμΌν¬ μ μμ΅λλ€. μ½λμμ μν μ’ μμ±μ νΌνμμμ€.
- κ΅¬μ± μ€λ₯: κ΅¬μ± νμΌμμ νμν λͺ¨λ μ΅μ μ΄ μ¬λ°λ₯΄κ² μ€μ λμ΄ μλμ§ λ€μ νμΈνμμμ€.
λ€μν νλ μμν¬μ HMR: μ
HMRμ κΈ°λ³Έ μμΉμ μΌκ΄λκ² μ μ§λμ§λ§ νΉμ ꡬν μΈλΆ μ 보λ μ¬μ© μ€μΈ JavaScript νλ μμν¬μ λ°λΌ λ€λ₯Ό μ μμ΅λλ€. λ€μμ μΌλ°μ μΈ νλ μμν¬μμ HMRμ μ¬μ©νλ μμ λλ€.React
React Fast Refreshλ React κ΅¬μ± μμμ λν λΉ λ₯΄κ³ μμ μ μΈ ν« λ¦¬λ‘λ©μ μ 곡νλ λ리 μ¬μ©λλ λΌμ΄λΈλ¬λ¦¬μ λλ€. Create React App λ° κΈ°ν μΌλ°μ μΈ λΉλ λꡬμ ν΅ν©λμ΄ μμ΅λλ€.
μ(Create React Appμμ React Fast Refresh μ¬μ©):
// App.js
import React from 'react';
function App() {
return (
Hello, React!
);
}
export default App;
React Fast Refreshλ₯Ό νμ±ννλ©΄ App.js νμΌμ λν λͺ¨λ λ³κ²½ μ¬νμ΄ μ 체 νμ΄μ§λ₯Ό λ€μ λ‘λνμ§ μκ³ λΈλΌμ°μ μ μλμΌλ‘ λ°μλ©λλ€.
Angular
Angularλ Angular CLIλ₯Ό ν΅ν΄ κΈ°λ³Έ μ 곡 HMR μ§μμ μ 곡ν©λλ€. --hmr νλκ·Έμ ν¨κ» ng serve λͺ
λ Ήμ μ€ννμ¬ HMRμ νμ±νν μ μμ΅λλ€.
μ:
ng serve --hmr
μ΄λ κ² νλ©΄ HMRμ΄ νμ±νλ κ°λ° μλ²κ° μμλ©λλ€. Angular κ΅¬μ± μμ, ν νλ¦Ώ λλ μ€νμΌμ λν λͺ¨λ λ³κ²½ μ¬νμ΄ λΈλΌμ°μ μμ μλμΌλ‘ μ λ°μ΄νΈλ©λλ€.
Vue.js
Vue.jsλ vue-loader λ° webpack-dev-serverλ₯Ό ν΅ν΄ HMR μ§μμ μ 곡ν©λλ€. hot μ΅μ
μ trueλ‘ μ€μ νμ¬ webpack-dev-serverλ₯Ό ꡬμ±νμ¬ HMRμ νμ±νν μ μμ΅λλ€.
μ(Vue CLI νλ‘μ νΈ):
// vue.config.js
module.exports = {
devServer: {
hot: true,
},
};
μ΄ κ΅¬μ±μμ Vue κ΅¬μ± μμ, ν νλ¦Ώ λλ μ€νμΌμ λν λͺ¨λ λ³κ²½ μ¬νμ΄ λΈλΌμ°μ μμ μλμΌλ‘ μ λ°μ΄νΈλ©λλ€.
κ²°λ‘
JavaScript λͺ¨λ ν« μ λ°μ΄νΈ κ΄λ¦¬μλ μ΅μ μΉ κ°λ°μ μμ΄μλ μ λ λꡬμ λλ€. κΈ°λ³Έ μ λ°μ΄νΈ μ‘°μ μμ€ν μ μ΄ν΄νκ³ λͺ¨λ² μ¬λ‘λ₯Ό ꡬνν¨μΌλ‘μ¨ κ°λ°μλ μν¬νλ‘μ°λ₯Ό ν¬κ² κ°μ νκ³ κ°λ° μκ°μ λ¨μΆνλ©° μ λ°μ μΈ κ°λ° κ²½νμ ν₯μμν¬ μ μμ΅λλ€. Webpack, Vite, Rollup λλ λ€λ₯Έ λΉλ λꡬλ₯Ό μ¬μ©νλμ§μ κ΄κ³μμ΄ ν¨μ¨μ μ΄κ³ μ μ§ κ΄λ¦¬ κ°λ₯ν μΉ μ ν리μΌμ΄μ μ ꡬμΆνλ €λ©΄ HMRμ λ§μ€ν°νλ κ²μ΄ νμμ μ λλ€.
HMRμ νμ λ°μλ€μ΄κ³ JavaScript κ°λ° μ¬μ μμ μλ‘μ΄ μμ€μ μμ°μ±μ λ°ννμμμ€.
μΆκ° μλ£
- Webpack ν« λͺ¨λ λ체: https://webpack.js.org/guides/hot-module-replacement/
- Vite HMR: https://vitejs.dev/guide/features.html#hot-module-replacement
- Rollup ν« λͺ¨λ λ체: https://www.npmjs.com/package/@rollup/plugin-hot
μ΄ ν¬κ΄μ μΈ κ°μ΄λλ JavaScript λͺ¨λ ν« μ λ°μ΄νΈ κ΄λ¦¬μλ₯Ό μ΄ν΄νκ³ κ΅¬ννκΈ° μν κ²¬κ³ ν κΈ°λ°μ μ 곡ν©λλ€. νΉμ νλ‘μ νΈ μꡬ μ¬ν λ° κ°λ° μν¬νλ‘μ°μ λ§κ² κ°λ κ³Ό κΈ°μ μ μ‘°μ νλ κ²μ μμ§ λ§μμμ€.