๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ์ •ํ™•ํžˆ webpack์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์–ด๋–ค ๋ถ€์กฑํ•œ ์ ์„ ์ฑ„์›Œ์ฃผ๋Š” ๊ฑธ๊นŒ?

'๋ชจ๋“ˆ'์ด๋ž€ ๋ง๊ณผ ํฌ๊ฒŒ ๊ด€๋ จ์ด ์žˆ๋Š” ๊ฑฐ ๊ฐ™๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์ •ํ™•ํžˆ ๋ชจ๋“ˆ์€ ์–ด๋–ค ๊ฑธ ๋œปํ•˜๋Š”์ง€, webpack์ด ๋‚˜์˜ค๊ฒŒ ๋œ ๋ฐฐ๊ฒฝ๋“ค์€ ์–ด๋–ค์ง€ ์•Œ์•„๋ณด์ž.

๋ชจ๋“ˆ (module)

modular programming ์€ ์†Œํ”„ํŠธ์›จ์–ด ๋””์ž์ธ ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜๋กœ ์–ด๋–ค ํ”„๋กœ๊ทธ๋žจ์˜ ๊ธฐ๋Šฅ๋“ค์„ ๊ฐ๊ฐ ๋…๋ฆฝ์ ์œผ๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ์ฆ‰ ํ”„๋กœ๊ทธ๋žจ์˜ ์–ด๋–ค ์„ธ๋ถ€์ ์ธ ๊ธฐ๋Šฅ์€ ํ•˜๋‚˜์˜ ์˜จ์ „ํ•œ ๋ชจ๋“ˆ๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. ์ž˜ ์งœ์—ฌ์ง„ ๋ชจ๋“ˆ์€ abstraction, encapsulation์ด ์•„์ฃผ ์ž˜ ๋˜์–ด์žˆ๋‹ค.
[์ถœ์ฒ˜] : modular programming ๋ž€?

์ด๋ ‡๊ฒŒ ํฐ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ธฐ๋Šฅ๋“ค๋กœ ์ž˜๊ฒŒ ์ชผ๊ฐœ์–ด ๊ฐœ๋ฐœํ•œ๋‹ค๋ฉด ์ฝ”๋“œ๋ฅผ ์œ ์ง€ ๋ณด์ˆ˜ ํ•˜๊ธฐ๋„ ์ข‹์•„์ง€๊ฒ ์ง€.!

์–ด์จŒ๋“ . webpack์ด ๋‚˜์˜ค๊ธฐ ์ „

NodeJS์˜ ๊ฒฝ์šฐ modular programming์„ ์ž์ฒด์ ์œผ๋กœ ์ง€์›ํ•˜๊ณ  ์žˆ๋Š” ๋ฐ˜๋ฉด, web์—์„œ์˜ ๋ชจ๋“ˆ ์ง€์›์€ ์•„์ฃผ ์ฒœ์ฒœํžˆ ์ง„ํ–‰๋˜๊ณ  ์žˆ๋‹ค. ๋ณต์žกํ•œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„  ๊ธฐ๋Šฅ์ด๋‚˜ ์ฝ”๋“œ๋“ค์„ ๋ชจ๋“ˆํ™”ํ•˜์—ฌ ํ•„์š”ํ•  ๋•Œ ๋ถˆ๋Ÿฌ์™€์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์„ ํ”ํ•˜๊ฒŒ ์ƒ๊ฐํ•˜๋Š”๋ฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ES6์—์„œ์•ผ ํ‘œ์ค€์œผ๋กœ ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” import, export ๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ๋‹ค. ๊ทธ ์ „๊นŒ์ง€๋Š” CommonJS์ด๋‚˜ AMD ๊ฐ™์€ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ๋งŒ๋“  ๋ชจ๋“ˆ ํŒจํ„ด์„ ์‚ฌ์šฉํ•ด์˜จ ๊ฒƒ ์ด๋‹ค.

๊ทธ ๋ณด๋‹ค ๋” ์ „์ธ CommonJS, AMD ๊ฐ™์€ ๋ฐฉ์‹๋„ ์—†์—ˆ์„ ๋•Œ๋Š”

1) ๊ฐ ๊ธฐ๋Šฅ ๋ณ„๋กœ script๋ฅผ ๋งŒ๋“ค๊ณ  ์ด๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐฉ๋ฒ•
2) ํ•˜๋‚˜์˜ ํฐ js ํŒŒ์ผ์— ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ๋‹ค ๋„ฃ๋Š” ๋ฐฉ๋ฒ•

์ด ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ์Šค์ผ€์ผ์ด ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค์–ด์•ผํ–ˆ๋‹ค.

  • 1๋ฒˆ์˜ ๊ฒฝ์šฐ ์ ์  ์Šค์ผ€์ผ์ด ์ปค์งˆ ์ˆ˜๋ก ๋” ๋งŽ์€ script๋ฅผ ๋กœ๋”ฉ ํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— network bottleneck์ด ์ƒ๊ฒผ๋‹ค.
  • ๊ทธ๋ ‡๋‹ค๊ณ  ํ•ด์„œ 2๋ฒˆ ์ฒ˜๋Ÿผ ํ•˜๋‚˜์˜ js ํŒŒ์ผ์— ์ฝ”๋“œ๋ฅผ ๋‹ค ๋„ฃ๊ธฐ์—๋Š” scope, size, ๊ฐ€๋…์„ฑ, ์œ ์ง€๋ณด์ˆ˜ ๋“ฑ์˜ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.

๐Ÿง ๊ทธ๋ž˜์„œ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ IIFEs

IIFEs๋Š” ์ฆ‰์‹œ์‹คํ–‰ํ•จ์ˆ˜๋กœ ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ IIFE๋กœ wrap ํ•˜๋ฉด ์ž์‹ ์˜ ์˜จ์ „ํ•œ scope๊ฐ€ ์ƒ๊ธฐ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ๊ธฐ๋Šฅ(ํŒŒ์ผ)๊ณผ์˜ ์ถฉ๋Œ์ด ์ƒ๊ธฐ์ง€ ์•Š๊ฒŒ ๋œ๋‹ค.
IIFEs ๋•Œ๋ฌธ์— Gulp, Grunt ๋“ฑ์˜ task runners ๋“ค์ด ์ƒ๊ธฐ๊ฒŒ ๋˜์—ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํˆด๋“ค์€ ํ”„๋กœ์ ํŠธ ํŒŒ์ผ์ด ์—ฐ๊ฒฐ๋˜๋„๋ก ๋„์™€์ฃผ์—ˆ๋‹ค.

ํ•˜์ง€๋งŒ IIFEs์™€ task runner๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ํ•˜๋‚˜์˜ ํŒŒ์ผ์„ ๋ณ€๊ฒฝํ•  ๋•Œ, ์ „์ฒด๋ฅผ ๋‹ค์‹œ rebuild ํ•ด์•ผํ–ˆ๋‹ค. ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐฉ์‹์€ script๋ฅผ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ์—ˆ์ง€๋งŒ ์ตœ์ ํ™”๋Š” ๋” ์–ด๋ ต๊ฒŒ ๋งŒ๋“ค์—ˆ๋‹ค. code๊ฐ€ ์‹ค์ œ๋กœ ์‚ฌ์šฉ๋˜๋Š”์ง€ ์•„๋‹Œ์ง€๋Š” ์•Œ๊ธฐ ์–ด๋ ค์› ๊ธฐ ๋•Œ๋ฌธ !

๐Ÿ˜Ž Hello, I'm NodeJs.

Nodejs๋Š” ๊ธฐ์กด์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‹คํ–‰๋˜๋˜ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์ด ์•„๋‹Œ ์ปดํ“จํ„ฐ์™€ ์„œ๋ฒ„์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” JavaScript ๋Ÿฐํƒ€์ž„ ์ด๋‹ค. webpack์€ Nodejs์—์„œ ์‹คํ–‰๋œ๋‹ค.

NodeJS๊ฐ€ ์ฒ˜์Œ release ๋˜์—ˆ์„ ๋•Œ, ์ƒˆ๋กœ์šด ๋ฌธ์ œ๋ฅผ ๋งž๋‹ฟ๋“œ๋ ค์•ผ ํ–ˆ๋‹ค. ๋ฐ”๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์ด ์•„๋‹Œ ๊ณณ์—์„œ ์‹คํ–‰๋œ๋‹ค๋Š” ๊ฒƒ์ด์˜€๊ณ , ์ด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ ์กฐ๊ฐ์ด ์ƒˆ๋กญ๊ฒŒ ๋กœ๋“œ๋˜์–ด์•ผ ํ•  ๋•Œ ๋ฌธ์ œ๊ฐ€ ๋๋‹ค. ์™œ๋ƒ๋ฉด script tag๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” html ํŒŒ์ผ์ด ์—†๊ธฐ ๋•Œ๋ฌธ.

๊ทธ ๋•Œ CommonJS๊ฐ€ ๋‚˜์™€์„œ require ์„ ์†Œ๊ฐœํ•˜์˜€๊ณ  ํ˜„์žฌ์žˆ๋Š” ํŒŒ์ผ์—์„œ ๋ชจ๋“ˆ์„ ๋กœ๋“œํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋˜๋ฉด ํ•„์š”์— ๋”ฐ๋ผ ๋ชจ๋“ˆ์„ ๋ถˆ๋Ÿฌ์™€์„œ ์‚ฌ์šฉํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ ๊ฐ„์˜ scope ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค.

ํ•˜์ง€๋งŒ, ๋ธŒ๋ผ์šฐ์ €๋Š” CommonJS๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— Browerify, RequireJS ๋“ฑ์ด ๋งŒ๋“ค์–ด์กŒ๊ณ  ์ด๋ฅผ ํ†ตํ•ด ๋ธŒ๋ผ์šฐ์ €์—์„œ๋„ CommonJS ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

ECMAscript module

๋งˆ์นจ๋‚ด ECMAScript ํ‘œ์ค€์œผ๋กœ web์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“ˆ์ด ๋‚˜์™”์ง€๋งŒ ์•„์ง ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์™„์ „ํ•˜๊ฒŒ ์ง€์›ํ•˜์ง€ ๋ชปํ•˜๊ณ  ์žˆ๊ณ  bundling์ด ์—ฌ์ „ํžˆ ๋น ๋ฅด๊ฒŒ ๋•Œ๋ฌธ์— bundling ํ•˜๋Š” ๊ฒƒ์„ ๋Œ€๋ถ€๋ถ„ ๊ถŒ์žฅํ•œ๋‹ค.

๊ทธ๋ž˜์„œ webpack์ด ํ•˜๋Š” ์ผ์€ ..?

๋ชจ๋“ˆ์„ ๋งŒ๋“ค ์ˆ˜ ๋„ ์žˆ์œผ๋ฉด์„œ, ๊ธฐ์กด์˜ ๋ชจ๋“ˆ ํ˜•์‹๋“ค๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , images, font ๊ฐ™์€ assets ๋“ฑ๋„ ๋™์‹œ์— ๋ชจ๋“ˆ๋กœ์จ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” tool์ด webpack์ด๋‹ค.

์ข€ ๋” ์ •ํ™•ํžˆ ๋งํ•˜๋ฉด, webpack์€ entry ํŒŒ์ผ ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ, ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์ฒด ๋ชจ๋“ˆ ๊ฐ„์˜ dependencies๋ฅผ ํ™•์ธํ•˜๋ฉฐ dependencies tree๋ฅผ ๋งŒ๋“ ๋‹ค. ์–ด๋–ค ๋ชจ๋“ˆ๋“ค์ด ์—ฐ๊ด€๋˜์–ด ์žˆ๋Š”์ง€ ํŒŒ์•…ํ•œ ํ›„ ํ•ด๋‹น tree ํ˜น์€ graph๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋‚˜์˜ ํฐ bundle ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด ์ค€๋‹ค.

  • ๊ทธ๋ž˜์„œ webpack์œผ๋กœ bundleํ•˜๋ฉด ๊ตฌ์ฒด์ ์œผ๋กœ ์–ด๋–ค๊ฒŒ ์ข‹์€์ง€ ๊ถ๊ธˆํ•ด์กŒ๋‹ค. ํฐ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ฝ”๋“œ๋ฅผ ์•Œ์•„์„œ ํ•˜๋‚˜์˜ bundle ํŒŒ์ผ๋กœ ์•Œ์•„์„œ ์••์ถ•ํ•ด์„œ ์ „๋‹ฌํ•ด์ฃผ๋‹ˆ ๊ฐ„ํŽธํ•˜๊ณ  ๋กœ๋”ฉ์ด ๋” ๋นจ๋ผ์กŒ๋‹ค๋Š” ๊ฑด ์•Œ๊ฒ ๋Š”๋ฐ ๋˜ ๋‹ค๋ฅธ ์ด์ ์ด ์žˆ์„๊นŒ ?
  • ์ด์ „์— IIFEs, CommonJS๋“ค๋กœ ๋ชจ๋“ˆํ™”ํ•˜์—ฌ ์‚ฌ์šฉํ•œ ์ฝ”๋“œ๋“ค์ด ๊ถ๊ธˆํ•˜๋‹ค.
  • abstraction, encapsulation์˜ ํŠน์„ฑ์„ ๊ฐ€์ง€๊ฒŒ ๋ชจ๋“ˆ์„ ์งœ๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ ?
  • gulp๋‚˜ grunt ๊ฐ™์€ task runners๋Š” ์ •ํ™•ํžˆ ์–ด๋–ค ์ˆœ์„œ๋กœ, ์–ด๋–ป๊ฒŒ ์—ฐ๊ฒฐ๋˜๋Š” ๊ฑธ๊นŒ?

[์ฐธ๊ณ ]