[Electron] 키보드 단축키 구현

로컬 단축키애플리케이션이 포커스를 가질 때만 동작하는 단축키입니다. Menu와 MenuItem의 accelerator 속성으로 정의할 수 있습니다.// main.jsconst { app, BrowserWindow, Menu } = require('electron');function createWindow() { const win = new BrowserWindow({ width: 600, height: 400 }); win.loadFile('index.html');}// macOS: ⌘+I, Win/Linux: Ctrl+Iconst template = [ { label: '도움말', submenu: [{ label: 'Electron 소개', accelerator: pr..

• format_list_bulleted Electron
• · 2025. 4. 7.
• textsms

[Electron] 보안 강화

HTTPS만 사용하기HTTP나 WS는 중간자 공격에 취약하므로, 모든 외부 리소스는 HTTPS를 사용해야 합니다.// main.js// Bad: HTTPmainWindow.loadURL('http://example.com');// Good: HTTPSmainWindow.loadURL('https://example.com');원격 콘텐츠에는 Node.js 비활성화원격 콘텐츠를 로드할 때 nodeIntegration를 꺼두고, 필요한 기능은 preload.js 스크립트로 제한적으로 제공합니다.// main.jsconst win = new BrowserWindow({ webPreferences: { nodeIntegration: false, // Node.js 통합 비활성화 contextIs..

• format_list_bulleted Electron
• · 2025. 4. 7.
• textsms

[Electron] 성능 최적화: 리소스 효율성과 반응성을 높이는 전략

모듈 로드 최적화문제점불필요하거나 무거운 Node.js 모듈을 초기 로드하면 메모리와 초기화 시간이 증가합니다.전략필요한 모듈만 선택적으로 로드동적 임포트(dynamic import)로 필요 시점에 모듈을 가져옴// Bad Example: 큰 모듈을 전역으로 requireconst heavyModule = require('heavy-module'); // 이 모듈은 수백 MB의 데이터를 포함함// Good Example: 필요할 때 동적으로 로드 (Lazy Loading)async function loadHeavyModule() { return await import('heavy-module');}// 사용 시점에 모듈 로드loadHeavyModule().then(module => { module.d..

• format_list_bulleted Electron
• · 2025. 4. 7.
• textsms

[Electron] MessagePorts: 메시지 채널을 통한 프로세스 간 직접 통신

MessagePorts의 기본 개념MessageChannel은 두 개의 연결된 MessagePort 객체를 생성합니다. 이 두 포트는 서로 메시지를 주고받을 수 있으며, 포트는 웹 표준의 window.postMessage와 유사한 방식으로 작동합니다. Electron에서는 ipcRenderer.postMessage와 WebContents.postMessage 메서드를 통해 MessagePorts를 전송할 수 있습니다.MessagePort는 postMessage로 데이터를 보내고, onmessage로 수신하며, 일반 IPC와 달리 채널 자체를 전달해 지속적인 통신이 가능합니다.렌더러에서 메인으로 MessagePort 전달렌더러에서 MessagePort를 생성해 메인 프로세스에 전달하는 예제입니다. 메인에서..

• format_list_bulleted Electron
• · 2025. 3. 24.
• textsms

[Electron] 프로세스 샌드박싱: 보안을 위한 실행 격리

샌드박싱이란?샌드박싱은 프로세스가 제한된 환경에서 실행되도록 하여, CPU와 메모리 같은 기본 자원은 사용 가능하되 파일 시스템이나 네트워크 같은 민감한 리소스에 대한 접근을 차단하는 보안 기법입니다. Electron은 Chromium의 샌드박스 모델을 계승하며, 특히 렌더러 프로세스를 샌드박스 내에서 실행해 보안을 강화합니다. Electron 20부터 렌더러 프로세스는 기본적으로 샌드박스 환경에서 동작하며, 이는 Node.js API에 대한 직접 접근을 차단해 보안 위협을 줄입니다.Electron 샌드박싱의 동작 방식렌더러 프로세스샌드박스가 적용된 렌더러는 Chromium의 웹 렌더러와 유사하게 작동합니다.Node.js 차단: 샌드박스 환경에서는 Node.js 런타임이 초기화되지 않아, fs나 chil..

• format_list_bulleted Electron
• · 2025. 3. 24.
• textsms

[Electron] IPC: 프로세스 간 통신으로 앱 기능 확장하기

Electron 애플리케이션은 메인 프로세스와 렌더러 프로세스로 구성됩니다. 이 둘은 서로 다른 책임을 지며, 직접적으로 Node.js API를 공유하지 않기 때문에 IPC(Inter-Process Communication) 를 통해 상호 작용합니다. IPC를 사용하면 사용자 인터페이스에서 네이티브 API 호출이나 메뉴 동작에 따라 웹 콘텐츠에 변화를 주는 등, 다양한 기능을 구현할 수 있습니다.Renderer에서 Main(일방향 통신)렌더러에서 메인으로 메시지를 보내 단방향 작업을 수행합니다. 예를 들어, 창의 타이틀을 동적으로 변경하는 등의 작업을 수행할 수 있습니다.// main.jsconst { app, BrowserWindow, ipcMain } = require('electron');const..

• format_list_bulleted Electron
• · 2025. 3. 24.
• textsms