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 Zod AOT

validation.zodCompiler.api๊ฐ€ "aot"์ด๋ฉด sonamu build api๋Š” source config๋งŒ ์ฝ์–ด ์ •์ฑ…์„ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋‹จ๊ณ„์—์„œ๋Š” Sonamu.init()์ด๋‚˜ DB ์ดˆ๊ธฐํ™”๋ฅผ ์‹คํ–‰ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋นŒ๋“œ๋Š” sync๊ฐ€ ๋งŒ๋“  src/application/sonamu.validators.generated.ts์—๋งŒ explicit/compact/inline Rolldown plugin์„ ์ ์šฉํ•˜๋ฉฐ, ๋ณ€ํ™˜๋˜์ง€ ์•Š์€ compile() ๋˜๋Š” virtual runtime import๊ฐ€ ๋‚จ์œผ๋ฉด ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์กด custom tsdown.config.ts๋Š” ๊ณ„์† ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Sonamu๊ฐ€ API root์— ์ž„์‹œ wrapper config๋ฅผ ๋งŒ๋“ค๊ณ  ๊ธฐ์กด default export๋ฅผ ํ˜ธ์ถœํ•œ ๋’ค compiler plugin์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ์ฒด, ๋ฐฐ์—ด, ํ•จ์ˆ˜ํ˜• export์™€ ๊ธฐ์กด plugin ๋ฐฐ์—ด์„ ๋ณด์กดํ•˜๋ฉฐ build ์ข…๋ฃŒ ์‹œ wrapper๋ฅผ ์‚ญ์ œํ•ฉ๋‹ˆ๋‹ค. ์ง์ ‘ tsdown์„ ์‹คํ–‰ํ•˜๋ฉด ์ด wrapper์™€ stale registry ๊ฒ€์ฆ์„ ์šฐํšŒํ•ฉ๋‹ˆ๋‹ค. AOT ํ”„๋กœ์ ํŠธ์—์„œ๋Š” pnpm sonamu sync ํ›„ pnpm sonamu build api๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. ๊ธฐ์กด opt-in ํ”„๋กœ์ ํŠธ์—๋Š” zod-compiler@1.23.6 ๊ฐœ๋ฐœ ์˜์กด์„ฑ๋„ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ด ์˜์กด์„ฑ์€ AOT์—์„œ๋งŒ ํ•„์š”ํ•˜๋ฉฐ, JIT๋Š” Sonamu์˜ runtime ์˜์กด์„ฑ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. AOT๋ฅผ ๋˜๋Œ๋ฆฌ๋ ค๋ฉด ์„ค์ •๊ณผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์˜์กด์„ฑ์„ ์ œ๊ฑฐํ•œ ๋‹ค์Œ sync์™€ build๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. Sync๊ฐ€ ์ƒ์„ฑ๋œ registry๋ฅผ ์‚ญ์ œํ•˜๊ณ  build๋Š” ๊ธฐ์กด tsdown ๊ฒฝ๋กœ๋กœ ๋Œ์•„๊ฐ‘๋‹ˆ๋‹ค. Web๊ณผ Expo AOT๋Š” ์•„์ง ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. validation.zodCompiler.targets๋„ ์˜ค๋ฅ˜๋กœ ๊ฑฐ๋ถ€ํ•˜๋ฉฐ, ์ด๋ฒˆ ๋‹จ๊ณ„์—์„œ๋Š” 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

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