Electron Desktop App Development · 강의

프로세스 간 통신 (IPC)

`ipcMain` 및 `ipcRenderer`와 같은 Electron의 IPC 모듈을 사용하여 메인 프로세스와 렌더러 프로세스 사이에 안전한 통신 채널을 구현하는 방법을 배웁니다.

프로세스 간 통신 (IPC)은(는) CoddyKit의 무료 Electron Desktop App Development 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Electron Desktop App Development 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Electron Desktop App Development 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

What is IPC in Electron?

In Electron, your application runs across two main types of processes: the Main Process and Renderer Processes.

The Main Process manages the app's lifecycle and interacts with the operating system.
Renderer Processes (web pages) display your UI and run your web code.

They can't directly access each other's resources or global variables. This is where Inter-Process Communication (IPC) comes in!

Why IPC is Essential

Imagine your Renderer Process needs to:

Read a file from the user's computer.
Open a native dialog box.
Perform a heavy task without freezing the UI.

These actions require access to Node.js modules or the OS, which are restricted to the Main Process for security and stability. IPC provides a safe way for these processes to talk to each other.

IPC Core Modules: ipcMain & ipcRenderer

Electron provides two special modules for IPC:

ipcMain: Used in the Main Process to listen for and send messages.
ipcRenderer: Used in Renderer Processes to send messages to the main process and listen for replies.

These modules are the backbone of communication between your Electron app's different parts.

Renderer to Main: One-Way Send

The most common communication is from a Renderer Process to the Main Process. You can send a message using ipcRenderer.send().

This is useful for triggering native actions or requesting data from the main process without needing an immediate reply in the renderer.

Code: Renderer to Main (Client)

Here's how your renderer.js would send a message when a button is clicked. You'd also need an index.html with a button (<button id="myButton">) that loads this script.

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

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('myButton');
  if (btn) {
    btn.addEventListener('click', () => {
      ipcRenderer.send('channel-name', 'Hello from Renderer!');
      console.log('Renderer sent message.');
    });
  }
});

Code: Renderer to Main (Server)

This is the main.js code. It sets up the Electron window and uses ipcMain.on() to listen for messages on the specified 'channel-name'.

Note: nodeIntegration and contextIsolation are simplified here. For secure apps, use preload scripts.

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Simplified for demo
      contextIsolation: false // Simplified for demo
    }
  });

  mainWindow.loadFile('index.html');
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// Handle messages from the renderer process
ipcMain.on('channel-name', (event, message) => {
  console.log('Main process received:', message);
  // Acknowledge or perform an action
});

Main to Renderer: One-Way Send

The Main Process can also send messages to a Renderer Process using mainWindow.webContents.send().

This is useful for pushing updates from the main process (e.g., progress updates, data changes) to the UI without the renderer having to request them.

Code: Main to Renderer (Server)

This main.js will send a message to the renderer once the window has finished loading. This time, the ipcMain isn't listening, but sending!

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  // Send a message to the renderer after the window is ready
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.send('main-channel', 'Update from Main!');
    console.log('Main sent message to renderer.');
  });

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Code: Main to Renderer (Client)

In your renderer.js, you'll use ipcRenderer.on() to listen for messages coming from the main process. We'll display it in a <div id="messageDisplay">.

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

document.addEventListener('DOMContentLoaded', () => {
  const messageDiv = document.getElementById('messageDisplay');
  if (messageDiv) {
    ipcRenderer.on('main-channel', (event, message) => {
      messageDiv.innerText = `Received: ${message}`;
      console.log('Renderer received:', message);
    });
  }
});

Request/Reply with Invoke & Handle

For more complex interactions where the Renderer needs a response from the Main Process, Electron offers a request/reply pattern.

ipcRenderer.invoke(channel, ...args): Sends a message from renderer and waits for a response.
ipcMain.handle(channel, listener): In the main process, sets up a handler function that processes the request and returns a value (or a Promise that resolves to a value).

This allows for more structured and asynchronous communication.

Quick Check: IPC Methods

Which of the following statements about Electron's IPC modules are TRUE?

Recap: Inter-Process Communication

Great job! You've learned the fundamentals of Electron's Inter-Process Communication.

IPC is vital for Main and Renderer Processes to safely interact.
ipcMain and ipcRenderer are the core modules.
One-way communication uses ipcRenderer.send() (Renderer to Main) and webContents.send() (Main to Renderer).
For request/reply patterns, ipcRenderer.invoke() and ipcMain.handle() provide a robust solution.

You're now ready to build more interactive and powerful Electron applications!

자주 묻는 질문

“프로세스 간 통신 (IPC)” 강의는 무료인가요?

네 — “프로세스 간 통신 (IPC)” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Electron Desktop App Development 강의 전체를 잠금 해제할 수 있습니다. Electron Desktop App Development 강의에는 총 4개의 강의가 포함되어 있습니다.

“프로세스 간 통신 (IPC)”에서 뭘 배우나요?

`ipcMain` 및 `ipcRenderer`와 같은 Electron의 IPC 모듈을 사용하여 메인 프로세스와 렌더러 프로세스 사이에 안전한 통신 채널을 구현하는 방법을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 Electron Desktop App Development을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Electron Desktop App Development을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Electron Desktop App Development은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“프로세스 간 통신 (IPC)” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Electron Desktop App Development 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Electron Desktop App Development 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Electron Desktop App Development(으)로 돌아가기