HMR 문제

# 파일 수정 후 아무 일도 일어나지 않음

# Ctrl+C로 중단 후 재시작
pnpm dev

// src/bin/hmr-hook-register.ts
if (process.env.HOT === "yes" && process.env.API_ROOT_PATH) {
  const { hot } = await import("@sonamu-kit/hmr-hook");

  await hot.init({
    rootDirectory: process.env.API_ROOT_PATH,
    boundaries: [`./src/**/*.ts`],  // 모든 .ts 파일
  });

  console.log("🔥 HMR-hook initialized");
}

# Linux
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

# macOS - 일반적으로 필요 없음

Error: Cannot import module /src/application/user/user.model.ts

# madge 설치
pnpm add -D madge

# 순환 의존성 검사
pnpm madge --circular --extensions ts src/

// ❌ 순환 의존성
// user.model.ts
import { PostModel } from "../post/post.model";

// post.model.ts
import { UserModel } from "../user/user.model";

// ✅ 해결: 타입만 import
// user.model.ts
import type { PostModel } from "../post/post.model";

// 또는 공통 타입 파일 생성
// types.ts
export type { UserModel } from "./user/user.model";
export type { PostModel } from "./post/post.model";

// ❌ HMR 경계 내에서 동적 import
class UserModelClass extends BaseModel {
  async getRelated() {
    const { PostModel } = await import("../post/post.model");
    return PostModel.findMany();
  }
}

// ✅ 정적 import 사용
import { PostModel } from "../post/post.model";

class UserModelClass extends BaseModel {
  async getRelated() {
    return PostModel.findMany();
  }
}

Property 'newMethod' does not exist on type 'UserModel'

Command Palette (Cmd+Shift+P 또는 Ctrl+Shift+P)
> TypeScript: Restart TS Server

Command Palette
> Developer: Reload Window

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
  }
}

// src/bin/hmr-hook-register.ts
if (process.env.HOT === "yes" && process.env.API_ROOT_PATH) {
  const { hot } = await import("@sonamu-kit/hmr-hook");

  await hot.init({
    rootDirectory: process.env.API_ROOT_PATH,
    boundaries: [
      // 자주 변경되는 파일만 포함
      `./src/application/**/*.model.ts`,
      `./src/application/**/*.helper.ts`
    ],
  });
}

// ❌ 모듈 로딩 시 즉시 실행
const heavyData = processLargeDataset();

export class UserModelClass extends BaseModel {
  // ...
}

// ✅ 필요할 때만 실행
let heavyData: any;

export class UserModelClass extends BaseModel {
  private getHeavyData() {
    if (!heavyData) {
      heavyData = processLargeDataset();
    }
    return heavyData;
  }
}

# Node.js 메모리 사용량 확인
node --expose-gc --inspect node_modules/.bin/sonamu dev

# Chrome DevTools에서 메모리 프로파일링
chrome://inspect

Error: HMR boundary pattern is invalid: /src/**/*.model.ts

// src/bin/hmr-hook-register.ts
await hot.init({
  rootDirectory: process.env.API_ROOT_PATH,
  boundaries: [
    // ✅ 올바른 패턴 (상대 경로)
    `./src/application/**/*.model.ts`,
    `./src/application/**/*.helper.ts`,
    
    // ❌ 잘못된 패턴
    // "/src/**/*.ts",  // 절대 경로는 작동하지 않음
    // "./src/**/*.{ts,js}",  // brace expansion 미지원
  ],
});

# HMR 로깅 활성화
DEBUG=hmr:* pnpm dev

hmr:boundary /src/application/user/user.model.ts matched +0ms
hmr:reload Reloading module: user.model +5ms

// 모듈 캐시 문제가 있다면 서버 재시작

// HMR 경계에 맞게 파일 이름 변경
// user-service.ts → user.helper.ts

Error [ERR_REQUIRE_ESM]: require() of ES Module not supported

{
  "type": "module"
}

// ❌
import { UserModel } from "./user.model";

// ✅
import { UserModel } from "./user.model.js";  // ESM에서는 .js 사용

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}