[Electron] 일렉트론의 구조 / Main Process / Renderer Process

Main 과 Renderer  프로세스 :: 가장 중요한 개념

Main Process

Main process 는 Node.js 기반으로 Node.js에서 사용하는 모든 모듈들을 사용할 수 있으며, Back-end의 영역에 속합니다.

package.json파일의 main 스크립트를 실행하는 프로세스로 "메인 프로세스"라고 불리며, 메인 프로세스에서 실행되는 스크립트는 웹페이지들을 GUI로 표시해줍니다.

 

Electron 애플리케이션은 항상 하나의 메인프로세스를 가지고 있습니다.

Renderer 프로세스는 여러개 존재할 수 있지만. 메인 프로세스는 애플리케이션  당 하나만 존재할 수 있습니다.

---

Electron은 웹페이지를 보여주기 위해 Chromium을 사용한다.

Electron은 웹페이지를 보여주기 위해 Chromium을 사용하기 때문에 Chromium의 멀티프로세스 아키텍쳐가 그대로 사용합니다.

Electron안에서 보여지는 각각의 웹페이지는 자신의  프로세스안에서 동작하는데, 이 프로세스를 Renderer 프로세스라 부릅니다.

일반적인 브라우저에서 웹페이지는 대개 샌드박스 환경에서 실행되고 네이티브 리스소에는 엑세스 할 수 없습니다.

그러나 Electron을 사용하는 User는 웹페이지가 Node.js APIs를 이용할 수 있기 때문에, 보다 낮은 수준에서 운영체제와 상호작용하는 것이 허용되어 있습니다.

---

Renderer Process

Renderer Process 는 HTML, CSS, JavaScript로 이루어지는 영역이며, Font-end영역입니다.

위에서 언급했듯이 Electron안에서 보여지는 각각의 웹페이지는 자신의  프로세스안에서 동작하는데, 이 프로세스를 Renderer 프로세스라 부릅니다.

---

Main Process와 Renderer Process 의 차이점

1. Main Process 는 BrowserWindow 인스턴스를 생성하여 웹페이지를 만듭니다.

2. 각각의 BrowserWindow 인스턴스는 자체 Renderer Process에서 웹페이지를 실행합니다.

3. BrowserWindow 인스턴스가 소멸되면, 해당 Renderer Process 도 종료합니다.

4. Main Process 는 모든 웹 페이지와 각 페이지들이 소유한 Renderer Process 들을 관리합니다.

5. 각각의 Renderer Process는 서로 독립적으로 동작하고 이들이 실행한 웹페이지 내에서만 관여를 합니다.

 

6. 웹페이지에서 네이티브 GUI관련 API 호출은 허용하지 못합니다. 왜냐하면 이것은 매우 위험한 일이고, 리소스 릭을 발생시키기 쉽기 때문입니다.

 

7. 웹페이지에서 GUI 작업을 수행하려면, 웹페이지의 Renderer Process 가 Main Process에게 네이티브GUI 관련 작업을 수행할 수 있도록 요청해야 합니다.

 

8. Electron은 Main Process와 Renderer Process 에서 사용할 수 있는 API를 제공하고 있는데, 이 API들은 프로세스 타입에 따라 사용됩니다.

 

9. 대부분의 API는 Main Process에서만 사용할 수 있으며, 일부는 Renderer 프로세스에서만, 또 다른 일부는 양쪽 모두 사용할 수 있는 API로 구분되어 사용됩니다.

 

프로세스간 통신 
Electron에서 메세지를 전송하기 위한 ipcRenderer 와 ipcMain 모듈, RPC방식 통신을 위한 remote 모듈과 같이 Main Process와 Renderer Process 가 통신하는 방법이 여러가지 있습니다.

https://electronjs.org/docs/faq#how-to-share-data-between-web-pages 참조

---

Electron API 사용하기

Electron은 Main Process와 Renderer Process에서 DeskTop 응용프로그램의 개발을 지원하여 여러 API들을 제공합니다.

두 프로세스 모두에서 아래와 같이 모듈을 포함해서 Electron의 API 에 접근할 수 있습니다.

모든 Electron API 들은 프로세스 타입에 따라 사용할 수 있습니다.

위의 BrowserWindow 클래스는 Main Process 만 사용할 수 있습니다.

이 BrowserWindow 클래스를 Renderer Process 에서 사용한다면 "undefined"가 날 것입니다.

 

프로세스간에는 통신이 가능하기 때문에, Renderer Process 는 작업을 수행하기 위해 Main Process를 호출할 수 있습니다.

Electron 은 보통 Main Process에서만 사용가능한 API들을 노출시키는 remote 라는 모듈을 제공합니다.

Renderer Process에서 BrowserWindow 를 만들기 위해 remote 모듈을 중간자로 사용합니다.

const { remote } = require('electron');
const { BrowserWindow } = remote;

const win = new BrowserWindow();

---

Node.js API 사용하기

Electron 은 Main과 Renderer Process 에서  Node.js 전체 접근이 가능합니다.

이것은 Node.js에서 사용할 수 있는 모든 API들을 Electron 에서 사용할 수 있다는 뜻입니다.

const fs = require('fs');
const root = fs.readdirSync('/');

// 디스크의 최상위 레벨인 / 또는 c:\ 에 있는 모든 파일을 출력하게 됩니다.
console.log(root);

이런 코드를 삽입하게 될 경우에 원격 콘텐츠를 로드하려고 시도한 경우 보안에 중요한 영향을 끼치게 됩니다.

원격 콘텐츠 로드에 대한 더 많은 정보와 지침은 다음 URL에서 확인해 보세요.

https://electronjs.org/docs/tutorial/security