๐Ÿ”ฅ ๋น ๋ฅธ ๋ชจ๋“ˆ ๊ต์ฒด(HMR)

๋น ๋ฅธ ๋ชจ๋“ˆ ๊ต์ฒด(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๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๊ธฐ๋Šฅ์œผ๋กœ ํŒŒ์ผ์„ ๋ณต์ œํ•œ ๋‹ค์Œ ์ €์žฅํ•  ๋•Œ ์ด๋ฆ„์„ ๋ฐ”๊พธ๋Š” ๋ฐฉ์‹์œผ๋กœ ๋ฐ์ดํ„ฐ ์œ ์‹ค์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.

๋น ๋ฅธ ๋ชจ๋“ˆ ๊ต์ฒด๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ด ๊ธฐ๋Šฅ์€ ์ž๋™ ํŒŒ์ผ ๋ณ€๊ฒฝ ๊ฐ์ง€๋ฅผ ๋ง‰์•„๋ฒ„๋ฆฝ๋‹ˆ๋‹ค. safe write ๊ธฐ๋Šฅ์„ ๋น„ํ™œ์„ฑํ™” ํ•˜๋ ค๋ฉด ์•„๋ž˜ ์ œ์‹œ๋œ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜์„ธ์š”.