Electron 일렉트론 Main, Renderer Process 이해하기

Electron

Electron은 웹 기술(HTML, CSS, JavaScript)을 사용하여 데스크톱 애플리케이션을 만들기 위한 오픈 소스 프레임워크다.

Chromium 브라우저와 Node.js 런타임 환경을 내장하고 있어서 웹 개발자들이 친숙하게 데스크톱 애플리케이션을 개발할 수 있다.

 

Main Process

Electron에는 Main Process와 Renderer Process라는 두 개의 별도의 프로세스가 있다.

Main Process는 전체 Electron 애플리케이션에서 단 하나만 존재한다.

 

Main Process는 Node.js 환경에서 동작하며, Electron의 주요 모듈과 네이티브 API를 사용할 수 있다.

주요 기능은 앱의 라이프사이클을 관리하고, 각종 네이티브 API를 노출시켜 Renderer Process에 사용할 수 있도록 하는 것이다.  

 

• 앱 전체 라이프사이클 관리
  • Main Process는 앱이 시작될 때 먼저 실행되며, Renderer Process의 인스턴스를 생성한다. 또한 앱 전체 수명 주기에서 중요한 이벤트(e.g. 앱이 종료될 때의 이벤트)를 처리한다.
• 브라우저 윈도우 관리
• 시스템 트레이와 연동한 기능 구현
  • 시스템 트레이는 운영 체제 작업 표시줄의 알림 영역이다. 사용자가 시스템 트레이에서 프로그램 아이콘을 클릭하면 해당 프로그램이 실행되는 등의 기능을 구현할 수 있다. 
• 네이티브 기능 호출
  • e.g.파일 시스템 접근, 네트워크 요청
• IPC를 통해 Renderer Process와 통신

 

파일 시스템 액세스, 네트워크 액세스 등 보안이 필요한 작업은 Main Process에서만 실행될 수 있다.

 

Renderer Process

Renderer Process는 사용자 인터페이스를 담당하는 웹 페이지를 렌더링한다.

 

Renderer Process는 브라우저 창이 여러 개인 경우, Web Workers*를 사용하는 경우 여러 개가 된다.

각 Renderer Process는 독립적인 JavaScript 환경에서 동작하며, 여러 개의 Renderer Process가 동시에 실행될 수 있다. 

 

(* Web Workers: 스크립트 실행을 비동기로 백그라운드에서 실행 https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)

 

IPC (Inter-Process Communication)

Renderer Process에서 Main Process에서만 수행할 수 있는 작업을 시도하면 보안상의 이유로 예외가 발생한다.

따라서 이러한 작업을 수행해야 할 때는 Renderer Process에서 Main Process에 요청하고, Main Process에서 이를 처리한 결과를 Renderer Process로 다시 보내는 방식으로 처리해야 한다.

 

Electron에서 Main Process와 Renderer Process는 서로 다른 프로세스에서 실행되기 때문에 통신을 위해서는 메시지를 주고받아야 한다.

Main Process와 Renderer Process는 IPC(Inter-Process Communication)를 사용하여 서로 통신할 수 있다.

이를 통해 Main Process와 Renderer Process 간에 데이터를 주고받거나, 각각의 기능을 실행할 수 있다.

 

Renderer Process에서는 ipcRenderer 모듈을, Main Process에서는 ipcMain 모듈을 사용하여 IPC를 구현한다.

 

e.g.

• Renderer Process에서  ipcRenderer.send(channel, data) 메서드를 사용해 Main Process에 메시지 전송
• Main Process에서 ipcMain.on(channel, callback) 메서드를 사용해 해당 채널의 메시지를 받아 처리

 

 

 

ipcRenderer | Electron