반응형
이 글의 동영상 강의
일렉트론에서 이벤트 처리 개념
- 일렉트론이 실행되면 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앱을 실행하면 메뉴바의 버튼들이 작동하는 것을 확인 할 수 있습니다.
반응형
'일렉트론' 카테고리의 다른 글
| 일렉트론기초-13.Electron + React로 IPC 통신하기 (0) | 2021.11.13 |
|---|---|
| 일렉트론기초-12.React + Electron 한방에 띄우기 (7) | 2021.11.04 |
| 일렉트론기초-11.일렉트론 MySQL 연동 (0) | 2021.10.30 |
| 일렉트론기초-10.일렉트론 사이드 메뉴 만들기 (0) | 2021.10.09 |
| 일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인 (0) | 2021.10.04 |
| 일렉트론기초-07.일렉트론 화면 개발하기 (0) | 2021.10.03 |
| 일렉트론기초-06.일렉트론 메뉴 추가하기 (0) | 2021.10.01 |
| 일렉트론기초-05.React 프로젝트에 일렉트론을 추가하는 법 (0) | 2021.09.29 |
