Skip to main content
pnpm build ๋ช…๋ น์–ด๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์— ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋„๋ก ์ตœ์ ํ™”๋œ ์ฝ”๋“œ๋กœ ๋นŒ๋“œํ•ฉ๋‹ˆ๋‹ค. TypeScript๋ฅผ JavaScript๋กœ ์ปดํŒŒ์ผํ•˜๊ณ , ๋ถˆํ•„์š”ํ•œ ์ฝ”๋“œ๋ฅผ ์ œ๊ฑฐํ•˜์—ฌ ์‹คํ–‰ ์†๋„๋ฅผ ๋†’์ž…๋‹ˆ๋‹ค.

๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•

๋นŒ๋“œ๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด dist ๋””๋ ‰ํ† ๋ฆฌ์— ์ตœ์ ํ™”๋œ JavaScript ํŒŒ์ผ์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.

ํ•˜์œ„ ๋ช…๋ น์–ด

API์™€ Web์„ ๋ถ„๋ฆฌํ•ด์„œ ๋นŒ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋นŒ๋“œ ๊ณผ์ •

๋นŒ๋“œ๋Š” ๋‹ค์Œ ๋‹จ๊ณ„๋กœ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค:

1. ๊ธฐ์กด ๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ ์ œ๊ฑฐ

์ด์ „ ๋นŒ๋“œ์˜ ์ž”์—ฌ ํŒŒ์ผ์„ ๊นจ๋—ํ•˜๊ฒŒ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.
์ œ๊ฑฐ๋˜๋Š” ๋””๋ ‰ํ† ๋ฆฌ:
  • dist/ - API ๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ
  • web/dist/ - Web ๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ
  • web-dist/ - ๋ณต์‚ฌ๋œ Web ๊ฒฐ๊ณผ๋ฌผ

2. API ๋นŒ๋“œ ์„ค์ • ์ค€๋น„

API ๋นŒ๋“œ์— ์‚ฌ์šฉํ•  tsdown ์„ค์ • ํŒŒ์ผ์„ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
์ปค์Šคํ…€ ์„ค์ • ์‚ฌ์šฉ:
๊ธฐ๋ณธ ์„ค์ • ์‚ฌ์šฉ:

3. API ํ”„๋กœ์ ํŠธ ๋นŒ๋“œ

TypeScript๋ฅผ JavaScript๋กœ ์ปดํŒŒ์ผํ•ฉ๋‹ˆ๋‹ค.
1

๋นŒ๋“œ ์‹œ์ž‘

๐Ÿ“ฆ API Server Building production-ready API /path/to/project
2

์ปดํŒŒ์ผ ์‹คํ–‰

bash tsc --noEmit && pnpm exec tsdown --config /path/to/tsdown.config.ts ๋นŒ๋“œ ๋„๊ตฌ: tsdown + OXC/Rolldown
3

์™„๋ฃŒ

โœ“ build completed (2.5s) โœ“ API build completed in 2.5s

4. Web ํ”„๋กœ์ ํŠธ ๋นŒ๋“œ (์„ ํƒ)

Web ํ”„๋กœ์ ํŠธ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ๋นŒ๋“œํ•˜๊ณ  API ํ”„๋กœ์ ํŠธ๋กœ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค.
1

๋นŒ๋“œ ์‹œ์ž‘

๐ŸŒ Web Application Building static web assets /path/to/project/web
2

Vite ๋นŒ๋“œ

bash vite build ์ •์  ์—์…‹์„ ์ตœ์ ํ™”ํ•˜๊ณ  ๋ฒˆ๋“ค๋งํ•ฉ๋‹ˆ๋‹ค.
3

ํŒŒ์ผ ๋ณต์‚ฌ

bash web/dist โ†’ web-dist API ์„œ๋ฒ„์—์„œ ์„œ๋น™ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค.
4

์™„๋ฃŒ

โœ“ build completed (8.2s) โœ“ copy completed (0.1s) โœ“ Web build completed in 8.3s
Web ๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ:
  • web/dist/ - ์›๋ณธ ๋นŒ๋“œ ๊ฒฐ๊ณผ
  • web-dist/ - API ์„œ๋ฒ„์—์„œ ์„œ๋น™ํ•  ๋ณต์‚ฌ๋ณธ

๋นŒ๋“œ ์„ค์ •

API ๋นŒ๋“œ ์„ค์ • ์ปค์Šคํ„ฐ๋งˆ์ด์ง•

ํ”„๋กœ์ ํŠธ ๋ฃจํŠธ์— tsdown.config.ts ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜์—ฌ ๊ธฐ๋ณธ API ๋นŒ๋“œ๋ฅผ ์˜ค๋ฒ„๋ผ์ด๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
tsdown.config.ts
์ฃผ์š” ์˜ต์…˜:
tsdown.config.ts ํŒŒ์ผ์ด ์—†์œผ๋ฉด Sonamu๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ณธ API ๋นŒ๋“œ ์„ค์ •์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ

API ๋นŒ๋“œ ๊ฒฐ๊ณผ

ํŠน์ง•:
  • TypeScript โ†’ JavaScript ๋ณ€ํ™˜
  • ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ ๋ณ€ํ™˜ ์™„๋ฃŒ
  • ์†Œ์Šค๋งต ํฌํ•จ (.js.map)
  • Import ๊ฒฝ๋กœ ํ•ด์„ ์™„๋ฃŒ

Web ๋นŒ๋“œ ๊ฒฐ๊ณผ (์„ ํƒ)

ํŠน์ง•:
  • ์ฝ”๋“œ ์••์ถ• (minification)
  • ์—์…‹ ํ•ด์‹ฑ (cache busting)
  • Tree shaking (์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์ฝ”๋“œ ์ œ๊ฑฐ)

๋นŒ๋“œ ์ตœ์ ํ™”

1. ํƒ€์ž… ์ฒดํฌ ๋ถ„๋ฆฌ

๋นŒ๋“œ ์†๋„๋ฅผ ๋†’์ด๋ ค๋ฉด ํƒ€์ž… ์ฒดํฌ๋ฅผ ๋ณ„๋„๋กœ ์ˆ˜ํ–‰ํ•˜์„ธ์š”.

2. ์ฆ๋ถ„ ๋นŒ๋“œ

๋ณ€๊ฒฝ๋œ ํŒŒ์ผ๋งŒ ์žฌ๋นŒ๋“œํ•˜๋ ค๋ฉด ๊ฐœ๋ฐœ ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

3. ์บ์‹œ ํ™œ์šฉ

tsdown์€ ๋นŒ๋“œ ๊ฐ„ ์˜์กด์„ฑ ๋ถ„์„ ๊ฒฐ๊ณผ๋ฅผ ์žฌ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ์ œ ํ•ด๊ฒฐ

๋นŒ๋“œ ์‹คํŒจ

๋ฌธ์ œ: TypeScript ์—๋Ÿฌ๋กœ ๋นŒ๋“œ ์‹คํŒจ
ํ•ด๊ฒฐ:

tsdown ์„ค์ • ์—๋Ÿฌ

๋ฌธ์ œ: tsdown.config.ts ์„ค์ • ์˜ค๋ฅ˜
ํ•ด๊ฒฐ:

Web ๋นŒ๋“œ ์‹คํŒจ

๋ฌธ์ œ: Vite ๋นŒ๋“œ ์—๋Ÿฌ
ํ•ด๊ฒฐ:

๋นŒ๋“œ ํ›„ ์‹คํ–‰

๋นŒ๋“œ๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด start ๋ช…๋ น์–ด๋กœ ํ”„๋กœ๋•์…˜ ์„œ๋ฒ„๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.
ํ”„๋กœ๋•์…˜ ์‹คํ–‰์˜ ํŠน์ง•:
  • ๋น ๋ฅธ ์‹œ์ž‘: ์ปดํŒŒ์ผ์ด ์™„๋ฃŒ๋œ JavaScript ์‹คํ–‰
  • ๋‚ฎ์€ ๋ฉ”๋ชจ๋ฆฌ: TypeScript ๋ณ€ํ™˜ ์˜ค๋ฒ„ํ—ค๋“œ ์—†์Œ
  • ์†Œ์Šค๋งต ์ง€์›: ์—๋Ÿฌ ๋ฐœ์ƒ ์‹œ ์›๋ณธ ํŒŒ์ผ ์œ„์น˜ ํ‘œ์‹œ

์ง์ ‘ ์‹คํ–‰

pnpm start ๋Œ€์‹  Node.js๋กœ ์ง์ ‘ ์‹คํ–‰ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค:
์˜ต์…˜ ์„ค๋ช…:
  • --enable-source-maps: ์—๋Ÿฌ ๋ฐœ์ƒ ์‹œ ์›๋ณธ TypeScript ํŒŒ์ผ ์œ„์น˜ ํ‘œ์‹œ
  • dist/index.js: ๋นŒ๋“œ๋œ ์—”ํŠธ๋ฆฌํฌ์ธํŠธ

ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ๋กœ๋“œ

ํ™˜๊ฒฝ ๋ณ€์ˆ˜๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ:

CI/CD ์„ค์ •

CI/CD ํŒŒ์ดํ”„๋ผ์ธ์„ ๊ตฌ์„ฑํ•˜๋ฉด ์ฝ”๋“œ๋ฅผ ํ‘ธ์‹œํ•  ๋•Œ๋งˆ๋‹ค ์ž๋™์œผ๋กœ ๋นŒ๋“œํ•˜๊ณ  ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. GitHub Actions, GitLab CI, Jenkins ๋“ฑ ๋‹ค์–‘ํ•œ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์™œ CI/CD๊ฐ€ ํ•„์š”ํ•œ๊ฐ€?

GitHub Actions

GitHub Actions๋Š” GitHub์— ํ†ตํ•ฉ๋œ CI/CD ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค. .github/workflows/ ๋””๋ ‰ํ† ๋ฆฌ์— YAML ํŒŒ์ผ์„ ์ž‘์„ฑํ•˜์—ฌ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
.github/workflows/deploy.yml
์ฃผ์š” ๋‹จ๊ณ„ ์„ค๋ช…:
1

์ฝ”๋“œ ์ฒดํฌ์•„์›ƒ

actions/checkout@v3์„ ์‚ฌ์šฉํ•˜์—ฌ ์ €์žฅ์†Œ ์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.
2

pnpm ์„ค์น˜

pnpm/action-setup@v2๋กœ pnpm ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.
3

Node.js ์„ค์ •

actions/setup-node@v3์œผ๋กœ Node.js๋ฅผ ์„ค์น˜ํ•˜๊ณ  pnpm ์บ์‹œ๋ฅผ ํ™œ์„ฑํ™”ํ•ฉ๋‹ˆ๋‹ค. ์บ์‹œ ๋•๋ถ„์— ์˜์กด์„ฑ ์„ค์น˜๊ฐ€ ํ›จ์”ฌ ๋น ๋ฆ…๋‹ˆ๋‹ค.
4

์˜์กด์„ฑ ์„ค์น˜

pnpm install๋กœ ํ”„๋กœ์ ํŠธ ์˜์กด์„ฑ์„ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.
5

๋นŒ๋“œ

pnpm build๋กœ ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
6

๋ฐฐํฌ

๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ์„ ์„œ๋ฒ„๋กœ ์—…๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค. rsync, scp, FTP ๋“ฑ ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ• ์‚ฌ์šฉ ๊ฐ€๋Šฅ.

ํ…Œ์ŠคํŠธ ์ถ”๊ฐ€

๋ฐฐํฌ ์ „์— ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ๋ฒ„๊ทธ๋ฅผ ์กฐ๊ธฐ์— ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:
.github/workflows/deploy.yml

ํ™˜๊ฒฝ๋ณ„ ๋ฐฐํฌ

Staging๊ณผ Production ํ™˜๊ฒฝ์„ ๋ถ„๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:

Docker

Docker๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ผ๊ด€๋œ ์‹คํ–‰ ํ™˜๊ฒฝ์„ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ, ์Šคํ…Œ์ด์ง•, ํ”„๋กœ๋•์…˜ ๋ชจ๋‘ ๊ฐ™์€ ํ™˜๊ฒฝ์—์„œ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.
Dockerfile
๋ฉ€ํ‹ฐ์Šคํ…Œ์ด์ง€ ๋นŒ๋“œ์˜ ์žฅ์ :

Docker Compose

๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์™€ ํ•จ๊ป˜ ์‹คํ–‰ํ•˜๋ ค๋ฉด Docker Compose๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค:
docker-compose.yml
์‹คํ–‰:

์„ฑ๋Šฅ ๋น„๊ต

ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ๋Š” ๊ฐœ๋ฐœ ์„œ๋ฒ„๋ณด๋‹ค ํ›จ์”ฌ ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์ž…๋‹ˆ๋‹ค. ํ”„๋กœ๋•์…˜์ด ๋น ๋ฅธ ์ด์œ :
  1. ๋ฏธ๋ฆฌ ์ปดํŒŒ์ผ๋จ: TypeScript๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ณ€ํ™˜ํ•˜์ง€ ์•Š์Œ
  2. ์ฝ”๋“œ ์ตœ์ ํ™”: ๋ถˆํ•„์š”ํ•œ ์ฝ”๋“œ ์ œ๊ฑฐ, ์••์ถ•
  3. HMR ์˜ค๋ฒ„ํ—ค๋“œ ์—†์Œ: ํŒŒ์ผ ๊ฐ์‹œ ๋ฐ ์žฌ๋กœ๋”ฉ ๋น„์šฉ ์—†์Œ
  4. ํ”„๋กœ๋•์…˜ ๋ชจ๋“œ: Node.js์™€ ์˜์กด์„ฑ๋“ค์ด ์ตœ์ ํ™” ๋ชจ๋“œ๋กœ ์‹คํ–‰

์‹ค์ œ ์„ฑ๋Šฅ ์ธก์ •

๊ฐœ๋ฐœ ์„œ๋ฒ„์™€ ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ์˜ ์„ฑ๋Šฅ์„ ์ง์ ‘ ๋น„๊ตํ•ด๋ณด์„ธ์š”:
API ์‘๋‹ต ์‹œ๊ฐ„ ๋น„๊ต:

๋‹ค์Œ ๋‹จ๊ณ„

start

๋นŒ๋“œ๋œ ์„œ๋ฒ„ ์‹คํ–‰ํ•˜๊ธฐ

dev

๊ฐœ๋ฐœ ์„œ๋ฒ„๋กœ ๋Œ์•„๊ฐ€๊ธฐ