2nd/10_Wiki/Topics/Programming & Language/Electron.md

---
id: wiki-2026-0508-electron
title: Electron
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Electron Framework, Atom Shell]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [desktop, javascript, chromium, nodejs]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript/JavaScript
  framework: Electron 33+
---

# Electron

## 매 한 줄
> **"매 Chromium + Node.js를 묶어 web tech 으로 desktop app 을 build"**. GitHub 이 Atom editor 용으로 만든 framework 가 VS Code, Slack, Discord, Figma desktop, 1Password 의 backbone 이 되었음. 2026 현재 Electron 33+ 가 process model 강화 (utility process), V8 sandbox, ASAR integrity 검사 의 기본화.

## 매 핵심

### 매 process model
- **Main process**: Node.js runtime, app lifecycle, native API (file, dialog, tray) 의 owner. 매 1 개 instance.
- **Renderer process**: Chromium tab 마다 1 개. BrowserWindow content. Sandbox 기본 ON (Electron 20+).
- **Preload script**: Renderer 의 isolated world 에서 실행, `contextBridge` 로 main 과 안전 bridge.
- **Utility process**: 매 v22+ 추가. Heavy CPU/IO offload (image decode, ffmpeg).

### 매 IPC 패턴
- `ipcRenderer.invoke` ↔ `ipcMain.handle` (Promise-based, 권장).
- `ipcRenderer.send` ↔ `ipcMain.on` (fire-and-forget).
- `webContents.send` ↔ `ipcRenderer.on` (main → renderer push).
- 매 `contextIsolation: true` + `nodeIntegration: false` 의 mandatory.

### 매 응용
1. **Editor**: VS Code, Atom, Obsidian.
2. **Communication**: Slack, Discord, Microsoft Teams.
3. **Design**: Figma desktop, Notion.
4. **Crypto/Wallet**: 1Password, Exodus.

## 💻 패턴

### Secure preload bridge
```typescript
// preload.ts
import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('api', {
  readFile: (path: string) => ipcRenderer.invoke('fs:read', path),
  onUpdate: (cb: (v: string) => void) => {
    const listener = (_: unknown, v: string) => cb(v)
    ipcRenderer.on('app:update', listener)
    return () => ipcRenderer.removeListener('app:update', listener)
  },
})
```

### Main IPC handler with validation
```typescript
// main.ts
import { ipcMain, app } from 'electron'
import { promises as fs } from 'node:fs'
import path from 'node:path'

ipcMain.handle('fs:read', async (_event, requested: string) => {
  const userData = app.getPath('userData')
  const resolved = path.resolve(userData, requested)
  if (!resolved.startsWith(userData)) throw new Error('path traversal')
  return await fs.readFile(resolved, 'utf-8')
})
```

### BrowserWindow secure defaults
```typescript
import { BrowserWindow } from 'electron'
import path from 'node:path'

const win = new BrowserWindow({
  width: 1200,
  height: 800,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    nodeIntegration: false,
    sandbox: true,
    webSecurity: true,
  },
})
```

### Auto-updater (electron-updater)
```typescript
import { autoUpdater } from 'electron-updater'

autoUpdater.checkForUpdatesAndNotify()
autoUpdater.on('update-downloaded', () => autoUpdater.quitAndInstall())
```

### Utility process offload
```typescript
import { utilityProcess, MessageChannelMain } from 'electron'

const { port1, port2 } = new MessageChannelMain()
const child = utilityProcess.fork(path.join(__dirname, 'worker.js'))
child.postMessage({ task: 'transcode' }, [port2])
port1.on('message', (msg) => console.log('result', msg))
```

### Code signing build (electron-builder)
```json
{
  "build": {
    "appId": "com.example.app",
    "mac": { "hardenedRuntime": true, "gatekeeperAssess": false, "notarize": true },
    "win": { "signingHashAlgorithms": ["sha256"] },
    "asar": true
  }
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Cross-platform desktop, web team | Electron |
| Bundle size critical (<50MB) | Tauri (Rust) 고려 |
| Native feel mandatory | Native (Swift/Kotlin) |
| Existing web app → wrap | Electron |
| Mobile target 도 필요 | React Native / Flutter |

**기본값**: 매 Electron 33+ + contextIsolation + electron-builder + auto-updater.

## 🔗 Graph
- 부모: [[Chromium]] · [[Nodejs_and_Backend_Optimization|Nodejs]]
- 변형: [[Tauri]]
- Adjacent: [[Chrome DevTools(크롬 개발자 도구)]] · [[V8 엔진 힙 아키텍처]]

## 🤖 LLM 활용
**언제**: web stack 재사용, 빠른 cross-platform delivery, rich web-based UI 필요.
**언제 X**: 매 100MB+ binary 가 unacceptable, 매 deep OS integration (kernel ext, system tray 만 의 limit), battery-critical mobile.

## ❌ 안티패턴
- **nodeIntegration: true with remote content**: 매 RCE risk. 매 contextIsolation 강제.
- **`require('electron').remote`**: deprecated, removed v14+. `@electron/remote` 도 안티 — IPC handle 로 교체.
- **불특정 origin loadURL**: 매 untrusted web 을 BrowserWindow 에 load 하면 sandbox escape 위험.
- **ASAR 만 의 protection**: ASAR 는 압축 일 뿐. Source 보호 의 X — 매 native module / 서버 side 로 logic 이동.

## 🧪 검증 / 중복
- Verified (electronjs.org docs, Electron 33 release notes 2026).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Electron 33 process model + secure IPC patterns |

## 🛠️ 적용 사례 (Applied in summary)

<!-- CODE-GROUNDING:START -->
### 🔎 코드베이스 근거 (자동 추출 — E:\Wiki 레포)
**실제 구현/사용 위치:**
- `photoai/electron.vite.config.ts:2` — import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
- `photoai/src/shared/types.ts:485` — /** 드롭된 File의 로컬 절대경로 반환(Electron webUtils). 경로가 없으면 빈 문자열. */
- `photoai/src/preload/inference.ts:1` — import { contextBridge, ipcRenderer } from 'electron'
- `photoai/src/preload/index.ts:1` — import { contextBridge, ipcRenderer, webUtils } from 'electron'
- `photoai/src/main/fsExplorer.ts:4` — import { shell } from 'electron'
- `photoai/src/main/embedder.ts:1` — import { BrowserWindow } from 'electron'

**관련 커밋:**
- `photoai 3e73967 darktable-inspired reskin + metadata/collections, map, easy mode, select/export`
- `photoai 8a8c102 Initial commit: AI Photo Organizer (Electron + face-api)`

_자동 생성: code_grounding.mjs · 재실행 시 갱신됨_
<!-- CODE-GROUNDING:END -->