[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

[Electron] 컨텍스트 격리(Context Isolation): 보안과 TypeScript로 더 안전하게

컨텍스트 격리(Context Isolation)란?컨텍스트 격리는 Electron의 렌더러 프로세스에서 실행되는 JavaScript와 Preload 스크립트의 실행 환경을 분리하는 보안 메커니즘입니다. 즉, 웹 콘텐츠가 Electron 내부 API나 프리로드 스크립트에서 정의한 객체에 직접 접근하는 것을 차단합니다.기본적으로 Electron 5.0.0부터 도입되었으며, Electron 12.0.0부터는 기본값으로 활성화되었습니다(contextIsolation: true) 이 기능을 활성화하면 window 객체가 프리로드 스크립트와 웹 콘텐츠에서 서로 다른 인스턴스로 작동하게 됩니다. 예를 들어, 프리로드 스크립트에서 window.hello = 'wave'를 설정하더라도, 웹 콘텐츠에서는 window.he..

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

[Electron] 프로세스 모델: 메인과 렌더러의 조화로운 협력

Electron의 프로세스 구조Electron은 Chromium과 Node.js를 결합한 프레임워크로, 각 앱은 다음과 같은 두 가지 프로세스로 나뉘어 동작합니다.메인 프로세스:  애플리케이션의 중심 역할을 하며, 단일 인스턴스로 실행됩니다.렌더러 프로세스: 각 창(window)마다 별도로 생성되며, UI를 렌더링합니다.메인 프로세스의 역할메인 프로세스는 애플리케이션의 진입점으로, Node.js 환경에서 실행됩니다. 이 프로세스는 애플리케이션의 창을 생성하고 관리하는 역할을 하며, 운영 체제와 상호작용할 수 있습니다.앱 생명주기 관리: app 모듈을 통해 앱의 시작, 종료, 활성화 등을 제어합니다.창 생성 및 관리: BrowserWindow를 사용해 UI 창을 생성하고 조작합니다.Node.js 환경: 파..

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

[Electron] 튜토리얼 Part 6: 앱 배포 및 자동 업데이트

GitHub Publisher 설정Electron Forge는 GitHub Publisher 플러그인을 통해 앱의 배포 파일을 GitHub Releases에 업로드할 수 있습니다. 먼저, 아래와 같이 Publisher 모듈을 설치합니다.npm install --save-dev @electron-forge/publisher-github설치 후, forge.config.js 파일에 GitHub Publisher를 설정합니다. 예제에서는 배포를 초안(draft) 상태로 생성하여 나중에 GitHub 웹사이트에서 릴리즈 노트를 작성할 수 있도록 구성합니다.// forge.config.jsmodule.exports = { packagerConfig: { // 운영체제별 서명 옵션 등을 여기에 설정할 수 있습..

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