Electron

Chromium과 Node.js를 사용하여 윈도우 또는 Mac, 리눅스에서 직접 설치하여 사용할 수 있는 데스크탑 애플리케이션을 개발

크로스플랫폼 지원한다 따라서 Electron만 익혀서 어느 운영체제에서든 동작하는 설치형 애플리케이션을 프로그래밍할 수 있다

Chromium :

오픈소스 프로젝트에서 만든 브라우저

크로미움 기반 브라우저: 크롬, 엣지, 오페라, 네이버웨일, 삼성인터넷 등

이걸 기반으로 여러가지 기능 및 요소를 추가하여 탄생한 것이 크롬이다

IPC :

프로세스 간 통신

Electron은 IPC를 사용하여 Main 프로세스와 Renderer 프로세스 간에 직렬화된 JSON 메시지를 동기적 또는 비동기적으로 통신한다.

on을 통해 메시지 또는 이벤트를 수신

ipcMain.on('CHANNEL_NAME', (evt, payload) => { })

send를 통해 메시지 또는 이벤트를 송신

ipcRenderer.send('CHANNEL_NAME', 'message')

Main Processor:

main.js라고 볼 수 있다 Electron 앱의 진입점이기도 하며, 앱의 Life Cycle을 관리한다

Renderer Processor:

Electron 앱의 Chromium 기반의 브라우저 창을 관리하는 모듈이다 Main과 달리 여러 개가 존재할 수 있다

ipcMain:

Renderer 프로세스(웹 페이지)가 보내는 메시지 또는 이벤트를 동기적 혹은 비동기적으로 처리한다 즉 웹페이지를 처리하는 프로세스인 Renderer 프로세스가 보내는 메시지를 Main 프로세스는 수신하여 처리한다

ipcMain에서 on을 통한 이벤트 수신

const { ipcMain } = require('electron')

ipcMain.on('CHANNEL_NAME', (evt, payload) => {
	console.log(payload)

	//reply를 통해 수신 후 다시 응답 
	evt.reply('IPC_RENDERER_CHANNEL_NAME', 'message')
})

ipcMain은 ipcRenderer처럼 send 메서드를 가지고 있지 않아서 메시지를 보낼때 webContents.send()를 사용해야한다

webContents.send를 이용한 send 방식

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

app.whenReady().then(() => {
	const win = new BrowserWindow({
		//options
})

win.webContents.send('IPC_RENDERER_CHANNEL_NAME', 'message')
})

ipcRenderer:

Main 프로세스로 동기 또는 비동기 메시지를 보낼 수 있고 Main 프로세스에서 webContents.send()로 메시지를 보내면 수신도 가능하다

ipcRenderer에서 send를 통한 이벤트 송신

const { ipcRenderer } = require('electron')

const payload = 'message'

ipcRenderer.send('CHANNEL_NAME', payload)

수신의 경우 on을 사용하여 받을 수 있다