Electron 프로세스 모델 — 메인과 렌더러의 관계

┌─────────────────────────────────┐
│         메인 프로세스            │  ← Node.js 런타임
│  (Browser Process)              │  ← 앱 라이프사이클 관리
│                                 │  ← 시스템 API 접근
├─────────────────────────────────┤
│                                 │
│  ┌──────────┐  ┌──────────┐    │
│  │ 렌더러 1  │  │ 렌더러 2  │   │  ← 각 BrowserWindow
│  │(Renderer)│  │(Renderer)│    │  ← 웹 페이지 렌더링
│  └──────────┘  └──────────┘    │
│                                 │
└─────────────────────────────────┘

const { app, BrowserWindow, Menu, dialog } = require('electron');

// 1. 앱 라이프사이클 관리
app.whenReady().then(() => {
  // 2. BrowserWindow 생성/관리
  const win = new BrowserWindow({ width: 800, height: 600 });

  // 3. 네이티브 메뉴 설정
  const menu = Menu.buildFromTemplate([
    { label: '파일', submenu: [{ role: 'quit' }] }
  ]);
  Menu.setApplicationMenu(menu);

  // 4. 시스템 다이얼로그
  // dialog.showOpenDialog(win, { properties: ['openFile'] });
});

// 렌더러에서 실행되는 코드 — 일반 웹 코드와 동일
document.getElementById('btn').addEventListener('click', () => {
  console.log('버튼이 클릭되었습니다');
  // Node.js API 직접 사용 불가 (보안상)
  // require('fs') ← 이런 코드는 동작하지 않음
});

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// contextBridge로 렌더러에 안전하게 API를 노출합니다
contextBridge.exposeInMainWorld('electronAPI', {
  // 파일 열기 요청을 메인 프로세스로 전달
  openFile: () => ipcRenderer.invoke('dialog:openFile'),

  // 앱 버전 가져오기
  getVersion: () => ipcRenderer.invoke('app:getVersion'),
});

// 렌더러에서 사용 — window.electronAPI로 접근 가능
const filePath = await window.electronAPI.openFile();

렌더러                   Preload              메인 프로세스
  │                        │                      │
  │  window.electronAPI    │                      │
  │  .openFile()           │                      │
  │ ─────────────────────► │                      │
  │                        │  ipcRenderer         │
  │                        │  .invoke('open')     │
  │                        │ ───────────────────► │
  │                        │                      │  dialog
  │                        │                      │  .showOpenDialog()
  │                        │  결과 반환            │
  │                        │ ◄─────────────────── │
  │  Promise 해결           │                      │
  │ ◄───────────────────── │                      │

// ⚠️ 위험한 설정 — 절대 프로덕션에서 사용하지 마세요
const win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,     // 렌더러에서 Node.js 사용 가능
    contextIsolation: false,   // 컨텍스트 격리 해제
  },
});

// main.js에서 유틸리티 프로세스 생성
const { utilityProcess } = require('electron');

const child = utilityProcess.fork(path.join(__dirname, 'heavy-task.js'));
child.postMessage({ type: 'start', data: largeData });

child.on('message', (result) => {
  console.log('작업 완료:', result);
});

// heavy-task.js — 별도 프로세스에서 실행
process.parentPort.on('message', (e) => {
  const { type, data } = e.data;
  // CPU 집약적인 작업 수행
  const result = processLargeData(data);
  process.parentPort.postMessage(result);
});