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์ ํตํ์ฌ, ์์์ ํ์ํ ํ์ด์ง์ ๋ฐ๋ผ ๋ถ๋ฆฌํ๊ณ ์ต์ ํํ ์ ์๋ค.
โข
๊ธฐ์กด์ ์น ๊ฐ๋ฐ ์๋ํ ๋๊ตฌ๋ค์ ์ฅ์ ์ ํก์ํ๋ฉฐ ์น ๊ฐ๋ฐ ์์
์ ์๋ํ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํ๋ค.
์ฐธ๊ณ ๋งํฌ
โข
โข