230814 - Electron 구조

오늘 내가 배운 것

1. Main Process

2. Renderer Process

3. Main-Renderer 통신

 

 

일렉트론 구조

일렉트론은 크게 2가지의 프로세스를 가지고 있다.

Main Process와 Renderer Process이다.

1. Main Process

메인 프로세스는 package.json의 main으로 지정해두었던 main 스크립트를 실행하는 프로세스를 말한다. 메인프로세스에서 실행되는 스크립트는 웹페이지를 GUI로 표시한다. Electron 앱은 항상 하나의 메인 프로세스만을 가진다.

Main Process의 기능 및 역할

• 애플리케이션의 생명 주기 관리
  • 애플리케이션의 시작부터 종료까지 전체 생명 주기를 제어하고 필요한 로직을 처리한다.
• 브라우저 윈도우 생성
  • ‘BrowserWindow’객체를 이용하여 브라우저 창을 생성하고 웹 페이지를 로드하여, GUI로 보여준다.
• 네이티브 기능 접근
  • 메인 프로세스는 운영 체제의 파일 시스템, 네트워크, 하드웨어 등의 네이티브 자원에 직접 접근할 수 있다.
• 렌더러 프로세스와의 통신
  • 메인프로세스는 렌더러 프로세스와 IPC를 통해 통신한다.이를 이용해서 네이티브 기능과 웹페이지 간의 상호작용을 지원한다.

2. Renderer Process

렌더러 프로세스는 웹 페이지의 렌더링과 관련된 모든 작업을 처리하며 Chromium을 사용해서 웹페이지를 보여준다. 크로미움을 사용하기 때문에 크로미움의 멀티 프로세스, 아키텍쳐를 사용한다. 각각의 Electron 웹페이지는 자체 프로세스로 동작한다.

Renderer Process 기능 및 역할

• 웹 페이지 렌더링
  • 렌더러 프로세스는 Chrominum의 웹 렌더링 엔진을 사용하여 웹 페이지를 렌더링한다. 웹 페이지는 HTML/CSS, JS같은 웹 기술을 이용해서 UI를 구성할 수 있다.
• 각 창마다 독립적인 프로세스
  • Electron에서 각 브라우저 윈도우는 독립된 렌더러 프로세스를 가진다. 그래서 하나의 윈도우에서 오류가 발생하더라도 다른 윈도우에는 영향을 미치지 않는다.
• DOM과 JS API 접근
  • 렌더러 프로세스는 웹 브라우저와 같이 DOM을 직접 조작하고 JS API를 사용할 수 있다.
• 메인 프로세스와의 통신
  • 렌더러 프로세스는 메인 프로세스와 IPC를 통해 통신할 수 있으며, 이를 이용해서 네이티브 자원에 접근하거나 다른 렌더러 프로세스와 상호 작용할 수 있다.
• 보안
  • 렌더러 프로세스는 직접 네이티브 자원에 접근할 수 없고 메인 프로세스를 통해 요청해야 하기 때문에 악의적인 코드의 실행을 제한할 수 있다.

3. Main-Renderer 통신

메인프로세스와 렌더러 프로세스가 서로 통신하는 방법으로 remote 모듈과 IPC 모듈을 이용할 수 있다.

remote 모듈

메인 프로세스에서만 사용가능한 API들을 렌더러 프로세스에서 이용할 수 있게 해주는 모듈이다.

IPC 모듈

• ipcMain
  • main 프로세스에서 renderer 프로세스로 비동기 통신을 한다.
• ipcRenderer
  • renderer 프로세스에서 main 프로세스로 비동기 통신을 한다.
• IPC 모듈을 이용하여 메세지 주고 받기

모듈 import

//main Process
const { ipcMain } = require("electron")

//renderer Process
const { ipcRenderer } = require("electron")

 

main Process

// 이벤트 수신을 위한 등록
ipcMain.on("eventName", (event, args) =>{
	//코드 작성
	event.reply("responseEventName", responseArgs)
})

 

renderer Process

//main 프로세스로 메세지 전송 
ipcRenderer.send("eventName", args)

//응답 대기
ipcRenderer.on("responseEventName", (event, args)=>{
	//응답 처리
})

 

통신을 이용하여 할 수 있는 기능

• 창 관리 : 렌더러 프로세스에서 사용자의 액션에 따라서 새 창을 열고 기존 창을 닫는 창 관리 작업을 할 수 있다.
• 네이티브 자원 조작 : 메인 프로세스는 OS 수준의 네이티브 자원에 접근할 수 있어서 렌더러 프로세스에서 메인 프로세스로 요청을 보내 파일 시스템 작업, 네트워크 통신, 하드웨어 정보 수집 등을 할 수 있다.
• 상태 공유 : 여러 렌더러 프로세스간에 상태를 공유해야할 때, 메인 프로세스를 중앙 상태 저장소로 이용하여 데이터를 공유할 수 있다.
• 보안 제어 : 일부 보안에 민감한 작업은 메인 프로세스에서만 동작이 가능하고 이러한 작업을 렌더러 프로세스에서는 요청하고 응답 받을 수 있다.
• 네이티브 메뉴 및 알림 : 렌더러 프로세스에서 특정 이벤트 발생 시, 메인 프로세스에 알림을 보내 네이티브 메뉴를 변경하거나 시스템 알림을 표시할 수 있다.
• 외부 프로세스 관리 : 렌더러 프로세스에서 요청을 통해 메인프로세스가 외부 프로세스를 시작하고 제어할 수 있도록 한다.
• 사용자 설정 관리 : 사용자 설정을 메인 프로세스에서 관리하고, 렌더러 프로세스가 해당 설정을 읽고 변경할 수 있도록 설정 가능하다.
• 플러그인 또는 확장 기능 : 렌더러 프로세스에서 발생하는 특정 이벤트에 대한 응답으로 메인 프로세스에서 추가 기능을 수행하도록 하여 플러그인, 또는 확장 기능을 구현할 수 있다.

 

메인 프로세스와 렌더러 프로세스 간의 통신은 Electron 애플리케이션의 복잡한 작업을 가능하게 하고, 사용자 인터페이스와 백엔드 로직간의 상호작용을 지원한다.