Electron Desktop App Development · 강의

네이티브 메뉴 및 상황별 메뉴

사용자에게 익숙한 탐색 기능과 선택지를 제공하도록 사용자 지정 애플리케이션 메뉴, 상황별 메뉴 및 트레이 메뉴를 구현합니다.

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

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

Native Menus in Electron

Electron lets you build desktop apps using web technologies. But desktop apps also need native features like menus!

Native menus offer a familiar experience to users, fitting seamlessly into their operating system. Electron's Menu module allows you to create these.

Application Menus: The main menu bar (File, Edit, View).
Context Menus: Right-click menus specific to an element.
Tray Menus: Menus for icons in the system tray or dock.

Building the Main Menu Bar

The Application Menu is the main menu bar at the top of your app window (Windows/Linux) or the top of the screen (macOS).

It usually contains standard options like "File", "Edit", "View", and "Help". These menus make your app feel native and provide essential navigation.

You define its structure using a JavaScript array of objects, called a menu template.

Code: Basic Application Menu

Let's create a minimal application menu. This code snippet goes into your Electron app's main.js file.

It defines a "File" menu with an "Exit" option that quits the app. (Note: nodeIntegration: true, contextIsolation: false are used here for simplicity in examples, but often require more secure configurations for production apps).

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

let mainWindow;

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

  mainWindow.loadFile('index.html'); // Ensure you have an index.html file

  const template = [
    {
      label: 'File',
      submenu: [
        {
          label: 'Exit',
          accelerator: 'CmdOrCtrl+Q',
          click() { app.quit(); }
        }
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);

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

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

Advanced Menu Items & Roles

Menu items can have special roles that provide standard functionality (like 'copy', 'paste', 'quit') and ensure platform-specific behavior.

You can also create nested menus (submenus) to organize options better. Accelerators (keyboard shortcuts) can be added for quick access.

role: 'quit': Quits the app.
role: 'separator': Adds a dividing line.
accelerator: 'CmdOrCtrl+Z': Defines a keyboard shortcut.

Code: Full Application Menu

Let's enhance our application menu. We'll add an "Edit" menu with standard roles and a "Help" menu with a custom item.

Notice how roles simplify common actions, and submenus keep the main menu clean.

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  const template = [
    {
      label: 'File',
      submenu: [
        { label: 'New', accelerator: 'CmdOrCtrl+N' },
        { type: 'separator' },
        { label: 'Exit', role: 'quit' }
      ]
    },
    {
      label: 'Edit',
      submenu: [
        { label: 'Undo', role: 'undo' },
        { label: 'Redo', role: 'redo' },
        { type: 'separator' },
        { label: 'Cut', role: 'cut' },
        { label: 'Copy', role: 'copy' },
        { label: 'Paste', role: 'paste' }
      ]
    },
    {
      label: 'Help',
      submenu: [
        { label: 'About App', click() { console.log('About clicked!'); } }
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);

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

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

Dynamic Context Menus

Context menus are those "right-click" menus that appear when you interact with specific elements or areas of an application.

Unlike the static application menu, context menus are often dynamic, changing based on what you've clicked on. They're built using the same Menu module.

They are typically created in the main process and then displayed (popped up) from the renderer process via Inter-Process Communication (IPC).

Code: Creating a Context Menu

Here's how to define a simple context menu. For this example, we'll demonstrate it being popped up from the main process after a delay for simplicity. In a real app, it's usually triggered by a right-click event in the renderer process, communicating with the main process.

The popup() method displays the menu.

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  const contextMenuTemplate = [
    { label: 'Inspect Element', click() { mainWindow.webContents.openDevTools(); } },
    { type: 'separator' },
    { label: 'Reload Page', role: 'reload' }
  ];

  const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);

  // For demonstration: show context menu after a delay
  setTimeout(() => {
    contextMenu.popup({ window: mainWindow });
    console.log('Context menu popped up!');
  }, 3000);

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

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

System Tray & Dock Menus

A tray icon (also known as a status bar icon on macOS or system tray icon on Windows/Linux) allows your application to run in the background and provide quick access to common actions.

The Tray module in Electron lets you create these icons and attach a tray menu to them, which appears when the user interacts with the icon (e.g., right-click).

Code: Basic Tray Menu

This example shows how to create a simple tray icon with a context menu. Remember to provide a small icon file (e.g., icon.png) in your project root.

The tray icon will appear in your system's notification area or dock. Clicking the tray icon will toggle the main window's visibility.

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

let mainWindow;
let tray;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    show: false, // Start hidden for tray app
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

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

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

  // Path to your icon file (e.g., in the same directory as main.js)
  const iconPath = path.join(__dirname, 'icon.png'); 
  tray = new Tray(iconPath);

  const contextMenu = Menu.buildFromTemplate([
    { label: 'Open App', click: () => { mainWindow.show(); } },
    { label: 'Toggle DevTools', click: () => { mainWindow.webContents.toggleDevTools(); } },
    { type: 'separator' },
    { label: 'Quit', click: () => { app.quit(); } }
  ]);

  tray.setToolTip('My Electron Tray App');
  tray.setContextMenu(contextMenu);

  tray.on('click', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });
});

app.on('before-quit', () => {
  // Clean up tray icon before quitting to prevent memory leaks
  if (tray) tray.destroy();
});

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the dock icon is clicked
  if (mainWindow === null) createWindow();
});

// For apps with tray icons, you might not want to quit when all windows are closed
// app.on('window-all-closed', () => {
//   if (process.platform !== 'darwin') app.quit(); 
// });

Menu Types Check

You've learned about different types of native menus in Electron.

Which of the following statements about Electron menus is TRUE?

Menus: Key Takeaways

Well done! You've learned how to integrate native menus into your Electron applications.

Use the Menu module to create application, context, and tray menus.
Define menu structures using menu templates (arrays of objects).
Leverage menu item roles for standard functionality and platform consistency.
Application menus are for the main window bar, context menus for dynamic right-click options, and tray menus for system tray/dock icons.
Always use Menu.buildFromTemplate() and Menu.setApplicationMenu() for the main app menu.

These native touches greatly improve the user experience of your desktop app!

자주 묻는 질문

“네이티브 메뉴 및 상황별 메뉴” 강의는 무료인가요?

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

“네이티브 메뉴 및 상황별 메뉴”에서 뭘 배우나요?

사용자에게 익숙한 탐색 기능과 선택지를 제공하도록 사용자 지정 애플리케이션 메뉴, 상황별 메뉴 및 트레이 메뉴를 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Electron Desktop App Development을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“네이티브 메뉴 및 상황별 메뉴” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

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