Search
๐Ÿ“ฆ

Webpack & Module Bundler

Webpack์„ ์•Œ์•„์•ผ ํ•˜๋Š” ์ด์œ 

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ํด๋ผ์ด์–ธํŠธ ์ž‘์—… ๋ฆฌ์†Œ์Šค๋ฅผ ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ๋ฐฐํฌํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด

์ด ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ๋‚˜๋ฉด

Webpack์ด ํ•ด๊ฒฐํ•˜๋ ค๋Š” ๋ฌธ์ œ๋ฅผ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
์™œ Module Bundler๊ฐ€ ๋“ฑ์žฅํ•˜๊ฒŒ ๋˜์—ˆ๋Š”์ง€ ๊ทธ ๋ฐฐ๊ฒฝ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

Webpack & Module Bundler

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

Webpack์ด ํ•ด๊ฒฐํ•˜๋ ค๋Š” ๋ฌธ์ œ

1) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šค์ฝ”ํ”„

๊ธฐ๋ณธ์ ์œผ๋กœ ์—ฌ๋Ÿฌ๊ฐœ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜๋“ค์˜ ์Šค์ฝ”ํ”„๋Š” ์ „์—ญ์ ์œผ๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์ ‘๊ทผ์ด ์–ด๋””์„œ๋‚˜ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์šฉ์ดํ•จ์ด ์žˆ์ง€๋งŒ, ๊ทธ๋งŒํผ ๋ณ€์ˆ˜์˜ ์ถฉ๋Œ์ด๋‚˜ ๋กœ๋”ฉ ์ˆœ์„œ ๋“ฑ์— ์ทจ์•ฝํ•˜๋‹ค๋Š” ์—„์ฒญ๋‚œ ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Webpack์€ ์ด๋ฅผ ๋ชจ๋“ˆ์ด๋ผ๋Š” ๋‹จ์œ„๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค๋‹ˆ๋‹ค.

2) ๋ธŒ๋ผ์šฐ์ €๋ณ„ HTTP ์š”์ฒญ ์ˆซ์ž์˜ ์ œ์•ฝ

๋ธŒ๋ผ์šฐ์ €์—์„œ ํ•œ ๋ฒˆ์— ์„œ๋ฒ„๋กœ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋Š” HTTP ์š”์ฒญ ์ˆซ์ž๋Š” ์ œ์•ฝ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณดํ†ต ํฌ๋กฌ์˜ ๊ฒฝ์šฐ ํ•œ ๋ฒˆ์— 6๊ฐœ์˜ ์š”์ฒญ์„ ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ Webpack์„ ํ†ตํ•ด ๋ฒˆ๋“ค๋ง ํ•˜๋ฉด ์š”์ฒญํ•ด์•ผ ํ•˜๋Š” ํŒŒ์ผ์˜ ์ˆ˜ ๋˜ํ•œ ์ ์–ด์ง€๋ฏ€๋กœ ๋” ๋น ๋ฅธ ์„ฑ๋Šฅ ๊ฐœ์„ ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

3) Dynamic Loading & Lazy Loading

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

4) ์›น ๊ฐœ๋ฐœ ์ž‘์—… ์ž๋™ํ™”

์ง€๊ธˆ์€ live-server์™€ ๊ฐ™์€ ๋„๊ตฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ์†์‰ฝ๊ฒŒ ์ฝ”๋“œ์˜ ์ˆ˜์ •์„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ƒˆ๋กœ ๊ณ ์นจ ํ•˜์ง€ ์•Š์•„๋„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์ด์ „์— ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์—…๋ฌด๋ฅผ ํ•˜๋ฉฐ ๊ฐ€์žฅ ๋งŽ์ด ๋ฐ˜๋ณตํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ธŒ๋ผ์šฐ์ €์—์„œ์˜ ์ƒˆ๋กœ ๊ณ ์นจ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์›น ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœํ•˜๊ณ  ์›น ์„œ๋ฒ„์— ๋ฐฐํฌํ•  ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์€ ์ž‘์—…์ด ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.
โ€ข
HTML, CSS, JS ์••์ถ•
โ€ข
์ด๋ฏธ์ง€ ์••์ถ•
โ€ข
CSS ์ „์ฒ˜๋ฆฌ๊ธฐ ๋ณ€ํ™˜
์ด๋Ÿฌํ•œ ์ผ๋“ค์„ ์ž๋™ํ™” ํ•ด์ฃผ๋Š” ๋„๊ตฌ๋กœ์จ Grunt, Gulp ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋„๊ตฌ๋“ค๋„ ์—ฌ์ „ํžˆ ์‚ฌ์šฉ๋˜์ง€๋งŒ ํ”„๋กœ์ ํŠธ์˜ ๊ทœ๋ชจ์™€ ์ด ๋„๊ตฌ๋“ค๋กœ์จ๋Š” ์ง„ํ–‰ํ•˜๊ธฐ ์–ด๋ ค์šด ์›นํŒฉ๋งŒ์˜ ์ข…์†์„ฑ ๊ด€๋ฆฌ, Node.js ํ™˜๊ฒฝ์—์„œ์˜ ์‚ฌ์šฉ ๋“ฑ์˜ ์ด์œ ๋กœ ์ธํ•ด ์›นํŒฉ์ด ๋” ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ •๋ฆฌ

โ€ข
Webpack์€ ์˜์กด๊ด€๊ณ„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, CSS, ์ด๋ฏธ์ง€ ๋“ฑ์˜ ๋ฆฌ์†Œ์Šค๋“ค์„ ํ•˜๋‚˜(๋˜๋Š” ์—ฌ๋Ÿฌ ๊ฐœ)์˜ ํŒŒ์ผ๋กœ ๋ฒˆ๋“ค๋ง ํ•˜๊ฒŒ ๋„์™€์ค€๋‹ค.
โ€ข
Webpack์„ ํ†ตํ•˜์—ฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ๋“ค์„ ๋ชจ๋“ˆํ™”ํ•  ์ˆ˜ ์žˆ๊ณ , ์ด๋ฅผ ๋ฒˆ๋“ค๋ง ํ•˜์—ฌ ์ž์› ์š”์ฒญ์˜ ํšŸ์ˆ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.
โ€ข
Dynamic Loading & Lazy Loading์„ ํ†ตํ•˜์—ฌ, ์ž์›์„ ํ•„์š”ํ•œ ํŽ˜์ด์ง€์— ๋”ฐ๋ผ ๋ถ„๋ฆฌํ•˜๊ณ  ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค.
โ€ข
๊ธฐ์กด์˜ ์›น ๊ฐœ๋ฐœ ์ž๋™ํ™” ๋„๊ตฌ๋“ค์˜ ์žฅ์ ์„ ํก์ˆ˜ํ•˜๋ฉฐ ์›น ๊ฐœ๋ฐœ ์ž‘์—…์˜ ์ž๋™ํ™”๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•œ๋‹ค.

์ฐธ๊ณ  ๋งํฌ

โ€ข