개요
Electron은 하나의 웹 사이트가 보기 편하게 프로그램으로 돌아간다고 생각해도 좋습니다.
그런데 웹사이트가 커지면 여러 페이지를 관리해야 합니다.
리액트는 상태 관리도 힘들어지고 LocalStorage, Cookie, session 을 관리해야 합니다.
Electron도 제어가 필요합니다. 그것은 바로!!!
Electron 통신
일렉트론은 메인 프로세스와 렌더러 프로세스 가 존재합니다.
Socket.io 처럼 이벤트 날리면 그걸 받고 처리하는 식입니다.
ipcMain, ipcRender 가 존재합니다.
ipcMain
메인 프로세스에서 렌더러 프로세스로 통신할 때,
ipcRenderer는 렌더러 프로세스에서 메인 프로세스로 통신할 때 사용합니다.
말로 해서는 이해가 잘 안됩니다.
예제를 통해 진행해보도록 합시다. ( 주석을 달면서 진행하니 잘 봐주세용~ )
Code
index.html
<!DOCTYPE html>
<html>
<head>
<title>좀비 수 확인하기</title>
</head>
<body>
<p>
<button id="btnCount">좀비 </button>
<button id="btnSteal">좀비 가져오기</button>
<button id="btnBroadcast">좀비 알리기</button>
</p>
<p>
남은 좀비은 <span id="zombieCount"></span>마리 입니다.
</p>
<script>
const electron = require('electron')
const print = (num = 10) => document.getElementById('zombieCount').innerText = num;
// 버튼을 누르면 메인 프로세스(ipcMain)로 보낸다.
document.getElementById('btnCount').onclick = () =>
electron.ipcRenderer.send('reqCount');
document.getElementById('btnSteal').onclick = () =>
electron.ipcRenderer.send('reqSteal');
document.getElementById('btnBroadcast').onclick = () =>
electron.ipcRenderer.send('reqBroadcast');
// 메인 프로세스(ipcMain)로부터 count 신호가 되면 수신된 갯수 데이터를 출력!!!
electron.ipcRenderer.on('count', (event,count) => print(count))
print()
</script>
</body>
</html>main.js
// Modules to control application life and create native browser window
const {app, ipcMain ,webContents ,BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// 2개의 윈도우창을 띄우기 위해 크기 조절
const config = {
width: 500,
height: 300,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
contextIsolation: false
}
}
const first = new BrowserWindow(config)
const second = new BrowserWindow(config)
// 동일한 옵션으로 두 개의 앱을 띄운다.
first.loadFile('index.html')
second.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
// 남은 좀비 수
let zombie = 10
// 각각의 신호가 수신되면 남은 좀비의 수를 응답.
// 응답하는 경우 매개변수로 전달된 event 객체에 reply 함수를 호출하여 데이터 전달.
ipcMain.on('reqCount', (e) => {
e.reply('count',zombie)
})
ipcMain.on('reqSteal', (e) => {
--zombie;
e.reply('count', zombie)
})
// 모두에게 좀비 수를 알리기로 했다면 전체 창에 접근해야 한다.
// event 객체는 요청한 창만 있기 때문에 다른방법을 사용.
// webContents.getAllWebContents() 함수는 모든 WebContents 인스턴스의 배열을 반환.
ipcMain.on('reqBroadcast', (e) => {
const contents = webContents.getAllWebContents();
for (const c of contents) c.send('count', zombie)
})
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
npm startnpm start 로 돌려본 결과 위와 같이 좀비 가져오기를 하면 -1 이 되는데
다른 윈도우 창은 갱신이 안되었습니다.
여기서 좀비 알리기 버튼을 누르면 모든 윈도우 창에 전달이 되는것을 확인할 수 있었습니다.
(socket.io 와 socket.io-client 를 연상케 하였다. )
이렇게 서로 다른 창들을 통신할 수 있게 해주어야 Electron 의 진가를 보일 수 있습니다.
'TMI' 카테고리의 다른 글
| [프로젝트] 엘리스 1차 프로젝트 후기 (0) | 2024.03.05 |
|---|---|
| [프로그래밍 패러다임] 함수형 프로그래밍 (0) | 2024.02.25 |
| 패스트캠퍼스 강의 구매 후기 (0) | 2023.12.02 |
| DevOps 란? (0) | 2023.11.18 |
| 테스트 코드 꿀팁🎉 (0) | 2023.10.25 |
