[TIL] 2024-0109 electron IPC 모듈로 통신하기

Facts

- Next.js 로 웹서버에서 띄워주던 UI 를 Electron 내의 renderer 로 옮기는 통합 작업 진행

 

Findings

- Electron 에서 로컬 경로의 이미지를 로드하려면, custom protocol 을 설정해주어야 한다.

그 이유는 일렉트론이 chronium 과 node를 기반으로 하는데 이 두 환경 사이의 상호작용에서 보안 이슈가 발생할 가능성이 있기 때문에 그렇다고 한다. (어떻게 동작하길래 보안 이슈가 발생할 수 있는거지..?)

 

- electron 에서는 main 프로세스와 UI를 띄워주는(브라우저 같은..) renderer 프로세스를 갖는다. 이 두 프로세스 간 통신을 위해서는 IPC 모듈을 사용해야 하는데, 렌더러 프로세스에서 사용할 수 있는 IpcRenderer 와, 메인 프로세스의 IpcMain이 존재한다. 처음에 그냥 아무 렌더러 쪽 코드에서 IpcRender 를 호출했더니, fs 모듈을 읽어올 수 없다는 에러가 발생했다. 그래서 찾아보니, preload 스크립트 파일을 사용해 renderer 실행 전 명령어를 window 에 등록해주고 이를 활용해야 한다. 이 때 preload 에서 contextBridge 를 사용하면 된다.

// preload.ts
const registerIPC = () => {
  contextBridge.exposeInMainWorld('serial', {
    register: () => {
      ipcRenderer.send('register', '레지스터 해보겠다옹~');
    },
  });
};

// main.ts 
// 아래 함수를 윈도우가 로드되기 이전 시점에 호출해서 등록...
function registerMainIPC(port: SerialPort) {
  ipcMain.on('register', () => {
    port.write(Buffer.from(LALALOOP_DISH_CMD.motorDown), function (error) {
      if (error) {
        console.error(`Error on serial`, error.message);
      }
      `레지스터다옹~.`;
    });

    port.flush();
  });
}

// renderer 내에서...
onRegister = async () => {
window.serial.onRegister();
};

 

- 카메라(디바이스)는 어떻게 연동해야 하는가...? 그건 내일 다시 알아보자...

 

Feedback

- 회사에서는 감정이 드러나지 않게 잘 조절합시다... 이미 잘 하고 있다고 생각하지만...