Electron - 상단 메뉴 관리

서론

Electron 프로젝트를 처음 만들면, 상단에 다음과 같이 메뉴가 구성되어 있습니다.

Electron 프로그램 상단 메뉴

이번에는 main.js에서 메뉴 구성을 입맛대로 해보고, 개발 시 사용할 메뉴와 실제 프로그램 배포 시 사용할 메뉴를 구분해서 추가하는 방법도 알아보겠습니다.

 

1. "Menu" import

main.js에서 Menu import하기

2. MenuTemplate 작성

메뉴템플릿은 Object의 Array로 구성됩니다. 형식은 아래와 같이 직관적으로 이해할 수 있습니다.

- label : 대메뉴 명칭

- submenu : 대메뉴의 submenu, Object Array형식

- accelerator : 단축키, macOS에서 사용할 때는 키가 다르기 때문에, 삼항 연산자를 사용하여 단축키를 등록합니다.

- click() : 해당 submenu를 클릭했을 때, 동작하는 function

//Create menu template
const mainMenuTemplate = [
  {
    label: "File",
    submenu: [
      {
        label: "Add Item",
        click() {
          createAddWindow();
        },
      },
      { label: "Clear Items" },
      {
        label: "Quit",
        accelerator: process.platform == "darwin" ? "Command+Q" : "Ctrl+Q", //shortcut
        click() {
          app.quit();
        },
      },
    ],
  },
];

3. macOS 예외처리

직접 테스트해보진 않았지만, macOS에서는 기본적으로 상단 메뉴 맨 앞에 의도하지 않은 메뉴가 생긴다고 합니다.

이를 방지하는 방법은 macOS일때만, mainMenuTemplate Array의 맨 앞에 빈 Object를 삽입하는 것입니다.

코드는 아래와 같습니다. mainMenuTemplate 선언부 아래에 작성하시면 됩니다.

//If mac, add empty object to menu
if (process.platform == "darwin") {
  mainMenuTemplate.unshift({}); //push an empty object front
}

4. 개발 시에만 사용할 메뉴 추가

Electron에서는 소스 수정 후 Reload기능, Chromium DevTools를 기본적으로 사용할 수 있습니다.

하지만, 이 기능들은 프로그램이 배포되어 실제로 사용될 때는 필요 없으므로, 개발 버전일때만 해당 메뉴를 추가하는 코드를 추가합니다.

참고로, Reload 기능은 { role: "reload" } 만 추가하는 것으로 추가됩니다.

//Add developer tools item if not in production
if (process.env.NODE_ENV !== "production") {
  mainMenuTemplate.push({
    label: "Developer Tools",
    submenu: [
      {
        label: "Toggle DevTools",
        accelerator: process.platform == "darwin" ? "Command+I" : "Ctrl+I", //shortcut
        click(item, focusedWindow) {
          focusedWindow.toggleDevTools();
        },
      },
      { role: "reload" },
    ],
  });
}

5. app ready event 수정

이제, 메뉴 템플릿은 모두 준비되었으니, 프로그램에 적용하는 것만 남았습니다.

MenuTemplate로 Menu를 만들어, 적용합니다.

아래 코드 두 줄을 app.whenReady() 또는 app.("ready")의 callback function 내부에 작성합니다.

  //build Menu from template
  const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
  //Insert Menu
  Menu.setApplicationMenu(mainMenu);

실행하면 아래와 같이 mainMenuTemplate에 작성한 메뉴들을 확인하실 수 있습니다.

Menu template 적용 후

다음 포스트에서는 child window를 생성하고, ipcMain, ipcRender를 활용하여 부모 창과 값을 주고받는 방법을 알아보겠습니다.