Electron 시작하기 (1) 🙋‍♀️

이번 포스트는, 실제 실행하는 모습이 아닌 electron을 사용할 때 이해하고 있어야 하는 기본적인 개념들에 대해 정리했습니다.

Electron이란?

Electron은 HTML, CSS, Javascript를 사용해 desktop application을 만들기 위한 프레임워크 입니다. Chromium과 Node.js를 single binary file에 추가함으로써, Electron은 Javascript 코드 베이스로 Windows, macOS, Linux에서 동작하는 cross-platfrom-apps를 만들 수 있게 해줍니다.

이런 정의를 가진 Electron은 Javascript 뿐만 아니라 React, Nextjs와도 함께 사용할 수 있습니다.
또한 Next와 Electron을 더 유연하게 같이 사용할 수 있는 도구로 Nextron이 존재하는데, 우리의 프로젝트는 React + Electron을 사용하기로 결정했습니다.

1. 일렉트론은 어떻게 동작할까? 🤔

일렉트론은 메인(main)프로세스와 렌더러(renderer)프로세스, 두가지 프로세스가 존재합니다.
일렉트론 앱은 단 하나의 메인 프로세스를 가지고, 메인 프로세스는 Node.js 기반으로 동작하며 메인 프로세스에서는 렌더러 프로세스들을 관리하고 각각의 렌더러 프로세스는 서로 독립적으로 동작합니다.

메인 프로세스와 렌더러 프로세스 간에 통신이 이뤄져야 하는데, 일렉트론에서는 이를 ipcMain과 ipcRenderer와 같은 IPC 모듈을 통해 프로세스 간의 통신을 이루고 있습니다.

---

2. ⛅ main.js 파일의 역할

우리는 프로젝트의 루트 폴더에 main.js라는 파일을 만들었다고 가정합니다.
electron을 설치한 후, package.json에서 "main":"main.js"라는 코드를 넣어줄 것입니다. 이는 main.js는 모든 Electron 애플리케이션의 entry point라는 것을 나타냅니다.

이 스크립트는 Node.js 환경에서 실행되는 main process를 제어하며 앱의 lifecycle 제어, 기본 인터페이스 표시, 권한이 있는 작업 수행 및 render processes 관리를 합니다.

main.js에 코드를 아래처럼 입력했다고 생각해 봅시다.

// main.js 
console.log(`Hello from Electron 😋`);

일렉트론의 main process는 Node.js runtime이므로 electron 명령으로 임의의 Node.js 코드를 실행할 수 있습니다. electron을 실행시킨 후, 터미널에 Hello from Electron 😋이 출력됐다면, main process entry point가 올바르게 구성되었다고 볼 수 있습니다.

---

⭐ electron에서 each window는 local HTML 파일 또는 remote 웹 주소에서 로드할 수 있는 웹페이지를 표시합니다.
프로젝트에 index.html파일이 있다는 가정 하에 main.js 파일의 내용을 아래처럼 바꾼다고 생각해 봅시다.

// main.js
const { app, BrowserWindow } = require('electron');

const createWindow = () => {
	const win = new BrowserWindow({
    	width : 800,
        height : 500,
    })
    
    win.loadFile('index.html');
}

app.whenReady().then(() => {
	createWindow()
})

첫번째 줄에서는 CommonJS 모듈 구문을 사용해 두 개의 Electron 모듈을 가져옵니다.

app : application의 lifecycle를 제어합니다.
BrowserWindow : app windows를 생성하고 관리합니다.
🚩 ECMAScript 모듈(import구문)은 현재 Electron에서 직접 지원되지 않습니다.

위 코드에서 만든 createWindow() 함수는 웹 페이지를 새 BrowserWindow 인스턴스로 로드합니다. BrowserWindows는 앱 모듈의 ready 이벤트가 발생한! 후에만 생성할 수 있습니다.

이제, electron을 실행하면 웹 페이지를 표시하는 창이 성공적으로 열릴 수 있습니다.
앱이 창에 표시하는 각 웹페이지는 renderer process라는 별도의 프로세스에서 실행됩니다.

✔ 이때, renderer process는 일반적인 프론트엔드 웹 개발에 사용하는 것과 동일한 JavaScript api 및 도구에 액세스 할 수 있습니다.

2-1. 🌼 main.js에서 앱 창의 수명주기를 관리하다,

application windows는 운영체제 마다 다르게 작동합니다.

기본적으로 이러한 규칙을 적용하는 대신 일렉트론은 사용자가 이를 따르고자 할 경우 앱 코드에서 이를 구현할 수 있는 선택권을 제공합니다.

앱 및, BrowserWindow 모듈에서 발생하는 이벤트를 수신하여 기본 창 규칙을 구현할 수 있습니다.

electron을 실행할 수 있는 플랫폼 종류

 - win32(Windows)
 - linux(Linux)
 - darwin(macOS)

window 및 linux에서 모든 창을 닫으면 일반적으로 응용 프로그램이 완전히 종료됩니다.

우리가 만드는 일렉트론 앱에서 이 패턴을 구현하려면 main.js에서 window-all-closed 이벤트를 수신하고 app.quit()를 호출해 사용자가 앱을 사용하지 않는 경우 종료합니다.

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') app.quit()
})

위의 코드를 main.js에 입력하면 앱을 닫았을 때 프로그램이 종료되는 것을 볼 수 있습니다.

---

🚩 반대로 macOS 앱은 일반적으로 창이 열리지 않아도 계속 실행됩니다. 사용 가능한 창이 없을 때 앱을 활성화 하면 새 창이 열립니다.

이 기능을 구현하려면 앱 모듈의 활성화 이벤트를 수신하고 열려 있는 BrowserWindows가 없는 경우 기존 createWindow() 메서드를 호출합니다.

app.whenReady().then(() => {
	createWindow()
    
    app.on('activate', () => {
    	if (BrowserWinodw.getAllWindows().length === 0) createWindow()
    })
})

위 코드를 main.js에 추가하면 이제 사용 가능한 창이 없을 때, 앱을 활성화 하면 새 창이 열리는 것을 알 수 있습니다.

---

⭐ 2-1의 내용들을 바탕으로 기본적인 main.js의 구성을 보자면, 아래와 같습니다.

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

const createWindow = () => {
	const win = new BrowserWindow({
    	width : 800, 
        height : 600
    })
    
    win.loadFile('index.html')
}

app.whenReady().then(() => {
	createWindow()
    
    app.on('activate', () => {
    	if (BrowserWinodw.getAllWindows().length === 0) {
        	createWindow()
        }
    })
})

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
    	app.quit()
    }
})

3. PreloadScript를 사용해보기

🔺 preload script란 ?
일렉트론의 메인 프로세스는 전체 운영체제 접근 권한이 있는 Node.js 환경입니다. 일렉트론 모듈 외에도 Node.js 내장 및 npm을 통해 설치된 모든 패키지에 엑세스 할 수 있습니다.
반면, 렌더러 프로세스는 웹 페이지를 실행하고 보안상의 이유로 기본적으로 Node.js를 실행하지 않습니다.
그래서 일렉트론의 서로 다른 프로세스(메인, 렌더러) 유형을 함께 연결하려면 preload라는 특수 스크립트를 사용해야 합니다.
-> 즉, Node.js를 렌더러에서 직접적으로 사용할 수 없기 때문에 preload를 통해 받아와 사용하는 것이라 볼 수 있습니다.

preload scripts는 웹페이지가 renderer에 load 되기 전에 주입됩니다.
이 때, 렌더러에 필요한 기능을 추가하려면 preload에서 contextBridge api를 통해 global objects를 정의할 수 있습니다.

---

🚩 preload experience

preload.js 파일을 루트 폴더에 생성 후, 아래처럼 Chrome, Node 및 Electron 버전을 renderer에 노출하는 코드를 작성합니다.

// preload.js

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
	node : () => process.versions.node,
    chrome : () => process.versions.chrome,
    electron : () => process.versions.electron,
})

preload 스크립트를 renderer process에 연결하기 위해선 main.js의 BrowserWInodw 생성자의 webPreferences.preload 옵션에 전달해야 합니다.

// main.js
const { app, BrowerWindow } = require('electron')
const path = require('path');

const createWindow = () => {
	const win = new BrowserWindow({
    	width : 800,
        height : 600,
        webPreferences : {
        	preload : path.join(__dirname, 'preload.js'),
        },
    })
   	win.loadFie('index.html')
}

app.whenReady().then(() => {
	createWinow()
})

- __dirname : 문자열은 현재 실행 중인 스크립트의 경로를 가리킵니다.
- path.join : 여러 경로를 결합해 결합된 경로 문자열을 생성합니다.

이제 renderer.js라는 파일이 있다는 가정 하에 버전 정보를 가져올 수 있습니다!

// renderer.js

const information = document.getElementById('info')
information.innerText = `This app is using Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`

이제, index.html에 renderer 스크립트를 넣으면 앱 실행시 버전 정보가 나오는 것을 확인할 수 있습니다.

4. 프로세스 간 통신 🔥

위에서 말한 바와 같이, 일렉트론의 메인 프로세스와 렌더러 프로세스는 서로 다른 역할을 하며 상호 교환할 수 없습니다.

다시 한 번 정리하자면 renderer process에서 직접 node.js api에 액세스하거나 main process에서 HTML DOM에 액세스할 수 없습니다.

🎁 이 문제에 대한 해결책은 프로세스 간 통신(IPC)를 위해 일렉트론의 ipcMin 및 ipcRenderer 모듈을 사용하는 것입니다.

웹 페이지에서 main process로 메시지를 보내려면 ipcMain.handle을 사용해 main process handler를 설정한 다음 ipcRenderer.invoke를 호출하는 함수를 실행하여 preload script에서 handler를 trigger 할 수 있습니다.
-> 저같은 경우 handler로 함수를 등록하고 이를 preload에서 호출한다고 이해했습니다.

• 아래와 같이 renderer, preload, main 스크립트를 설정한다고 생각해봅시다.

// renderer.js
const func = async () => {
	const response = await window.versions.ping()
    console.log(response) // prints out 'pong'
}

func()

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('versions', {
	node : () => process.versions.node,
    chrome : () => process.versions.chrome,
    ping : () => ipcRenderer.invoke('실행'),
    electron : () => process.versions.electron,
})

// main.js

const createWindow = () => {
	const win = new BrowserWindow({
    	width : 800,
        height : 600,
        webPreferences : {
        	preload : path.join(__dirname, 'preload.js'),
        },
     })
     ipcMain.handle('실행', () => '실행!')
     win.loadFile('index.html')
}

우리는 main에서 '실행'이라는 채널로 함수를 등록하고, preload에서 '실행'이라는 채널을 호출하고 있습니다. 그리고 이를 renderer 스크립트에서 불러와 사용하는 것을 볼 수 있습니다.
-> 이렇게 렌더러에서 node.js api를 직접 구현하는 것이 아닌, preload를 통해 메인과 렌더러가 통신하는 방법을 알 수 있습니다.

5. context-isolated process ⚒

우리가 electron의 서로 다른 프로세스의 통신 방법을 완벽히 파악하기 위해선, preload script를 사용해 Node.js를 import 해오는 것과 context-isolated renderer process에서 electron 모듈을 가져오는 것을 이해해야 합니다.

1) Renderer to main example

renderer process에서 main process로 단방향 IPC 메시지를 실행하려면 ipcRenderer.send API를 사용해 메시지를 보낸 다음 ipcMain.on api에서 수신할 수 있습니다.

아래 코드는 단방향 통신의 예시입니다.

// renderer.js

const seetButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
	const title = titleInput.value
    window.electronAPI.setTitle(title)
})

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
	setTitle : title => ipcRenderer.send('set-title', title),
})

// main.js
const { app, BrowserWindow, ipcMain } = require("electron")
const path = require("path")

function createWindow() {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  })

  ipcMain.on("set-title", (event, title) => {
    const webContents = event.sender
    const win = BrowserWindow.fromWebContents(webContents)
    win.setTitle(title)
  })

  mainWindow.loadFile("index.html")
}

app.whenReady().then(() => {
  createWindow()

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit()
})

2) Renderer to main example

양방향 IPC의 일반적인 애플리케이션은 renderer process 코드에서 main process 모듈을 호출하고 결과를 기다리는 것입니다.

이는 ipcMain.handle과 쌍을 이루는 ipcRenderer.invoke를 사용해 수행할 수 있습니다.

아래 코드는 양방향 통신의 예시입니다.

// renderer.js
const btn = document.getElementById('btn')
const filePathElement = document.getElementById('filePath')

btn.addEventListener('click', async () => {
	const filePath = await window.eletronAPI.openFile()
    filePathElement.innerText = filePath
})

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('eletronAPI', {
	openFile : () => ipcRenderer.invoke('dialog:openFile),
})

// main.js
const { app, BrowserWindow, ipcMain, dialog } = require("electron")
const path = require("path")

async function handleFileOpen() {
  const { canceled, filePaths } = await dialog.showOpenDialog()
  if (canceled) {
    return
  } else {
    return filePaths[0]
  }
}

function createWindow() {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  })
  mainWindow.loadFile("index.html")
}

app.whenReady().then(() => {
  ipcMain.handle("dialog:openFile", handleFileOpen)
  createWindow()

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit()
})

3) Main to renderer example

메인 프로세스에서 렌더러 프로세스로 메시지를 보낼 때 메시지를 받는 렌더러를 지정해야 합니다. 메시지는 WbContents 인스턴스를 통해 renderer process로 전송되어야 합니다.

이 WebContents 인스턴스에는 ipcRenderer.send와 동일한 방식으로 사용할 수 있는 send 메서드가 포함되어 있습니다.

// main.js
const { app, BrowserWindow, Menu, ipcMain } = require('electron')
const path = require('path')

function createWindow() {
	const mainWindow = new BrowserWindow({
    	webPreferences : {
        	preload : path.join(__dirname, 'preload.js'),
        },
    })
    
    const memu = Memu.buildFromTemplate([
    	{
        	label : app.name,
            submenu : [
            	{
                  click : () => mainWindow.webContents.sned('update-counter', 1),
                  label : 'Increment',
                },
                {
                  click : () => mainWindow.webContents.send('update-counter', -1),
                  label : 'Decrement',
                }
              ]
            },
	])
    
    Memu.setAppicationMemu(menu)
    mainWindow.loadFile('index.html')
    
    // Open the DevTools
    mainWindow.webContents.openDevTools() // 웹처럼 앱에서도 개발자 창을 열어준다.
    
app.whenReady().then(() => {
	ipcMain.on('counter-value', (_event, value) => {
    	console.log(value)
    })
    createWindow()
    
    app.on('activate', function () {
    	if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') app.quit()
})

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
	handlerCounter : callback => ipcRenderer.on('update-counter', callback)
})

여기까지, 우리가 일렉트론을 사용할 때 알아둬야 할 중요한 개념에 대한 정리를 했습니다. 다음 포스트에는 React와 함께 사용한 실제 실행 과정을 담아보도록 하겠습니다.☺

출처 :
https://tech.kakao.com/2021/08/17/frontend-growth-11/
https://www.electronjs.org/docs/latest/
https://sonicce99.github.io/electron/#learning-goals-1