pnpm dev 명령어는 **Hot Module Replacement(HMR)**를 지원하는 개발 서버를 시작합니다. 코드를 수정하면 서버를 재시작하지 않고도 변경사항이 즉시 반영됩니다.
기본 사용법
- 자동 재시작: 코드 변경 시 자동으로 서버 재시작
- TypeScript 지원: .ts 파일을 바로 실행
- 소스맵 지원: 에러 발생 시 정확한 줄 번호 표시
- 키보드 단축키: 빠른 작업을 위한 단축키
동작 원리
pnpm dev는 내부적으로 다음 도구들을 사용합니다:
| 도구 | 역할 | 제공 |
|---|---|---|
@sonamu-kit/hmr-runner | HMR 실행 엔진 | Sonamu |
@sonamu-kit/ts-loader | TypeScript 로더 | Sonamu |
@sonamu-kit/hmr-hook | HMR 훅 | Sonamu |
실행 과정
src/index.ts를 엔트리포인트로 실행- TypeScript 파일을 즉시 변환하여 실행
- 파일 변경 감지
- 변경된 모듈만 교체 (HMR)
- 전체 재시작이 필요한 경우에만 재시작
키보드 단축키
개발 서버 실행 중 다음 단축키를 사용할 수 있습니다:| 단축키 | 기능 | 설명 |
|---|---|---|
r | 재시작 | 서버를 수동으로 재시작합니다 |
f | 강제 재시작 | sonamu.lock 파일을 삭제하고 재시작합니다 |
Enter | 테스트 | 키 바인딩 테스트용 |
Ctrl+F Ctrl+F | 업데이트 | Git pull, 패키지 설치, 빌드 후 재시작 |
단축키 사용 예시
서버 재시작:환경 변수
개발 서버는 다음 환경 변수를 자동으로 설정합니다:| 변수 | 값 | 설명 |
|---|---|---|
NODE_ENV | development | 개발 모드 표시 |
HOT | yes | HMR 활성화 플래그 |
API_ROOT_PATH | 프로젝트 경로 | HMR 루트 디렉토리 |
HMR 동작 방식
자동 재시작되는 경우
다음 파일을 수정하면 서버가 자동으로 재시작됩니다:- Entity 파일 (
*.entity.ts) - Model 파일 (
*.model.ts) - Config 파일 (
sonamu.config.ts) - Migration 파일
즉시 반영되는 경우 (HMR)
다음 파일을 수정하면 서버 재시작 없이 즉시 반영됩니다:- 일반 비즈니스 로직
- 유틸리티 함수
- 서비스 레이어
문제 해결
서버가 시작되지 않는 경우
문제: 포트가 이미 사용 중HMR이 작동하지 않는 경우
문제: 코드 변경이 반영되지 않음 해결:TypeScript 오류가 발생하는 경우
문제: 타입 에러로 서버 실행 실패 해결:실전 팁
1. 빠른 개발 사이클
코드를 수정하고 바로 테스트할 수 있습니다:2. 로그 확인
개발 서버는 모든 로그를 콘솔에 출력합니다:3. 디버깅
소스맵이 활성화되어 있어 정확한 줄 번호를 확인할 수 있습니다:프로덕션과의 차이점
| 기능 | 개발 서버 | 프로덕션 |
|---|---|---|
| HMR | ✅ 활성화 | ❌ 비활성화 |
| TypeScript | 즉시 실행 | 컴파일 필요 |
| 소스맵 | 원본 파일 | 압축된 파일 |
| 성능 | 느림 | 빠름 |
| 에러 표시 | 상세함 | 간략함 |
