[TIL 44일차] Electron에서의 프로세스 통신

스스로 적어보는 근황

너무 오랜만에 글을 적어본다.

 

회사 입사 초기라 매우 바쁘기도 했고, 적응하느라 좀 힘들었던 것 같다.

 

얼마 전에 처음으로 휴가를 모아서 사용해서 일본을 갔다왔다.

 

확실히 머리를 비우고 오기 좋았던 것 같다.

 

마음을 다시 잡았을 수 있던 것 같다.

 

블로그를 안적었다고 공부를 안한건 아니지만 블로그를 적지 않으면 이후에 내가 공부했던 흔적이 머리 속에서 쉽게 지워질 것 같다.....

 

회사에서 기존에 맡았던 탐지 엔진 개발과 데스크탑 앱 개발에서 업무가 변경되었다. 정확히 변경되었다기 보다 새 사업이 들어와서 새 사업 팀에 배치되서 그것들을 까지 유지보수할 역량이 부족한 것 같다.

 

Electron

새 사업 팀에 들어가면서 배치 받은 업무는 다음과 같았다.

 

1. 새 플랫폼을 자동으로 PC에 설치하게 해줄 windows 용 설치파일(installer)파일 개발

2. 설치 후 프로그램을 이용할 때 사용할 cli 개발 및 GUI 개발

 

설치 파일 개발은 처음 해봐서 뚝딱 뚝딱 구글링 하면서 만들었다.

 

기본적으로 windows에서 필요한 화면과 기능들을 설치만 하는 것이므로 기본적으로 delphi로 만든 GUI 와 설치 스크립트와 파일 바인딩 후 설치 파일을 만들었다.

 

설치파일은 설치시 일일히 다 직접 설치하는 것이 아닌 기존 완성 파일을 바인딩 후 설치 파일에 종속시켜 가상 이미지로 만들어서 호출하는 방식으로 시간을 단축했다.

 

cli 개발은 생각보다 간단하다. 

 

우리가 node를 통해서 npm 관련 패키지를 다운로드하듯 특정 커맨드에 동작할 수 있는 코드들을 만들어 

 

파일을 추출하거나 분석 및 파티션을 나누는 커맨드들을 실행 파일로 만들어 해결했다.

 

현재 진행중인 진짜 고비는 일렉트론이다.

 

windows 네이티브로 개발하기엔 멀티 플랫폼으로 지원해야하기에 플러터랑 일렉트론이랑 고민하다가 일단 커뮤니티가 큰 일렉트론으로 정했다.

 

중간에 타우리(tauri)라는 새로 나온 프레임워크도 존재해서 고민 했지만 아직 Rust에 익숙하지 않은 것도 있고, 관련 자료가 많이 있지 않아 개발 생산성이 낮아질 것으로 보였다.

 

먼저 일렉트론의 프론트는 react로 개발한다. 일렉트론에서 로컬에서의 제어 즉 웹으로 따지면 백엔드와 같은 부분을 구현하게 되는데 이는 백엔드 코드를 적을 수 있는 부분이 있다.

 

근데 같은 로컬에서 통신하는 것 이기에 통신 방법에는 프로세스 통신을 한다.

 

그렇다고 무조건 소켓이나 파이프로 통신하는게 아니라 다른 일렉트론 코드들을 보면 localhost:3000을 띄우고 거기서 http요청으로 주고 받는 코드들도 있긴하다.

 

아래는 코드 예시와 공식 문서 이다.

 

https://www.electronjs.org/docs/latest/tutorial/ipc

Inter-Process Communication | Electron

 

먼저 일렉트론의 ipc 통신 코드 예시를 봐보자

Main.js

const { app, BrowserWindow, ipcMain } = require('electron/main')
const path = require('node: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()
})

 

 

Preload.js

const { contextBridge, ipcRenderer } = require('electron/renderer')

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

 

위 두개가 일렉트론에서 프론트와 ipc 통신을 하는 코드인데

 

이는 먼저 통신할 channel을 선언하고 그 뒤에 데이터를 보내는게 일반적이다.

 

사용방법은 별로 어렵지 않다.

 

client 부분에서 접근 가능한 전역 변수인 window에 접근하고 그 뒤에 내가 preload.js에서 선언한 키워드에 접근한다.

 

즉, client 에서 window.electronAPI.setTitle('set-title',"제목"); 형식으로 보내면 되는 것.....

 

대충 코드 모양을 보면 느껴지겠지만 통신 방식은 socket방식을 통해 통신한다.

 

근데 이거는 Unix계열기반으로 개발해서 그런거고 Windows 운영체제는 Windows API를 써야되서 Named Pipe 방식으로 통신한다.

 

어디 운영체제에서 사용하기 더 좋다! 라고 말하기엔 막상 POSIX와 Windows API와 같이 표준 운영체제 API를 사용한 것이므로 사용하는 입장에서는 큰 차이는 없다.