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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-electron	Electron	10_Wiki/Topics	verified	self	Electron Framework Atom Shell	none	A	0.9	applied	desktop javascript chromium nodejs		2026-05-10	pending	language framework TypeScript/JavaScript 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

// 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

// 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

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)

import { autoUpdater } from 'electron-updater'

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

Utility process offload

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)

{
  "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
• 변형: 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)

🔎 코드베이스 근거 (자동 추출 — 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 · 재실행 시 갱신됨