Quick Start

설치

모노레포 내에서 workspace:*로 참조한다:

{
  "dependencies": {
    "@repo/electron-ipc": "workspace:*"
  }
}

Peer dependency로 electron이 필요하다:

{
  "devDependencies": {
    "electron": ">=28"
  }
}

최소 예제

서비스 하나와 컨트롤러 하나로 구성된 최소 앱을 만든다.

1단계: 서비스 정의

// greeting.service.ts
import { Injectable } from '@repo/electron-ipc';

@Injectable()
class GreetingService {
  greet(name: string): string {
    return `Hello, ${name}!`;
  }
}

2단계: 컨트롤러 정의

// greeting.controller.ts
import { Controller, Handle, inject } from '@repo/electron-ipc';
import { GreetingService } from './greeting.service';

@Controller()
class GreetingController {
  private readonly greeting = inject(GreetingService);

  @Handle('greet')
  handleGreet(name: string): string {
    return this.greeting.greet(name);
  }
}

3단계: 모듈 구성

// greeting.module.ts
import { Module } from '@repo/electron-ipc';
import { GreetingService } from './greeting.service';
import { GreetingController } from './greeting.controller';

@Module({
  providers: [GreetingService],
  controllers: [GreetingController],
})
class GreetingModule {}

4단계: 앱 부트스트랩

// main.ts
import { BrowserWindow } from 'electron';
import { createApp, SenderGuard } from '@repo/electron-ipc';
import { GreetingModule } from './greeting.module';

const app = createApp({
  modules: [GreetingModule],
  guards: [new SenderGuard()],
  createWindow: () =>
    new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: { preload: '/path/to/preload.js' },
    }),
});

app.start();

5단계: 렌더러에서 호출

// preload.ts (contextBridge로 노출)
const result = await ipcRenderer.invoke('greet', 'World');
console.log(result); // "Hello, World!"

파일 구조

src/
├── greeting/
│   ├── greeting.service.ts
│   ├── greeting.controller.ts
│   ├── greeting.module.ts
│   └── index.ts
└── main.ts

다음 단계

• Module System — 데코레이터의 동작 원리
• Dependency Injection — Container와 inject() 상세
• Guard & Filter — 요청 검증과 에러 처리