Electron
Chromium + Node.js를 기반으로 웹 기술(HTML/CSS/JS)로 크로스플랫폼 데스크탑 앱을 만드는 프레임워크.
프로세스 구조
| 프로세스 | 역할 |
|---|---|
| Main Process | 앱 생명주기, 네이티브 API, BrowserWindow 생성 |
| Renderer Process | UI 렌더링, 각 BrowserWindow마다 독립 실행 |
| Preload Script | Main ↔ Renderer 사이 브릿지, contextBridge로 API 노출 |
Main Process
├── BrowserWindow 1 → Renderer (preload.js)
└── BrowserWindow 2 → Renderer (preload.js)
IPC 통신
Renderer에서 Main의 기능을 사용하려면 IPC를 통해야 한다.
// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('api', {
send: (channel, data) => ipcRenderer.send(channel, data),
on: (channel, cb) => ipcRenderer.on(channel, (_, ...args) => cb(...args)),
})
// main.js
ipcMain.on('channel-name', (event, data) => {
// 처리
event.reply('channel-name-reply', result)
})
// renderer (UI)
window.api.send('channel-name', { foo: 'bar' })
window.api.on('channel-name-reply', (result) => console.log(result))빌드 (electron-builder)
// package.json
{
"build": {
"appId": "com.example.app",
"win": { "target": "nsis" },
"mac": { "target": "dmg" },
"linux": { "target": "AppImage" }
}
}npx electron-builder --win # Windows 빌드
npx electron-builder --mac # macOS 빌드
npx electron-builder --linux # Linux 빌드주요 API
| API | 설명 |
|---|---|
app |
앱 생명주기 이벤트 (ready, quit 등) |
BrowserWindow |
윈도우 생성/관리 |
dialog |
파일 선택, 메시지 박스 등 네이티브 다이얼로그 |
shell |
외부 링크 열기, 파일 탐색기 열기 |
Menu |
네이티브 메뉴바 구성 |
Tray |
시스템 트레이 아이콘 |
autoUpdater |
자동 업데이트 |
nativeTheme |
다크/라이트 모드 감지 |
보안
nodeIntegration: false— Renderer에서 Node.js 직접 접근 차단 (기본값)contextIsolation: true— preload와 renderer 컨텍스트 분리 (기본값)contextBridge로만 필요한 API를 선택적으로 노출