๐ Webpack๊ณผ TypeScript๋ก ๋ง๋๋ ์น์ฑ ์บ๋ฆฐ๋ ํ๋ฌ๊ทธ์ธ ๊ฐ๋ฐ ์๋ฆฌ์ฆ - Webpack ์ ๋๋ก ์ดํดํ๊ธฐ – ๋ฒ๋ค๋ง ๊ฐ๋ ๊ณผ ์ค์ ํ์ผ ์์ ๋ถ์
๐ Webpack๊ณผ TypeScript๋ก ๋ง๋๋ ์น์ฑ ์บ๋ฆฐ๋ ํ๋ฌ๊ทธ์ธ ๊ฐ๋ฐ ์๋ฆฌ์ฆ
โ 3ํธ: Webpack ์ ๋๋ก ์ดํดํ๊ธฐ – ๋ฒ๋ค๋ง ๊ฐ๋ ๊ณผ ์ค์ ํ์ผ ์์ ๋ถ์
์ด๋ฒ ๊ธ์์๋ Webpack์ ํต์ฌ ๊ฐ๋
์ธ ๋ฒ๋ค๋ง, ๋ชจ๋, ์์กด์ฑ ๊ทธ๋ํ, ๋ก๋, ํ๋ฌ๊ทธ์ธ์ ์ค์ ์ฝ๋์ ํจ๊ป ์ดํดํ๊ณ ,
์ฐ๋ฆฌ๊ฐ ์์ฑํ TypeScript ์ฝ๋๊ฐ ์ด๋ป๊ฒ ๋ธ๋ผ์ฐ์ ์์ ์คํ ๊ฐ๋ฅํ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํ๋๋์ง
Webpack์ด ์ด๋ค ์ญํ ์ ์ํํ๋์ง๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ์ค๋ช
ํ๊ฒ ์ต๋๋ค.
๐ฏ ๋ชฉํ
- Webpack์ ์ญํ ๊ณผ ์๋ ๋ฐฉ์ ์ดํด
- webpack.config.js์ ์ฃผ์ ์์ฑ ๋ถ์
- Webpack์์ ts-loader, dev-server, output ๊ตฌ์กฐ ์ค์ ์์ ์ ๋ณต
๐ง Webpack์ด๋?
Webpack์ ๋ชจ๋(Module)์ ํ๋์ ๋ฒ๋ค๋ก ๋ฌถ์ด์ฃผ๋ ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋๋ค.
โ๏ธ ์ ํ์ํ๊ฐ?
- ES Module ๋๋ CommonJS๋ก ๋ถ๋ฆฌ๋ ์๋ง์ ํ์ผ๋ค์ ํ๋๋ก ๋ฌถ์ด ๋ธ๋ผ์ฐ์ ์์ ํจ์จ์ ์ผ๋ก ์คํ
- ํธ๋ฆฌ ์์ดํน(Tree Shaking)์ผ๋ก ์ฌ์ฉํ์ง ์๋ ์ฝ๋ ์ ๊ฑฐ
- ๋ฒ๋ค ์ต์ ํ, ์ฝ๋ ์คํ๋ฆฌํ ๋ฑ ๊ฐ๋ฅ
๐ฆ ๊ธฐ๋ณธ ๊ฐ๋ ์ ๋ฆฌ
๊ฐ๋ ์ค๋ช
Entry | Webpack์ด ์์กด์ฑ ๋ถ์์ ์์ํ๋ ์ง์ ์ ํ์ผ (index.ts) |
Output | ์ต์ข ์ ์ผ๋ก ๋ฒ๋ค๋ ํ์ผ์ด ์์ฑ๋๋ ์์น (dist/bundle.js) |
Loader | TypeScript, SCSS ๋ฑ JS๊ฐ ์๋ ํ์ผ์ ์ฒ๋ฆฌํ๋ ๋๊ตฌ |
Plugin | ๋ฒ๋ค ์ต์ ํ, HTML ์์ฑ ๋ฑ ๋ค์ํ ๋ถ๊ฐ๊ธฐ๋ฅ ๋ด๋น |
DevServer | ๊ฐ๋ฐ ์ค ์ค์๊ฐ ๋น๋ ๋ฐ ํซ๋ฆฌ๋ก๋ ์ง์ ์๋ฒ |
๐ ํ๋ก์ ํธ ๊ตฌ์กฐ ๋ค์ ๋ณด๊ธฐ
calendar-plugin/
โโโ dist/ # ๋ฒ๋ค ๊ฒฐ๊ณผ (์๋ ์์ฑ)
โโโ src/
โ โโโ index.ts # TypeScript ์ง์
์
โโโ index.html # ํ
์คํธ์ฉ HTML
โโโ tsconfig.json
โโโ webpack.config.js
โโโ package.json
๐งช Webpack ์ค์ ํ์ผ ๋ถ์
โ webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.ts", // ์ง์
์
mode: "development", // ๊ฐ๋ฐ ๋ชจ๋ (production ์ ์ต์ ํ)
module: {
rules: [
{
test: /\.ts$/, // .ts ํ์ผ์ ๋ํด
use: "ts-loader", // ts-loader๋ก ์ฒ๋ฆฌ
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".ts", ".js"], // import ์ ํ์ฅ์ ์๋ต ํ์ฉ
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"), // ๋ฒ๋ค ํ์ผ ์ ์ฅ ์์น
},
devServer: {
static: "./dist", // ์ ์ ํ์ผ ์ ๊ณต ์์น
port: 8080,
open: true,
hot: true, // HMR (Hot Module Replacement)
},
};
๐ง ํต์ฌ ์ค์ ํญ๋ชฉ ์ค๋ช
โ Entry: entry: "./src/index.ts"
- Webpack์ด ๋ชจ๋ ๋ถ์์ ์์ํ ๊ธฐ์ค ํ์ผ์ ๋๋ค.
โ Output
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
}
- ๋ฒ๋ค ๊ฒฐ๊ณผ๋ฌผ์ด ์ ์ฅ๋ ์์น์ ํ์ผ๋ช ์ ์ง์ ํฉ๋๋ค.
โ Module + Loader
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader"
}
]
}
- .ts ํ์ผ์ ts-loader๋ฅผ ํตํด JS๋ก ๋ณํํฉ๋๋ค.
โ DevServer
devServer: {
static: "./dist",
hot: true
}
- ์ค์๊ฐ ์ฝ๋ ๋ฐ์๊ณผ ์๋ ์๋ก๊ณ ์นจ์ ์ ๊ณตํฉ๋๋ค.
๐ ts-loader vs babel-loader
ํญ๋ชฉ ts-loader babel-loader
ํน์ง | TypeScript ์ปดํ์ผ | ES6+ ๋ฌธ๋ฒ ๋ณํ |
์ฌ์ฉ ๋ชฉ์ | ํ์ ๊ฒ์ฌ ํฌํจ | ๋ ๊ฑฐ์ ๋ธ๋ผ์ฐ์ ๋์ |
ํจ๊ป ์ฌ์ฉ | tsconfig.json | .babelrc, @babel/preset-typescript |
์ฐ๋ฆฌ์ ํ๋ก์ ํธ์์๋ ts-loader๋ง์ผ๋ก ์ถฉ๋ถํฉ๋๋ค.
โ ์ค์ต: ์ฝ๋ ์์ & ๋ฐ์ ํ์ธ
src/index.ts
const root = document.getElementById("calendar-root");
if (root) {
root.innerHTML = "<h2>๐
Webpack ๋ฒ๋ค๋ง ์์ฑ!</h2>";
}
npm run dev
๋ธ๋ผ์ฐ์ ์์ localhost:8080 ์ ์ → ์๋์ผ๋ก "๐ Webpack ๋ฒ๋ค๋ง ์์ฑ!" ๋ฉ์์ง ์ถ๋ ฅ๋๋ฉด ์ฑ๊ณต!
๐ ๋น๋ ๊ฒฐ๊ณผ ํ์ธ
npm run build
dist/bundle.js ํ์ผ์ด ์์ฑ๋๋ฉฐ, ์ค์ ์๋น์ค์ ์ฌ์ฉ ๊ฐ๋ฅํ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค์ด ์ค๋น๋ฉ๋๋ค.
๐ก Webpack๊ณผ TypeScript์ ํ๋ฆ ์์ฝ
[index.ts] --ts-loader→ [JavaScript ๋ชจ๋] --Webpack→ [bundle.js] → ๋ธ๋ผ์ฐ์ ์คํ
Webpack์ ์ฐ๋ฆฌ์ TypeScript ์ฝ๋๋ฅผ ๋ธ๋ผ์ฐ์ ๊ฐ ์คํํ ์ ์๋ JS ํ์ผ๋ก ๋ง๋๋ ํต์ฌ ๋๊ตฌ์ ๋๋ค.
๐ ํ์ ์ฐธ๊ณ ์๋ฃ
๋ค์ ํธ ์๊ณ :
๐ 4ํธ – ์บ๋ฆฐ๋ ํ๋ฌ๊ทธ์ธ ๊ตฌ์กฐ ์ค๊ณ: ๋ ์ง ๋ ๋๋ง์ ์ํ UI ๊ธฐ๋ณธ ๊ตฌ์ฑ
์ค์ ์บ๋ฆฐ๋๋ฅผ ์ด๋ป๊ฒ ๋ ๋๋งํ ์ง ์ค๊ณํ๋ฉฐ DOM๊ณผ ํ์
์ ์ฐ๊ฒฐํด๋ด
๋๋ค.
๊ถ๊ธํ ์ ์ ๋๊ธ๋ก ๋จ๊ฒจ์ฃผ์ธ์! ๐