#SaveMyanmar โœŠ๐Ÿพ 2021๋…„ 2์›”์— ๋‚ด๊ฐ€ ๋ฐฐ์šด ๊ฒƒ๋“ค

#SaveMyammar

๋‘ ๋ชจ๋“ˆ ๋ฐฉ์‹์˜ ์‚ฌ์šฉ๋ฒ• ์ •๋„์˜ ์ฐจ์ด๋งŒ ์•Œ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ Nodejs์— ES Modules๋„์ž…์„ ๊ณ ๋ คํ•ด๋ณด๋ฉด์„œ ๋‘ ๋ชจ๋“ˆ์ด ๋ญ๊ฐ€ ๋‹ค๋ฅธ๊ฑด์ง€ ๊ถ๊ธˆํ•ด์„œ ์•Œ์•„๋ณด๋‹ค๊ฐ€ ๋ฐœ๊ฒฌํ•œ ๊ธ€.

์šฐ๋ฆฌํŒ€๋„ ์ผ๋ถ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ์ ํŠธ์— ์„ผํŠธ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด์„œ ์žฌ๋ฏธ์žˆ๊ฒŒ ๋ณธ ๊ธ€์ด๋‹ค. ์„ผํŠธ๋ฆฌ๋Š” ์—๋Ÿฌ ํƒ์ง€ ๋ฐ ๊ด€๋ฆฌ๋ฅผ ์šฉ์ดํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ๋„๊ตฌ์ด๋‹ค. ํŠนํžˆ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—๋Ÿฌ์˜ ์ƒ๋‹น๋ถ€๋ถ„์€ ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ €์˜ ์—”์ง„์—์„œ ์‹คํ–‰ ์‹œ ์ผ์–ด๋‚˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ์—๋Ÿฌ๋ฅผ ์ถ”์ ํ•˜๋Š” ๊ฒƒ์€ ํ…Œ์ŠคํŠธ๋งŒ์œผ๋กœ๋Š” ์ปค๋ฒ„ํ•˜๊ธฐ ์–ด๋ ค์šด๋ฐ ์„ผํŠธ๋ฆฌ๊ฐ™์€ ๋„๊ตฌ๊ฐ€ ๋งค์šฐ ์œ ์šฉํ•˜๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ์—๋Ÿฌ๋ฅผ ํƒ์ง€ํ•˜๋Š” ๊ธฐ๋Šฅ ๋ง๊ณ ๋„ ๊ด€๋ จ๋œ ๊ธฐ๋Šฅ๋“ค์ด ๋งŽ๋‹ค(์Šฌ๋ž™,๊นƒํ—™๊ณผ์˜ ํ†ตํ•ฉ์ด๋ผ๋“ ์ง€..).์ด ๊ธ€์€ ์„ผํŠธ๋ฆฌ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ๋œฏ์–ด๋ณด๊ณ  ์„ผํŠธ๋ฆฌ๊ฐ€ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์—๋Ÿฌ๋ฅผ ํ›„ํ‚นํ•˜๋Š”์ง€ ์„ค๋ช…ํ•œ๋‹ค.

ํฐ ์Šค์ผ€์ผ์˜ Vue.js ํ”„๋กœ์ ํŠธ์—์„œ ์œ ์šฉํ•œ ํด๋”๊ตฌ์กฐ ์‚ฌ๋ก€์ด๋‹ค. ๋ชจ๋“ˆ(modules)๊ณผ ๋ทฐ(views)๋กœ ๋ถ„๋ฆฌํ•œ ๋ถ€๋ถ„์ด ๋ˆˆ์—ฌ๊ฒจ๋ณผ ๋งŒ ํ•˜๋‹ค.

์›นํŽ™5์˜ Module Federation ์„ ์‚ฌ์šฉํ•œ ๋งค์šฐ ์‹ฌํ”Œํ•˜๊ฒŒ ๊ตฌํ˜„ํ•œ ๋งˆ์ดํฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ์˜ˆ์ œ๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ์žˆ๋‹ค. Vue3 + TypeScript ๊ธฐ๋ฐ˜์˜ ์„ค๋ช…์ด๋‹ค. ์‹ค์ œ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๊ธฐ ๊นŒ์ง€๋Š” ์•„๋งˆ๋„ ์‰ฝ์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค. ์ƒํƒœ๊ด€๋ฆฌ๋‚˜ ์—ฌํƒ€์˜ ์˜์กด์„ฑ๋“ค์„ ์–ด๋–ป๊ฒŒ ๊ณต์œ ํ• ์ง€, ๋ฆฌ๋ชจํŠธ ์ ‘๊ทผ ๋ณด์•ˆ์„ ์–ด๋–ปํ•ด ํ• ์ง€ ๋“ฑ๋“ฑ.

๋‘˜ ๋ชจ๋‘ ๊ธฐ๋ณธ ํ”„๋กœ์ ํŠธ๋ฅผ ๋น ๋ฅด๊ฒŒ ์ƒ์„ฑํ•˜๊ณ  ๊ฐœ๋ฐœ์„œ๋ฒ„ ๋ฐ ๋นŒ๋“œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๋„๊ตฌ์ด๋‹ค. Vite๋Š” Vue CLI์™€ ๋‹ค๋ฅด๊ฒŒ Webpack์„ ๊ธฐ๋ฐ˜์œผ๋กœํ•˜์ง€ ์•Š์œผ๋ฉฐ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋„ค์ดํ‹ฐ๋ธŒ ES ๋ชจ๋“ˆ์„ ํ™œ์šฉํ•˜๋Š” ์ž์ฒด ๊ฐœ๋ฐœ ์„œ๋ฒ„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ์ด ์•„ํ‚คํ…์ฒ˜๋Š” Webpack์˜ ๊ฐœ๋ฐœ ์„œ๋ฒ„๋ณด๋‹ค ํ›จ์”ฌ ๋” ๋น ๋ฅธ ์†๋„๋ฅผ ์ œ๊ณตํ•˜๋ฉฐ ๋นŒ๋“œ๋ฅผ ์œ„ํ•ด Rollup์„ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ์ ๋„ ๋น ๋ฅธ ์†๋„์— ํ•œ ๋ชซ ํ•œ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ Vite ๋„ ๋‹จ์ ์ด ์กด์žฌํ•˜๋Š”๋ฐ ๋‹ค๋ฅธ ์ ์€ ํฌ๊ฒŒ ์ค‘์š”ํ•œ๊ฐ€ ์‹ถ๊ณ  Vue3์—์„œ๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ์ด ํฐ ๋‹จ์ . ์ƒˆ๋กœ ์‹œ์ž‘ํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋‚˜ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๊ฐ€ ์•„๋‹ˆ๊ณ ์„œ์•ผ Vue3๋ฅผ ๋„์ž…ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๊ฐ€ ์–ผ๋งˆ๋‚˜ ์žˆ์„๊นŒ ์‹ถ๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ์กด Vueํ”„๋กœ์ ํŠธ๋Š” Vue CLI๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ๋ฐ–์— ์—†์„๋“ฏ ํ•˜๋‹ค.

๋”๋ถˆ์–ด Vite 2.0 ์ด ๋ฆด๋ฆฌ์ฆˆ ๋˜์—ˆ๋‹ค๋Š” ์†Œ์‹๋„ ๋“ค๋ ค์™”๋‹ค. ์ฃผ๋ชฉํ•  ๋งŒํ•œ ์ ์€ Vue3 ๋ฟ ์•„๋‹ˆ๋ผ React, Preact, Lit Element ๋“ฑ์—์„œ๋„ ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

๋‚ด๊ฐ€ ๋งก๊ณ  ์žˆ๋Š” Nodejs ํ”„๋กœ์ ํŠธ๊ฐ€ ์—ฌ๋Ÿฟ์žˆ๋Š”๋ฐ ๋กœ๊น… ๊ด€๋ จํ•ด์„œ ๊ณ ๋ฏผ์„ ๋งŽ์ด ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค๊ฐ€ ์ด๋ฒˆ์— ์กฐ๊ธˆ์”ฉ ์ž๋ฃŒ๋ฅผ ์ฐพ์•„๋ณด๊ณ  ์žˆ๋Š”๋ฐ ์ด ๊ธ€์€ ๊ทธ ์ค‘ ํ•˜๋‚˜. ์ค‘์š”ํ•œ๊ฒƒ์€ console.log ์‚ฌ์šฉ์„ ์ง€์–‘ํ•˜๊ณ  ์ข€ ๋” ์ผ๊ด€๋˜๊ณ  ์ฒด๊ณ„์ ์ด๊ณ  ๋ณด๊ธฐ ์ข‹์€ ๋กœ๊น…์„ ํ•˜๋Š”๊ฒƒ.

Vue.js์˜ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ Vuex 4 ๊ฐ€ ๋ฆด๋ฆฌ์ฆˆ ๋˜์—ˆ๋‹ค. ํ•ต์‹ฌ ๋‚ด์šฉ์€ vue3 ์ง€์›์ด๋‹ค.

์ด ๊ธ€์ด ๋งˆ์Œ์— ๋“œ์…จ๋‹ค๋ฉด ๐Ÿ‘๐Ÿฝ๐Ÿ‘๐Ÿฝ์™€ ์ปคํ”ผํ•œ์ž” ํ›„์›ํ•˜๊ธฐ (์นด์นด์˜คํŽ˜์ด), ์ด๋ฉ”์ผ๋กœ ์†Œ์‹์„ ๋ฐ›์•„๋ณด๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด โœ‰๏ธ ์ด๋ฉ”์ผ ๊ตฌ๋…ํ•˜๊ธฐ ํ•ด์ฃผ์„ธ์š”. ๊ทธ๋ฆฌ๊ณ  ์ €ํฌ ํšŒ์‚ฌ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ํฌํ•จํ•œ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค ์ฑ„์šฉ์ค‘์ž…๋‹ˆ๋‹ค.

Vue.js ๊ด€๋ จ ์ด์•ผ๊ธฐ๋“ค | working at habitfactory.co | ์ปคํ”ผํ•œ์ž” ํ›„์›ํ•˜๊ธฐ https://bit.ly/355PDlu | ์ด๋ฉ”์ผ ๊ตฌ๋…ํ•˜๊ธฐ https://bit.ly/3ax32Fn

Vue.js ๊ด€๋ จ ์ด์•ผ๊ธฐ๋“ค | working at habitfactory.co | ์ปคํ”ผํ•œ์ž” ํ›„์›ํ•˜๊ธฐ https://bit.ly/355PDlu | ์ด๋ฉ”์ผ ๊ตฌ๋…ํ•˜๊ธฐ https://bit.ly/3ax32Fn