Electron Process Model

i33W·2022년 1월 18일

Electron은 Chromium에서 다중 프로세스 아키텍처를 상속받았습니다. 이는 프레임워크를 아키텍처적으로 현대 웹 브라우저와 매우 유사하게 만듭니다. 이 가이드에서는 최소한의 빠른 시작 앱에서 적용한 Electron의 개념적 지식을 설명합니다.

1. Why not a single process? 싱글 프로세스가 아닌 이유

웹 브라우저는 엄청나게 복잡한 애플리케이션입니다. 웹 콘텐츠를 표시하는 주요 기능 외에도 여러 창(또는 탭) 관리 및 타사 확장 로드와 같은 많은 보조 책임이 있습니다.

초기에 브라우저는 일반적으로 이 모든 기능에 대해 단일 프로세스를 사용했습니다. 이 패턴은 열려 있는 각 탭에 대한 오버헤드가 적다는 것을 의미했지만 하나의 웹사이트가 충돌하거나 중단되면 전체 브라우저에 영향을 미칩니다.

2. The multi-process model 멀티 프로세스 모델

이 문제를 해결하기 위해 Chrome 팀은 웹 페이지의 버그나 악성 코드가 앱 전체에 미칠 수 있는 피해를 제한하여 각 탭이 자체 프로세스에서 렌더링되도록 결정했습니다.
그러면 단일 브라우저 프로세스가 이러한 프로세스와 전체 애플리케이션 수명 주기를 제어합니다.

Electron applications은 매우 유사하게 구성됩니다.
앱 개발자는 메인 및 렌더러라는 두 가지 유형의 프로세스를 제어합니다.
이는 위에서 설명한 Chrome의 자체 브라우저 및 렌더러 프로세스와 유사합니다.

3. The main process 메인 프로세스

각 Electron 앱에는 애플리케이션의 진입점 역할을 하는 단일 기본 프로세스가 있습니다.
기본 프로세스는 Node.js 환경에서 실행됩니다.
즉, 모듈이 필요하고 모든 Node.js API를 사용할 수 있습니다.

메인 프로세스 포함 기능
① Window management 창 관리
② Application lifecycle 애플리케이션 생명주기
③ Native APIs 사용자 운영체제와 상호작용 가능한 APIs

① Window management 창 관리

메인 프로세스의 주요 목적은 BrowserWindow 모듈을 사용하여 응용 프로그램 창을 만들고 관리하는 것입니다.

BrowserWindow 클래스의 각 인스턴스는 별도의 렌더러 프로세스에서 웹 페이지를 로드하는 응용 프로그램 창을 만듭니다.

창의 webContents 개체를 사용하여 메인 프로세스에서 이 웹 콘텐츠와 상호 작용할 수 있습니다.

// main.js
const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')

const contents = win.webContents
console.log(contents)

② Application lifecycle 애플리케이션 생명주기

메인 프로세스는 또한 Electron의 앱 모듈을 통해 애플리케이션의 수명 주기를 제어합니다.

이 모듈은 사용자 정의 애플리케이션 동작(예: 애플리케이션을 프로그래밍 방식으로 종료, 애플리케이션 도크 수정 또는 정보 패널 표시)을 추가하는 데 사용할 수 있는 대규모 이벤트 및 메소드 세트를 제공합니다.

실용적인 예로, 빠른 시작 가이드에 표시된 앱은 앱 API를 사용하여 보다 네이티브 애플리케이션 창 환경을 만듭니다.

// main.js
// non-macOS 플랫폼에서 창이 모두 닫혔을 때 앱 종료
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

③ Native APIs 네이티브 APIs

웹 콘텐츠를 위한 Chromium 래퍼 이상으로 Electron의 기능을 확장하기 위해 메인 프로세스는 사용자의 운영 체제와 상호 작용하는 사용자 지정 API도 추가합니다.

Electron은 메뉴, 대화 상자 및 트레이 아이콘과 같은 기본 데스크톱 기능을 제어하는 다양한 모듈을 제공합니다.

Electron의 주요 프로세스 모듈의 전체 목록은 API 문서를 확인하세요.

4. The renderer process 렌더러 프로세스

각 Electron 앱은 열려 있는 각 BrowserWindow(및 각 웹 포함)에 대해 별도의 렌더러 프로세스를 생성합니다. 이름에서 알 수 있듯이 렌더러는 웹 콘텐츠를 렌더링하는 역할을 합니다. 모든 의도와 목적을 위해 렌더러 프로세스에서 실행되는 코드는 웹 표준에 따라 작동해야 합니다(최소한 Chromium이 하는 한).

따라서 단일 브라우저 창 내의 모든 사용자 인터페이스 및 앱 기능은 웹에서 사용하는 것과 동일한 도구 및 패러다임으로 작성되어야 합니다.

모든 웹 사양을 설명하는 것은 이 가이드의 범위를 벗어나지만 최소한 이해해야 할 사항은 다음과 같습니다.

HTML 파일은 렌더러 프로세스의 진입점입니다.
CSS(Cascading Style Sheets)를 통해 UI 스타일링이 추가됩니다.
<script> 요소를 통해 실행 가능한 JavaScript 코드를 추가할 수 있습니다.

또한 이는 렌더러가 require 또는 기타 Node.js API에 직접 액세스할 수 없음을 의미합니다. 렌더러에 NPM 모듈을 직접 포함하려면 웹에서 사용하는 것과 동일한 번들러 도구 모음(예: webpack 또는 parcel)을 사용해야 합니다.

5. Preload scripts 프리로드 스크립트

프리로드 스크립트에는 웹 콘텐츠가 로드되기 시작하기 전에 렌더러 프로세스에서 실행되는 코드가 포함되어 있습니다. 이러한 스크립트는 렌더러 컨텍스트 내에서 실행되지만 Node.js API에 대한 액세스 권한이 있으면 더 많은 권한이 부여됩니다.

프리로드 스크립트는 BrowserWindow 생성자의 webPreferences 옵션에서 기본 프로세스에 첨부할 수 있습니다.

// main.js
const { BrowserWindow } = require('electron')
//...
const win = new BrowserWindow({
  webPreferences: {
    preload: 'path/to/preload.js'
  }
})
//...

프리로드 스크립트는 렌더러와 전역 창 인터페이스를 공유하고 Node.js API에 액세스할 수 있기 때문에 웹 콘텐츠가 사용할 수 있는 전역 창에 임의의 API를 노출하여 렌더러를 향상시키는 역할을 합니다.

프리로드 스크립트는 연결된 렌더러와 전역 창을 공유하지만 contextIsolation 기본값으로 인해 사전 로드 스크립트의 변수를 창으로 직접 연결할 수 없습니다.

// preload.js
window.myAPI = {
  desktop: true
}

// renderer.js
console.log(window.myAPI)
// => undefined

컨텍스트 격리는 권한 있는 API가 웹 콘텐츠의 코드로 누출되는 것을 방지하기 위해 프리로드 스크립트가 렌더러의 기본 세계에서 격리됨을 의미합니다.

대신 contextBridge 모듈을 사용하여 안전하게 수행하십시오.

// preload.js
const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  desktop: true
})

// renderer.js
console.log(window.myAPI)
// => { desktop: true }

이 기능은 두 가지 주요 목적에 매우 유용합니다.

ipcRenderer 도우미를 렌더러에 노출하면 IPC(프로세스 간 통신)를 사용하여 렌더러에서 주요 프로세스 작업을 트리거할 수 있습니다(반대의 경우도 마찬가지).
원격 URL에서 호스팅되는 기존 웹 앱에 대한 Electron 래퍼를 개발하는 경우 웹 클라이언트 측에서 데스크톱 전용 논리에 사용할 수 있는 사용자 정의 속성을 렌더러의 창 전역에 추가할 수 있습니다.

i33W

더 오래하면 돼.

이전 포스트

settings!

다음 포스트