Electron 의 핵심 Preload

contextBridge

preload 스크립트 파일은 node, DOM, electron API 세가지의 context 에 접근이 가능하기 때문에 bridge 역할을 할 수 있다.

contextBridge 를 통해서 변수, 함수, 객체를 전달할 수 있다.

 

main.js

function createWindow() {
  const win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });
  win.webContents.openDevTools();
  win.loadURL("http://localhost:5173");
}

 

preload.js

const { contextBridge } = require("electron");

contextBridge.exposeInMainWorld("versions", {
  node: process.versions.node,
  chrome: process.versions.chrome,
  electron: process.versions.electron,
});

 

app.vue ( renderer.js )

<script setup>
console.log(window.versions)
</script>

<template>
  <div>
    <h1>Hello Kong</h1>
  </div>
</template>

<style scoped>

</style>

 

processes 간 통신하기 ipcMain, ipcRenderer

contextBridge 는 값을 전달할 수 있지만 실제로 서로다른 프로세스에 바로 접근하진 못한다.

그래서 ipcMain 과 ipcRenderer 를 통하여 서로간 이벤트를 발생시켜 통신할 수 있다.

 

preload.js

아래 코드처럼 invoke 객체 자체를 혹은 ipcRenderer 자체를 브라우저에 삽입하는 행위는 매우 높은 권한을 브라우저에 노출시키는 것으로 공식문서에서는 권장하지 않습니다.

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("app", {
  invoke: ipcRenderer.invoke,
});

 

main.js

반드시 win.loadURL or win.loadFile 이전에 이벤트를 선언해야 합니다.

function createWindow() {
  const win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });
  win.webContents.openDevTools();

  ipcMain.handle("ping", () => {
    return fs.readdirSync(__dirname);
  });

  win.loadURL("http://localhost:5173");
}

 

app.vue

<script setup>
import {reactive} from "vue";

const data = reactive({
  dir:[]
})

async function handleClick(){
  const res = await app.invoke('ping')
  data.dir = res;
}

</script>

<template>
  <div>
    <h1>Versions</h1>
    <button @click="handleClick">invoke</button>
    <h2>파일 리스트</h2>
    <ul>
      <li v-for="file in data.dir">
        {{file}}
      </li>
    </ul>
  </div>
</template>

<style scoped>

</style>