일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)

이 글의 동영상 강의

https://youtu.be/si9l7uXKeq8

일렉트론에서 이벤트 처리 개념

IPC Communication

• 일렉트론이 실행되면 main과 renderer 두개의 프로세스가 실행됩니다.
• main은 native 기능을, renderer는 web 개발 모듈의 화면 처리를 담당합니다.
• main과 rederer 사이의 통신은 IPC(Inter Process Communication)가 담당합니다.
• 일렉트론 IPC는 ipcMain과 ipcRenderer 두가지가 있습니다.
• ipcMain 은 main 프로세스에서 ipcRenderer는 renderer 프로세스에서 사용되며 상호간 communication에 사용됩니다.

일렉트론 디폴트 타이틀바 제거

• index.js의 createWindow에서 frame: false 를 추가합니다.

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation : false
    }
  });
  
  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

버튼의 기능 추가하기

• src/function.js 파일을 추가합니다.
• function.js에 다음 코드를 추가합니다.
• ipcRender의 send를 이용하여 main 프로세스로 이벤트를 요청합니다.

const { ipcRenderer } = require('electron');
const ipc = ipcRenderer;

var btnMin = document.getElementById("min");
var btnMax = document.getElementById("max");
var btnClose = document.getElementById("close");

btnMin.addEventListener("click", ()=>{
    ipc.send('minimizeApp');
});
btnMax.addEventListener("click", ()=>{
    ipc.send('maximizeApp');
});
btnClose.addEventListener("click", ()=>{
    ipc.send('closeApp');
});

• index.html의 body 마지막에 function.js를 추가합니다.

<script src='./function.js'></script>

Main 프로세스에서 이벤트 처리하기

• index.js에 ipcMain을 추가합니다.

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

• index.js의 createWindow function에 callback function을 추가합니다.

  ipc.on('minimizeApp', ()=>{
    mainWindow.minimize();
  })

  ipc.on('maximizeApp', ()=>{
    if(mainWindow.isMaximized()){
      mainWindow.restore();
    } else {
      mainWindow.maximize();
    }
  })

  ipc.on('closeApp', ()=>{
    mainWindow.close();
  })

앱을 실행합니다.

npm start

앱을 실행하면 메뉴바의 버튼들이 작동하는 것을 확인 할 수 있습니다.