pnpm dev λͺ
λ Ήμ΄λ **Hot Module Replacement(HMR)**λ₯Ό μ§μνλ κ°λ° μλ²λ₯Ό μμν©λλ€. μ½λλ₯Ό μμ νλ©΄ μλ²λ₯Ό μ¬μμνμ§ μκ³ λ λ³κ²½μ¬νμ΄ μ¦μ λ°μλ©λλ€.
κΈ°λ³Έ μ¬μ©λ²
κ°λ° μλ²κ° μμλλ©΄ λ€μ κΈ°λ₯μ μ¬μ©ν μ μμ΅λλ€:
- μλ μ¬μμ: μ½λ λ³κ²½ μ μλμΌλ‘ μλ² μ¬μμ
- TypeScript μ§μ: .ts νμΌμ λ°λ‘ μ€ν
- μμ€λ§΅ μ§μ: μλ¬ λ°μ μ μ νν μ€ λ²νΈ νμ
- ν€λ³΄λ λ¨μΆν€: λΉ λ₯Έ μμ
μ μν λ¨μΆν€
νμ λͺ
λ Ήμ΄
APIμ Webμ λΆλ¦¬ν΄μ μ€νν μ μμ΅λλ€.
| λͺ
λ Ήμ΄ | μ€λͺ
|
|---|
pnpm dev | API + Web ν΅ν© κ°λ° μλ² (κΈ°λ³Έ) |
pnpm dev api | API μ μ© κ°λ° μλ² (ν΅ν© μΉ μλ² λΉνμ±ν) |
pnpm dev web | Vite κ°λ° μλ² λ¨λ
μ€ν |
APIμ Webμ λ³λ ν°λ―Έλμμ μ€ννκΈ°:
# ν°λ―Έλ 1: API μλ²
pnpm dev api
# ν°λ―Έλ 2: Web κ°λ° μλ²
pnpm dev web
pnpm dev webμ -- λ€μ μΈμλ₯Ό Viteμ κ·Έλλ‘ μ λ¬ν©λλ€. μλ₯Ό λ€μ΄ ν¬νΈλ₯Ό λ³κ²½νλ €λ©΄: bash pnpm dev web -- --port 5174
λμ μ리
pnpm devλ λ΄λΆμ μΌλ‘ λ€μ λꡬλ€μ μ¬μ©ν©λλ€:
| λꡬ | μν | μ 곡 |
|---|
@sonamu-kit/hmr-runner | HMR μ€ν μμ§ | Sonamu |
@sonamu-kit/ts-loader | TypeScript λ‘λ | Sonamu |
@sonamu-kit/hmr-hook | HMR ν
| Sonamu |
μ€μ: μ΄ ν¨ν€μ§λ€μ Sonamuκ° μλμΌλ‘ μ 곡νλ―λ‘ λ³λλ‘ μ€μΉν νμκ° μμ΅λλ€.
μ€ν κ³Όμ
src/index.tsλ₯Ό μνΈλ¦¬ν¬μΈνΈλ‘ μ€ν
- TypeScript νμΌμ μ¦μ λ³ννμ¬ μ€ν
- νμΌ λ³κ²½ κ°μ§
- λ³κ²½λ λͺ¨λλ§ κ΅μ²΄ (HMR)
- μ 체 μ¬μμμ΄ νμν κ²½μ°μλ§ μ¬μμ
ν€λ³΄λ λ¨μΆν€
κ°λ° μλ² μ€ν μ€ λ€μ λ¨μΆν€λ₯Ό μ¬μ©ν μ μμ΅λλ€:
| λ¨μΆν€ | κΈ°λ₯ | μ€λͺ
|
|---|
r | μ¬μμ | μλ²λ₯Ό μλμΌλ‘ μ¬μμν©λλ€ |
c | νλ©΄ μ§μ°κΈ° | ν°λ―Έλ νλ©΄μ μ§μμ€λλ€ |
f | κ°μ μ¬μμ | sonamu.lock νμΌμ μμ νκ³ μ¬μμν©λλ€ |
Enter | ν
μ€νΈ | ν€ λ°μΈλ© ν
μ€νΈμ© |
Ctrl+F Ctrl+F | μ
λ°μ΄νΈ | Git pull, ν¨ν€μ§ μ€μΉ, λΉλ ν μ¬μμ |
λ¨μΆν€ μ¬μ© μμ
μλ² μ¬μμ:
# ν°λ―Έλμμ κ°λ° μλ² μ€ν μ€
[μλ² μ€ν μ€...]
# 'r' ν€ μ
λ ₯
r
# μλ² μ¬μμλ¨
π Restarting server...
κ°μ μ¬μμ (μΊμ μ΄κΈ°ν):
# 'f' ν€ μ
λ ₯
f
# sonamu.lock μμ ν μ¬μμ
ποΈ Removing sonamu.lock...
π Restarting server...
νκ²½ λ³μ
κ°λ° μλ²λ λ€μ νκ²½ λ³μλ₯Ό μλμΌλ‘ μ€μ ν©λλ€:
| λ³μ | κ° | μ€λͺ
|
|---|
NODE_ENV | development | κ°λ° λͺ¨λ νμ |
HOT | yes | HMR νμ±ν νλκ·Έ |
API_ROOT_PATH | νλ‘μ νΈ κ²½λ‘ | HMR λ£¨νΈ λλ ν 리 |
μ½λμμ νκ²½ λ³μλ₯Ό νμΈν μ μμ΅λλ€:
if (process.env.NODE_ENV === "development") {
console.log("κ°λ° λͺ¨λμ
λλ€");
}
if (process.env.HOT === "yes") {
console.log("HMRμ΄ νμ±νλμ΄ μμ΅λλ€");
}
HMR λμ λ°©μ
μλ μ¬μμλλ κ²½μ°
λ€μ νμΌμ μμ νλ©΄ μλ²κ° μλμΌλ‘ μ¬μμλ©λλ€:
- Entity νμΌ (
*.entity.ts)
- Model νμΌ (
*.model.ts)
- Config νμΌ (
sonamu.config.ts)
- Migration νμΌ
// user.model.ts μμ
class UserModelClass extends BaseModelClass {
@api({ httpMethod: "GET" })
async findById(id: number) {
return this.getPuri("r").where("id", id).first();
}
}
// νμΌ μ μ₯ β μλ² μλ μ¬μμ
μ¦μ λ°μλλ κ²½μ° (HMR)
λ€μ νμΌμ μμ νλ©΄ μλ² μ¬μμ μμ΄ μ¦μ λ°μλ©λλ€:
- μΌλ° λΉμ¦λμ€ λ‘μ§
- μ νΈλ¦¬ν° ν¨μ
- μλΉμ€ λ μ΄μ΄
// utils/helper.ts μμ
export function formatDate(date: Date) {
return date.toISOString();
}
// νμΌ μ μ₯ β μ¦μ λ°μ (μ¬μμ μμ)
λ¬Έμ ν΄κ²°
μλ²κ° μμλμ§ μλ κ²½μ°
λ¬Έμ : ν¬νΈκ° μ΄λ―Έ μ¬μ© μ€
Error: listen EADDRINUSE: address already in use :::3000
ν΄κ²°:
# ν¬νΈ μ¬μ© μ€μΈ νλ‘μΈμ€ μ’
λ£
lsof -ti:3000 | xargs kill -9
# λ€μ μμ
pnpm dev
HMRμ΄ μλνμ§ μλ κ²½μ°
λ¬Έμ : μ½λ λ³κ²½μ΄ λ°μλμ§ μμ
ν΄κ²°:
# 1. κ°μ μ¬μμ (f ν€)
f
# 2. λλ μλ μ¬μμ
pnpm dev
TypeScript μ€λ₯κ° λ°μνλ κ²½μ°
λ¬Έμ : νμ
μλ¬λ‘ μλ² μ€ν μ€ν¨
ν΄κ²°:
# νμ
체ν¬
pnpm tsc --noEmit
# λ¬Έμ μμ ν λ€μ μμ
pnpm dev
μ€μ ν
1. λΉ λ₯Έ κ°λ° μ¬μ΄ν΄
μ½λλ₯Ό μμ νκ³ λ°λ‘ ν
μ€νΈν μ μμ΅λλ€:
// API μλν¬μΈνΈ μμ
@api({ httpMethod: "GET" })
async getUsers() {
return this.findMany({ num: 10, page: 1 });
}
// μ μ₯ β μλ μ¬μμ β λ°λ‘ ν
μ€νΈ
2. λ‘κ·Έ νμΈ
κ°λ° μλ²λ λͺ¨λ λ‘κ·Έλ₯Ό μ½μμ μΆλ ₯ν©λλ€:
console.log("μ¬μ©μ μ‘°ν:", user);
logger.info("API νΈμΆ", { method, path });
logger.error("μλ¬ λ°μ", { error });
3. λλ²κΉ
μμ€λ§΅μ΄ νμ±νλμ΄ μμ΄ μ νν μ€ λ²νΈλ₯Ό νμΈν μ μμ΅λλ€:
Error: User not found
at UserModel.findById (user.model.ts:42:15)
at API.handler (index.ts:28:20)
νλ‘λμ
κ³Όμ μ°¨μ΄μ
| κΈ°λ₯ | κ°λ° μλ² | νλ‘λμ
|
|---|
| HMR | β
νμ±ν | β λΉνμ±ν |
| TypeScript | μ¦μ μ€ν | μ»΄νμΌ νμ |
| μμ€λ§΅ | μλ³Έ νμΌ | μμΆλ νμΌ |
| μ±λ₯ | λλ¦Ό | λΉ λ¦ |
| μλ¬ νμ | μμΈν¨ | κ°λ΅ν¨ |
κ°λ° μλ²λ νλ‘λμ
μμ μ¬μ©νμ§ λ§μΈμ!
- μ±λ₯μ΄ λλ¦Ό
- λ©λͺ¨λ¦¬ μ¬μ©λμ΄ λ§μ
- 보μμ μ·¨μ½
νλ‘λμ
μμλ pnpm build ν pnpm startλ₯Ό μ¬μ©νμΈμ.
λ€μ λ¨κ³
build
νλ‘λμ
λΉλνκΈ°
HMR
HMR μμ€ν
μμΈν μμ보기