Electron

Electron은 Chromium(fe)와 Node.js(be)를 사용하여 다양한 운영체제에서 직접 설치하는 애플리케이션을 개발 할 수 있는 도구이다.

Electron으로 만들어진 app store에 등록된 애플리케이션을 살펴보면 유명한 어플들이 많이 보인다.

electron은 웹 기반 기술을 사용하기 때문에 우리가 흔히 사용하고 front-end framework 3대장인 angular, react, vue 프레임워크도 같이 사용할 수 있다.

Electron의 기본 구조

Electron 애플리케이션은 크게 두 가지 프로세스로 구성된다. 메인 프로세스(Main Process)와 렌더러 프로세스(Renderer Process)가 있다.

메인 프로세스 (Main Process)

메인 프로세스는 애플리케이션의 수명 주기를 관리하고, 시스템과의 상호 작용을 처리한다. 이 프로세스는 Node.js 환경에서 실행되며, 파일 시스템 접근, 네이티브 GUI 조작, 네트워킹 등을 수행할 수 있다.

메인 스크립트: Electron 애플리케이션은 main.js 또는 index.js와 같은 파일에서 시작됩니다. 이 파일은 애플리케이션을 초기화하고, 윈도우를 생성하며, 주요 이벤트를 관리한다.

윈도우 생성: 메인 프로세스는 BrowserWindow 객체를 통해 새로운 브라우저 윈도우를 생성할 수 있다. 이 윈도우는 웹 페이지(렌더러 프로세스)를 로드하고 표시한다.

const { app, BrowserWindow } = require('electron');

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

렌더러 프로세스 (Renderer Process)

렌더러 프로세스는 각 브라우저 윈도우에서 실행되며, 웹 기술(HTML, CSS, JavaScript)을 사용해 UI를 렌더링한다. 기본적으로 이 프로세스는 독립된 Chromium 인스턴스에서 실행되며, Node.js API에 바로 접근할 수 없다. 하지만 메인 프로세스와의 통신을 통해 간접적으로 시스템 리소스에 접근할 수 있다.

• IPC (Inter-Process Communication): 메인 프로세스와 렌더러 프로세스 간의 통신은 IPC를 통해 이루어진다. 렌더러 프로세스는 ipcRenderer를 사용하여 메인 프로세스에 메시지를 보내고, 메인 프로세스는 ipcMain을 통해 메시지를 수신하여 처리한다.

// 렌더러 프로세스 (renderer.js)
const { ipcRenderer } = require('electron');
ipcRenderer.send('asynchronous-message', 'ping');

// 메인 프로세스 (main.js)
const { ipcMain } = require('electron');
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg); // prints "ping"
  event.reply('asynchronous-reply', 'pong');
});