electron Process Model

electron은 Chromium의 멀티 프로세싱 방식을 그대로 차용했기 때문에 현대 브라우저와 비슷한 아키텍처를 가지고 있습니다.

브라우저가 멀티 프로세싱을 사용하는 이유는 웹 컨텐츠 표시 외에도 다양한 기능을 독립적으로 수행하기 위함인데 electron 에서도 마찬가지로 main, renderer 프로세스를 구분해서 관리합니다.

Native APIs

데스크탑의 메뉴, 알림 등 네이티브 모듈은 electron 에서 컨트롤 할 수 있도록 제공한다.

main process

electron은 main 프로세스를 반드시 한개 가지고, 그것은 엔트리 포인트가 된다.

main 프로세스는 모든 node API를 사용할 수 있다.

메인 프로세스의 가장 중요한 목적은 BrowswerWindow 모듈로 윈도우를 생성하고 관리하는 일이다.

각 생성된 BrowserWindow 는 개별 프로세스로 관리된다.

webContents 객체를 통해 메인프로세스와 각 윈도우들은 상호작용할 수 있다.

renderer process

렌더러는 정확히 브라우저의 역할을 해야한다.

html 이 진입점이되고, css 와 script 를 태그를 추가할 수 있다.

renderer 에서는 보안상 이유로 특정 버전 이후로 node API 를 직접 접근할 수 없다.

직접 조작하려면 번들링 툴을 이용하면 된다.

하지만 preload 로 필요한 node 모듈을 주입할 수 있기 때문에 굳이 보안 위험을 감수할 필요는 없다.

 

preload scripts

renderer가 로딩되기 이전에 실행되는 파일이다.

DOM과 제한적이지만 node API 접근할 수 있고, 옵션에 따라 모든 node API 접근이 가능하기도 하다.

preload context 에서는 DOM의 window 에 직접 값을 추가할 수 없고, contextBridge 를 통해서 전달할 수 있다.

 

preload.js (X)

window.myAPI = {
  desktop: true,
}

renderer.js

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

---

preload.js (O)

const { contextBridge } = require('electron')

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

renderer.js

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