Intro

웹 브라우저는 매우 복잡한 앱으로, 단순히 웹 컨텐츠를 보여주는 것 말고도 다른 책임들(탭 관리, 서드파티 익스텐션 등)이 부여된다. 초기 브라우저는 이 모든 것들을 싱글 프로세스에서 진행했으나, 하나의 웹사이트가 전체 브라우저에 영향을 미치면서 Crash할 수 있다는 점이 가장 큰 단점이었다.

Chrome 팀은 이를 해결하기 위해, 각 탭이 서로 다른 프로세스에서 렌더링을 하기로 결정했다. 그리고 각 탭이 동작하는 프로세스는 하나의 매니저 프로세스가 관리하는데, 다음처럼 묘사가 된다.

Untitled

Electron 역시 Chromium의 멀티 프로세스 구조에 영향을 받아, main 프로세스와 renderer 프로세스 두 가지 종류의 프로세스를 통해 작동한다.

Process 모델

Process Model | Electron

Main 프로세스

Electron 앱에는 단 하나의 Main 프로세스가 존재하고, 이는 앱의 엔트리 포인트로서 동작한다. Node.js 환경에서 실행되기 때문에, 모듈들을 활용할 수 있고 모든 Node.js의 API를 사용할 수 있다.

가장 주요한 책임은 앱의 윈도우를 생성하고 관리하는 것이다. 이는 BrowserWindow라는 모듈을 사용해 구현된다. BrowserWindow 클래스를 통해 생성된 인스턴스들은 각각 다른 renderer 프로세스에서 웹페이지를 로드하는 윈도우를 생성한다. 인스턴스가 파괴되면, 이에 해당하는 renderer 프로세스 역시 종료된다.

Main 프로세스는 app이라는 모듈을 통해 앱의 라이프사이클 역시 관리한다. app에는 다양한 종류의 이벤트와 메서드들이 있어, 앱의 behaviour를 커스텀할 수 있게 도와준다.

Main 프로세스에는 유저의 운영체제와도 상호작용할 수 있는 API가 제공된다. menus, dialogs, tray icons 등의 데스크탑 네이티브한 기능들을 컨트롤할 수 있다.

Renderer 프로세스

Renderer 프로세스는 말 그대로 웹 컨텐츠를 렌더링하는 데에 책임이 있다. 웹에서 사용하는 모든 툴과 패러다임 등이 적용된다. 가령,

보안 이슈로 인해 renderer 프로세스는 Full Node.js 환경에서 실행되지 않는다.