Skip to main content
pnpm dev λͺ…λ Ήμ–΄λŠ” **Hot Module Replacement(HMR)**λ₯Ό μ§€μ›ν•˜λŠ” 개발 μ„œλ²„λ₯Ό μ‹œμž‘ν•©λ‹ˆλ‹€. μ½”λ“œλ₯Ό μˆ˜μ •ν•˜λ©΄ μ„œλ²„λ₯Ό μž¬μ‹œμž‘ν•˜μ§€ μ•Šκ³ λ„ 변경사항이 μ¦‰μ‹œ λ°˜μ˜λ©λ‹ˆλ‹€.

κΈ°λ³Έ μ‚¬μš©λ²•

개발 μ„œλ²„κ°€ μ‹œμž‘λ˜λ©΄ λ‹€μŒ κΈ°λŠ₯을 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€:
  • μžλ™ μž¬μ‹œμž‘: μ½”λ“œ λ³€κ²½ μ‹œ μžλ™μœΌλ‘œ μ„œλ²„ μž¬μ‹œμž‘
  • TypeScript 지원: .ts νŒŒμΌμ„ λ°”λ‘œ μ‹€ν–‰
  • μ†ŒμŠ€λ§΅ 지원: μ—λŸ¬ λ°œμƒ μ‹œ μ •ν™•ν•œ 쀄 번호 ν‘œμ‹œ
  • ν‚€λ³΄λ“œ 단좕킀: λΉ λ₯Έ μž‘μ—…μ„ μœ„ν•œ 단좕킀

ν•˜μœ„ λͺ…λ Ήμ–΄

API와 Web을 λΆ„λ¦¬ν•΄μ„œ μ‹€ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€. API와 Web을 별도 ν„°λ―Έλ„μ—μ„œ μ‹€ν–‰ν•˜κΈ°:
pnpm dev web은 -- λ’€μ˜ 인자λ₯Ό Vite에 κ·ΈλŒ€λ‘œ μ „λ‹¬ν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ 포트λ₯Ό λ³€κ²½ν•˜λ €λ©΄: bash pnpm dev web -- --port 5174

λ™μž‘ 원리

pnpm devλŠ” λ‚΄λΆ€μ μœΌλ‘œ λ‹€μŒ 도ꡬ듀을 μ‚¬μš©ν•©λ‹ˆλ‹€: μ€‘μš”: 이 νŒ¨ν‚€μ§€λ“€μ€ Sonamuκ°€ μžλ™μœΌλ‘œ μ œκ³΅ν•˜λ―€λ‘œ λ³„λ„λ‘œ μ„€μΉ˜ν•  ν•„μš”κ°€ μ—†μŠ΅λ‹ˆλ‹€.

μ‹€ν–‰ κ³Όμ •

  1. src/index.tsλ₯Ό μ—”νŠΈλ¦¬ν¬μΈνŠΈλ‘œ μ‹€ν–‰
  2. TypeScript νŒŒμΌμ„ μ¦‰μ‹œ λ³€ν™˜ν•˜μ—¬ μ‹€ν–‰
  3. 파일 λ³€κ²½ 감지
  4. λ³€κ²½λœ λͺ¨λ“ˆλ§Œ ꡐ체 (HMR)
  5. 전체 μž¬μ‹œμž‘μ΄ ν•„μš”ν•œ κ²½μš°μ—λ§Œ μž¬μ‹œμž‘

ν‚€λ³΄λ“œ 단좕킀

개발 μ„œλ²„ μ‹€ν–‰ 쀑 λ‹€μŒ 단좕킀λ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€:

단좕킀 μ‚¬μš© μ˜ˆμ‹œ

μ„œλ²„ μž¬μ‹œμž‘:
κ°•μ œ μž¬μ‹œμž‘ (μΊμ‹œ μ΄ˆκΈ°ν™”):

ν™˜κ²½ λ³€μˆ˜

개발 μ„œλ²„λŠ” λ‹€μŒ ν™˜κ²½ λ³€μˆ˜λ₯Ό μžλ™μœΌλ‘œ μ„€μ •ν•©λ‹ˆλ‹€: μ½”λ“œμ—μ„œ ν™˜κ²½ λ³€μˆ˜λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€:

HMR λ™μž‘ 방식

μžλ™ μž¬μ‹œμž‘λ˜λŠ” 경우

λ‹€μŒ νŒŒμΌμ„ μˆ˜μ •ν•˜λ©΄ μ„œλ²„κ°€ μžλ™μœΌλ‘œ μž¬μ‹œμž‘λ©λ‹ˆλ‹€:
  • Entity 파일 (*.entity.ts)
  • Model 파일 (*.model.ts)
  • Config 파일 (sonamu.config.ts)
  • Migration 파일

μ¦‰μ‹œ λ°˜μ˜λ˜λŠ” 경우 (HMR)

λ‹€μŒ νŒŒμΌμ„ μˆ˜μ •ν•˜λ©΄ μ„œλ²„ μž¬μ‹œμž‘ 없이 μ¦‰μ‹œ λ°˜μ˜λ©λ‹ˆλ‹€:
  • 일반 λΉ„μ¦ˆλ‹ˆμŠ€ 둜직
  • μœ ν‹Έλ¦¬ν‹° ν•¨μˆ˜
  • μ„œλΉ„μŠ€ λ ˆμ΄μ–΄

문제 ν•΄κ²°

μ„œλ²„κ°€ μ‹œμž‘λ˜μ§€ μ•ŠλŠ” 경우

문제: ν¬νŠΈκ°€ 이미 μ‚¬μš© 쀑
ν•΄κ²°:

HMR이 μž‘λ™ν•˜μ§€ μ•ŠλŠ” 경우

문제: μ½”λ“œ 변경이 λ°˜μ˜λ˜μ§€ μ•ŠμŒ ν•΄κ²°:

TypeScript 였λ₯˜κ°€ λ°œμƒν•˜λŠ” 경우

문제: νƒ€μž… μ—λŸ¬λ‘œ μ„œλ²„ μ‹€ν–‰ μ‹€νŒ¨ ν•΄κ²°:

μ‹€μ „ 팁

1. λΉ λ₯Έ 개발 사이클

μ½”λ“œλ₯Ό μˆ˜μ •ν•˜κ³  λ°”λ‘œ ν…ŒμŠ€νŠΈν•  수 μžˆμŠ΅λ‹ˆλ‹€:

2. 둜그 확인

개발 μ„œλ²„λŠ” λͺ¨λ“  둜그λ₯Ό μ½˜μ†”μ— 좜λ ₯ν•©λ‹ˆλ‹€:

3. 디버깅

μ†ŒμŠ€λ§΅μ΄ ν™œμ„±ν™”λ˜μ–΄ μžˆμ–΄ μ •ν™•ν•œ 쀄 번호λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€:

ν”„λ‘œλ•μ…˜κ³Όμ˜ 차이점

개발 μ„œλ²„λŠ” ν”„λ‘œλ•μ…˜μ—μ„œ μ‚¬μš©ν•˜μ§€ λ§ˆμ„Έμš”!
  • μ„±λŠ₯이 느림
  • λ©”λͺ¨λ¦¬ μ‚¬μš©λŸ‰μ΄ 많음
  • λ³΄μ•ˆμ— μ·¨μ•½
ν”„λ‘œλ•μ…˜μ—μ„œλŠ” pnpm build ν›„ pnpm startλ₯Ό μ‚¬μš©ν•˜μ„Έμš”.

λ‹€μŒ 단계

build

ν”„λ‘œλ•μ…˜ λΉŒλ“œν•˜κΈ°

HMR

HMR μ‹œμŠ€ν…œ μžμ„Ένžˆ μ•Œμ•„λ³΄κΈ°