pnpm build ๋ช
๋ น์ด๋ ํ๋ก์ ํธ๋ฅผ ํ๋ก๋์
ํ๊ฒฝ์ ๋ฐฐํฌํ ์ ์๋๋ก ์ต์ ํ๋ ์ฝ๋๋ก ๋น๋ํฉ๋๋ค. TypeScript๋ฅผ JavaScript๋ก ์ปดํ์ผํ๊ณ , ๋ถํ์ํ ์ฝ๋๋ฅผ ์ ๊ฑฐํ์ฌ ์คํ ์๋๋ฅผ ๋์
๋๋ค.
๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
dist ๋๋ ํ ๋ฆฌ์ ์ต์ ํ๋ JavaScript ํ์ผ์ด ์์ฑ๋ฉ๋๋ค.
my-project/dist/ - ๋น๋ ๊ฒฐ๊ณผ๋ฌผJS
index.jsmodels/api/src/ - ์๋ณธ ์์คJSON
package.json๋น๋ ๊ณผ์
๋น๋๋ ๋ค์ ๋จ๊ณ๋ก ์งํ๋ฉ๋๋ค:1. ๊ธฐ์กด ๋น๋ ๊ฒฐ๊ณผ๋ฌผ ์ ๊ฑฐ
์ด์ ๋น๋์ ์์ฌ ํ์ผ์ ๊นจ๋ํ๊ฒ ์ ๊ฑฐํฉ๋๋ค.dist/- API ๋น๋ ๊ฒฐ๊ณผ๋ฌผweb/dist/- Web ๋น๋ ๊ฒฐ๊ณผ๋ฌผweb-build/- ๋ณต์ฌ๋ Web ๊ฒฐ๊ณผ๋ฌผ
2. SWC ์ค์ ํ์ผ ์ค๋น
๋น๋์ ์ฌ์ฉํ SWC ์ค์ ํ์ผ์ ๊ฒฐ์ ํฉ๋๋ค.3. API ํ๋ก์ ํธ ๋น๋
TypeScript๋ฅผ JavaScript๋ก ์ปดํ์ผํฉ๋๋ค.1
๋น๋ ์์
2
์ปดํ์ผ ์คํ
3
์๋ฃ
4. Web ํ๋ก์ ํธ ๋น๋ (์ ํ)
Web ํ๋ก์ ํธ๊ฐ ์๋ ๊ฒฝ์ฐ ๋น๋ํ๊ณ API ํ๋ก์ ํธ๋ก ๋ณต์ฌํฉ๋๋ค.1
๋น๋ ์์
2
Vite ๋น๋
3
ํ์ผ ๋ณต์ฌ
4
์๋ฃ
web/dist/- ์๋ณธ ๋น๋ ๊ฒฐ๊ณผweb-build/- API ์๋ฒ์์ ์๋นํ ๋ณต์ฌ๋ณธ
๋น๋ ์ค์
SWC ์ค์ ์ปค์คํฐ๋ง์ด์ง
ํ๋ก์ ํธ ๋ฃจํธ์.swcrc ํ์ผ์ ์์ฑํ์ฌ ๋น๋๋ฅผ ์ปค์คํฐ๋ง์ด์งํ ์ ์์ต๋๋ค.
.swcrc
| ์ต์ | ์ค๋ช | ๊ธฐ๋ณธ๊ฐ |
|---|---|---|
target | ์ปดํ์ผ ํ๊ฒ | es2022 |
decorators | ๋ฐ์ฝ๋ ์ดํฐ ์ง์ | true |
sourceMaps | ์์ค๋งต ์์ฑ | true |
keepClassNames | ํด๋์ค๋ช ๋ณด์กด | true |
๋น๋ ๊ฒฐ๊ณผ๋ฌผ
API ๋น๋ ๊ฒฐ๊ณผ
dist/JS
index.js - ์ํธ๋ฆฌํฌ์ธํธmodels/ - Model ํ์ผ๋คJS
user.model.jsJS
post.model.jsapi/ - API ๋ก์งJS
sonamu.jsentities/ - Entity ์ ์JS
entities.jspractices/ - Practice ์คํฌ๋ฆฝํธJS
p1-test.js- TypeScript โ JavaScript ๋ณํ
- ๋ฐ์ฝ๋ ์ดํฐ ๋ณํ ์๋ฃ
- ์์ค๋งต ํฌํจ (
.js.map) - Import ๊ฒฝ๋ก ํด์ ์๋ฃ
Web ๋น๋ ๊ฒฐ๊ณผ (์ ํ)
web-build/HTML
index.html - HTML ์ํธ๋ฆฌassets/ - ์ต์ ํ๋ ์์
JS
index-abc123.jsCSS
index-def456.cssICO
favicon.ico- ์ฝ๋ ์์ถ (minification)
- ์์ ํด์ฑ (cache busting)
- Tree shaking (์ฌ์ฉํ์ง ์๋ ์ฝ๋ ์ ๊ฑฐ)
๋น๋ ์ต์ ํ
1. ํ์ ์ฒดํฌ ๋ถ๋ฆฌ
๋น๋ ์๋๋ฅผ ๋์ด๋ ค๋ฉด ํ์ ์ฒดํฌ๋ฅผ ๋ณ๋๋ก ์ํํ์ธ์.2. ์ฆ๋ถ ๋น๋
๋ณ๊ฒฝ๋ ํ์ผ๋ง ์ฌ๋น๋ํ๋ ค๋ฉด ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์ฌ์ฉํ์ธ์.3. ์บ์ ํ์ฉ
SWC๋ ์๋์ผ๋ก ๋น๋ ์บ์๋ฅผ ์ฌ์ฉํฉ๋๋ค.๋ฌธ์ ํด๊ฒฐ
๋น๋ ์คํจ
๋ฌธ์ : TypeScript ์๋ฌ๋ก ๋น๋ ์คํจSWC ์ค์ ์๋ฌ
๋ฌธ์ :.swcrc ์ค์ ์ค๋ฅ
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
| ์ฅ์ | ์ค๋ช |
|---|---|
| ์์ ์ด๋ฏธ์ง ํฌ๊ธฐ | ๋น๋ ๋๊ตฌ๋ฅผ ์ต์ข ์ด๋ฏธ์ง์์ ์ ์ธ |
| ๋น ๋ฅธ ๋ฐฐํฌ | ์์ ์ด๋ฏธ์ง๋ pull/push๊ฐ ๋น ๋ฆ |
| ๋ณด์ | ๋ถํ์ํ ๊ฐ๋ฐ ๋๊ตฌ ์ ๊ฑฐ |
| ๋ ์ด์ด ์บ์ฑ | ์์กด์ฑ์ด ๋ณ๊ฒฝ๋์ง ์์ผ๋ฉด ์ฌ์ฌ์ฉ |
Docker Compose
๋ฐ์ดํฐ๋ฒ ์ด์ค์ ํจ๊ป ์คํํ๋ ค๋ฉด Docker Compose๋ฅผ ์ฌ์ฉํฉ๋๋ค:docker-compose.yml
์ฑ๋ฅ ๋น๊ต
ํ๋ก๋์ ๋น๋๋ ๊ฐ๋ฐ ์๋ฒ๋ณด๋ค ํจ์ฌ ๋น ๋ฅด๊ณ ํจ์จ์ ์ ๋๋ค.| ์ธก์ ํญ๋ชฉ | ๊ฐ๋ฐ ์๋ฒ | ํ๋ก๋์ ๋น๋ | ์ฐจ์ด |
|---|---|---|---|
| ์์ ์๊ฐ | 2-3์ด | 0.5์ด | 4-6๋ฐฐ ๋น ๋ฆ |
| ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ | 200MB | 100MB | 50% ์ ๊ฐ |
| ์์ฒญ ์ฒ๋ฆฌ | ๋๋ฆผ | ๋น ๋ฆ | 2-3๋ฐฐ ๋น ๋ฆ |
| ํ์ผ ํฌ๊ธฐ | ์๋ณธ | ์์ถ๋จ | 30-50% ์์ |
- ๋ฏธ๋ฆฌ ์ปดํ์ผ๋จ: TypeScript๋ฅผ ์ค์๊ฐ์ผ๋ก ๋ณํํ์ง ์์
- ์ฝ๋ ์ต์ ํ: ๋ถํ์ํ ์ฝ๋ ์ ๊ฑฐ, ์์ถ
- HMR ์ค๋ฒํค๋ ์์: ํ์ผ ๊ฐ์ ๋ฐ ์ฌ๋ก๋ฉ ๋น์ฉ ์์
- ํ๋ก๋์ ๋ชจ๋: Node.js์ ์์กด์ฑ๋ค์ด ์ต์ ํ ๋ชจ๋๋ก ์คํ