study/ts

๐Ÿ“Œ Webpack๊ณผ TypeScript๋กœ ๋งŒ๋“œ๋Š” ์›น์•ฑ ์บ˜๋ฆฐ๋” ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ฐœ๋ฐœ ์‹œ๋ฆฌ์ฆˆ - Webpack ์ œ๋Œ€๋กœ ์ดํ•ดํ•˜๊ธฐ – ๋ฒˆ๋“ค๋ง ๊ฐœ๋…๊ณผ ์„ค์ • ํŒŒ์ผ ์™„์ „ ๋ถ„์„

octo54 2025. 3. 24. 09:53
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ 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๊ณผ ํƒ€์ž…์„ ์—ฐ๊ฒฐํ•ด๋ด…๋‹ˆ๋‹ค.
๊ถ๊ธˆํ•œ ์ ์€ ๋Œ“๊ธ€๋กœ ๋‚จ๊ฒจ์ฃผ์„ธ์š”! ๐Ÿ™Œ