02 · ipcMain · ipcRenderer — 두 모듈의 API 전수

import { ipcRenderer } from 'electron'; // ⚠ preload에서만 — renderer 직접 불가

import { ipcMain } from 'electron';

ipcMain.handle('foo', (event, ...args) => {
  event.sender;          // 보낸 webContents (응답 출처 검증용)
  event.senderFrame;     // 어느 frame인지 (iframe 검증)
  event.processId;       // 프로세스 ID
  event.frameId;         // frame ID
  event.returnValue;     // sendSync 전용 (쓰지 말 것)
  event.ports;           // MessagePort 배열 (postMessage용)
  event.reply(channel, ...args); // 응답 전용 (handle에선 return으로 충분)
});

// preload.ts
import { contextBridge, ipcRenderer } from 'electron';
 
contextBridge.exposeInMainWorld('api', {
  getUserData: (id: string) => ipcRenderer.invoke('user:get', id),
});
 
// main.ts
import { ipcMain } from 'electron';
 
ipcMain.handle('user:get', async (event, id: string) => {
  // 입력 검증
  if (typeof id !== 'string' || id.length > 64) {
    throw new Error('invalid id');
  }
  const user = await db.users.findOne({ id });
  return user; // → Renderer의 Promise가 resolve
});
 
// renderer.ts
const user = await window.api.getUserData('u_123');

// preload.ts
contextBridge.exposeInMainWorld('logger', {
  log: (msg: string) => ipcRenderer.send('log:write', msg),
});
 
// main.ts
ipcMain.on('log:write', (event, msg: string) => {
  fs.appendFileSync(logPath, `${msg}\n`); // 응답 없음
});
 
// renderer.ts
window.logger.log('user clicked button');

// main.ts
import { BrowserWindow } from 'electron';
 
setInterval(() => {
  const win = BrowserWindow.getAllWindows()[0];
  win.webContents.send('clock:tick', new Date().toISOString());
}, 1000);
 
// preload.ts
contextBridge.exposeInMainWorld('clock', {
  onTick: (cb: (time: string) => void) => {
    const listener = (_: any, time: string) => cb(time);
    ipcRenderer.on('clock:tick', listener);
    return () => ipcRenderer.removeListener('clock:tick', listener);
  },
});
 
// renderer.ts
const unsubscribe = window.clock.onTick((time) => updateClock(time));
// 컴포넌트 unmount 시
unsubscribe();

// ❌ NEVER
const data = ipcRenderer.sendSync('user:get', 'u_123');
// → renderer 스레드가 main의 응답을 기다리며 멈춤
// → 그 동안 모든 UI 입력·애니메이션·React 리렌더가 정지

// ✅ 같은 효과, freeze 없음
const data = await ipcRenderer.invoke('user:get', 'u_123');

// 옛날 (v11 이하, 제거됨)
ipcRenderer.sendTo(otherWebContentsId, 'msg', payload);
 
// 지금 — main을 중계로
// renderer A
window.api.sendToB(payload);
 
// preload
contextBridge.exposeInMainWorld('api', {
  sendToB: (p) => ipcRenderer.invoke('relay:to-b', p),
});
 
// main
ipcMain.handle('relay:to-b', (event, p) => {
  // event.sender로 *누가* 보냈는지 검증
  const bWin = BrowserWindow.fromId(bWinId);
  bWin.webContents.send('msg-from-a', p);
});

ipcMain.handle('data', ...);       // ❌ 너무 일반적
ipcMain.handle('get', ...);        // ❌ 무엇을 get?
ipcMain.handle('event', ...);      // ❌ Electron event와 혼동
ipcMain.handle('message', ...);    // ❌ postMessage와 혼동

ipcMain.handle('fs:read', ...);
ipcMain.handle('fs:write', ...);
ipcMain.handle('user:get', ...);
ipcMain.handle('app:get-version', ...);
ipcMain.handle('dialog:show-open', ...);

// shared/channels.ts
export const Channels = {
  fsRead: 'fs:read',
  fsWrite: 'fs:write',
  userGet: 'user:get',
} as const;
 
// main.ts
ipcMain.handle(Channels.fsRead, ...);
 
// preload.ts
ipcRenderer.invoke(Channels.fsRead, path);