Electron 애플리케이션은 메인 프로세스와 렌더러 프로세스로 구성됩니다. 이 둘은 서로 다른 책임을 지며, 직접적으로 Node.js API를 공유하지 않기 때문에 IPC(Inter-Process Communication) 를 통해 상호 작용합니다. IPC를 사용하면 사용자 인터페이스에서 네이티브 API 호출이나 메뉴 동작에 따라 웹 콘텐츠에 변화를 주는 등, 다양한 기능을 구현할 수 있습니다.
Renderer에서 Main(일방향 통신)
렌더러에서 메인으로 메시지를 보내 단방향 작업을 수행합니다. 예를 들어, 창의 타이틀을 동적으로 변경하는 등의 작업을 수행할 수 있습니다.
// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
function createAppWindow() {
const win = new BrowserWindow({
width: 900,
height: 700,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});
// "change-window-title" 채널을 통해 메시지를 수신하면 창 타이틀 변경
ipcMain.on('change-window-title', (event, newTitle) => {
const senderContents = event.sender;
const targetWin = BrowserWindow.fromWebContents(senderContents);
targetWin.setTitle(newTitle);
});
win.loadFile('index.html');
}
app.whenReady().then(createAppWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('myElectronAPI', {
changeTitle: (title) => ipcRenderer.send('change-window-title', title)
});// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>IPC Demo</title>
</head>
<body>
<h1>창 타이틀 변경하기</h1>
<input type="text" id="titleInput" placeholder="새 타이틀을 입력하세요" />
<button id="updateBtn">타이틀 변경</button>
<script src="./renderer.js"></script>
</body>
</html>// renderer.js
const updateBtn = document.getElementById('updateBtn');
const titleInput = document.getElementById('titleInput');
updateBtn.addEventListener('click', () => {
const newTitle = titleInput.value;
// 프리로드에서 노출된 API를 통해 메인 프로세스로 메시지 전송
window.myElectronAPI.changeTitle(newTitle);
});렌더러가 버튼 클릭 시 프리로드 API를 사용해 "change-window-title" 채널로 타이틀 정보를 전송하고, 메인 프로세스는 해당 메시지를 받아 창 타이틀을 변경합니다.
Renderer에서 main(양방향 통신)
렌더러가 메인에 요청을 보내고 결과를 받아오는 양방향 통신입니다. ipcRenderer.invoke와 ipcRenderer.handle를 사용합니다.
// main.js
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const path = require('path');
async function openFileDialog() {
const result = await dialog.showOpenDialog({ properties: ['openFile'] });
if (!result.canceled && result.filePaths.length > 0) {
return result.filePaths[0];
}
return null;
}
function createAppWindow() {
const win = new BrowserWindow({
width: 900,
height: 700,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});
win.loadFile('index.html');
}
app.whenReady().then(() => {
ipcMain.handle('invoke-open-file', openFileDialog);
createAppWindow();
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('myElectronAPI', {
openFile: () => ipcRenderer.invoke('invoke-open-file')
});// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>파일 선택 데모</title>
</head>
<body>
<h1>파일 선택하기</h1>
<button id="openFileBtn">파일 열기</button>
<p>선택한 파일 경로: <span id="filePathDisplay">없음</span></p>
<script src="./renderer.js"></script>
</body>
</html>// renderer.js
const openFileBtn = document.getElementById('openFileBtn');
const filePathDisplay = document.getElementById('filePathDisplay');
openFileBtn.addEventListener('click', async () => {
const filePath = await window.myElectronAPI.openFile();
filePathDisplay.innerText = filePath || '선택된 파일이 없습니다';
});Main에서 Renderer
메인 프로세스에서 렌더러 프로세스로 메시지를 보내고, 렌더러에서는 이를 수신하여 UI를 업데이트하는 경우가 있습니다. 이때는 메인 프로세스의 webContents.send 메서드를 사용합니다.
// main.js
const { app, BrowserWindow, Menu, ipcMain } = require('electron');
const path = require('path');
function createAppWindow() {
const win = new BrowserWindow({
width: 900,
height: 700,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});
// 사용자 정의 메뉴 생성: "증가", "감소" 선택 시 메시지 전송
const appMenu = Menu.buildFromTemplate([
{
label: '컨트롤',
submenu: [
{
label: '증가',
click: () => win.webContents.send('update-counter', 1)
},
{
label: '감소',
click: () => win.webContents.send('update-counter', -1)
}
]
}
]);
Menu.setApplicationMenu(appMenu);
win.loadFile('index.html');
}
app.whenReady().then(createAppWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('myElectronAPI', {
onCounterUpdate: (callback) =>
ipcRenderer.on('update-counter', (event, value) => callback(value))
});// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>카운터 데모</title>
</head>
<body>
<h1>현재 값: <span id="counterDisplay">0</span></h1>
<script src="./renderer.js"></script>
</body>
</html>// renderer.js
const counterDisplay = document.getElementById('counterDisplay');
let currentValue = 0;
window.myElectronAPI.onCounterUpdate((delta) => {
currentValue += delta;
counterDisplay.innerText = currentValue.toString();
});Renderer에서 Renderer(간접 통신)
Electron은 직접적으로 두 렌더러 간에 IPC를 지원하지 않으므로, 보통 메인 프로세스를 중계자로 사용하거나 MessagePort를 전달하는 방법을 사용합니다.
- 메인 중계자 사용: 한 렌더러에서 메인으로 메시지를 보내고, 메인이 이를 다른 렌더러로 전달합니다.
- MessagePort 사용: 메인 프로세스에서 MessagePort를 두 렌더러에 전달하여 직접 통신하게 합니다.
객체 직렬화
IPC는 Structured Clone 알고리즘을 사용하므로, JSON으로 직렬화 가능한 데이터만 전달 가능합니다. DOM 객체, 함수, 또는 일부 Node.js 객체는 전송할 수 없습니다.
'Electron' 카테고리의 다른 글
| [Electron] MessagePorts: 메시지 채널을 통한 프로세스 간 직접 통신 (0) | 2025.03.24 |
|---|---|
| [Electron] 프로세스 샌드박싱: 보안을 위한 실행 격리 (0) | 2025.03.24 |
| [Electron] 컨텍스트 격리(Context Isolation): 보안과 TypeScript로 더 안전하게 (0) | 2025.03.24 |
| [Electron] 프로세스 모델: 메인과 렌더러의 조화로운 협력 (0) | 2025.03.24 |
| [Electron] 튜토리얼 Part 6: 앱 배포 및 자동 업데이트 (0) | 2025.03.24 |