πŸ”₯ ν•« λͺ¨λ“ˆ λ¦¬ν”Œλ ˆμ΄μŠ€λ¨ΌνŠΈ

ν•« λͺ¨λ“ˆ λ¦¬ν”Œλ ˆμ΄μŠ€λ¨ΌνŠΈ(Hot Module Replacement)(μ΄ν•˜ HMR)λŠ” λŸ°νƒ€μž„μ— νŽ˜μ΄μ§€ μƒˆλ‘œκ³ μΉ¨ 없이 λͺ¨λ“ˆμ„ μžλ™μœΌλ‘œ κ°±μ‹ ν•˜λ―€λ‘œ 개발 κ²½ν—˜μ„ ν–₯μƒμ‹œν‚΅λ‹ˆλ‹€. μž‘μ€ 변화에 따라 μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μƒνƒœλ₯Ό 계속 μœ μ§€ν•  수 μžˆμŠ΅λ‹ˆλ‹€. Parcel HMR은 JavaScript와 CSS μ• μ…‹ λͺ¨λ‘λ₯Ό μ§€μ›ν•©λ‹ˆλ‹€. ν”„λ‘œλ•μ…˜ λͺ¨λ“œμ—μ„œ HMR은 μžλ™μœΌλ‘œ λΉ„ν™œμ„±ν™” λ©λ‹ˆλ‹€.

νŒŒμΌμ„ μ €μž₯ν•˜λ©΄ Parcel은 λ³€ν•œ 뢀뢄을 λ‹€μ‹œ λΉŒλ“œν•˜κ³  이에 영ν–₯을 λ°›λŠ” λͺ¨λ“  싀행쀑인 ν΄λΌμ΄μ–ΈνŠΈμ— μƒˆ μ½”λ“œλ₯Ό λ³΄λƒ…λ‹ˆλ‹€. κ·Έ ν›„ μƒˆ μ½”λ“œλŠ” 이전 버전과 ꡐ체되고 λͺ¨λ“  λΆ€λͺ¨κ°€ ν•¨κ»˜ λ‹€μ‹œ 평가 λ©λ‹ˆλ‹€. 이 κ³Όμ • 쀑 module.hot APIλ₯Ό μ‚¬μš©ν•΄ ν›…(hook)을 걸수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό 톡해 λͺ¨λ“ˆμ΄ λ²„λ €μ§ˆ λ•Œ, λ˜λŠ” μƒˆ 버전이 λ“€μ–΄μ˜¬ λ•Œ μ½”λ“œμ— μ•Œλ €μ€„ 수 μžˆμŠ΅λ‹ˆλ‹€. react-hot-loader같은 ν”„λ‘œμ νŠΈλŠ” 이 과정에 도움이 되며, Parcel에 λ°”λ‘œ μ“Έ 수 μžˆμŠ΅λ‹ˆλ‹€.

module.hot.accept 와 module.hot.dispose 두 λ©”μ†Œλ“œλ₯Ό μ•Œμ•„ λ‘μ„Έμš”. module.hot.acceptλ₯Ό 이 λͺ¨λ“ˆμ΄λ‚˜ 이 λͺ¨λ“ˆμ˜ λ‹€λ₯Έ 의쑴 사항이 갱신될 λ•Œ μ‹€ν–‰λ˜λŠ” 콜백과 ν•¨κ»˜ ν˜ΈμΆœν•©λ‹ˆλ‹€. module.hot.disposeλŠ” 이 λͺ¨λ“ˆμ΄ ꡐ체될 λ•Œ ν˜ΈμΆœλ˜λŠ” μ½œλ°±μ„ λ°›μ•„λ“€μž…λ‹ˆλ‹€.

if (module.hot) {
  module.hot.dispose(function () {
    // λͺ¨λ“ˆμ΄ 곧 폐기 됨
  });

  module.hot.accept(function () {
    // λͺ¨λ“ˆμ΄λ‚˜ λͺ¨λ“ˆμ˜ 의쑴 사항이 곧 κ°±μ‹  됨
  });
}

Safe Write

일뢀 ν…μŠ€νŠΈ νŽΈμ§‘κΈ°μ™€ IDEλŠ” safe write라고 λΆ€λ₯΄λŠ” κΈ°λŠ₯으둜 νŒŒμΌμ„ λ³΅μ œν•œ λ‹€μŒ μ €μž₯ν•  λ•Œ 이름을 λ°”κΎΈλŠ” λ°©μ‹μœΌλ‘œ 데이터 μœ μ‹€μ„ λ°©μ§€ν•©λ‹ˆλ‹€.

ν•« λͺ¨λ“ˆ λ¦¬ν”Œλ ˆμ΄μŠ€λ¨ΌνŠΈ(HMR)λ₯Ό μ‚¬μš©ν•  λ•Œ 이 κΈ°λŠ₯은 μžλ™ 파일 λ³€κ²½ 감지λ₯Ό λ§‰μ•„λ²„λ¦½λ‹ˆλ‹€. safe write κΈ°λŠ₯을 λΉ„ν™œμ„±ν™” ν•˜λ €λ©΄ μ•„λž˜ μ œμ‹œλœ 방법을 μ‚¬μš©ν•˜μ„Έμš”.