[Electron/일렉트론] 즉각적으로 로딩 하기

안녕하세요.

 

Electron에서 즉각적으로 로딩하는 방법에 대해서 글을 작성 해보려고 합니다.

 

Electron은 JavaScript을 통해서 데스크탑 앱을 제작할 수 있는 프레임워크입니다.

 

Electron으로 제작한 앱에서 MacOS 환경에서 Traffic lights에서 종료를 하고, 어떻게 하면 바로 즉각적으로 로딩이 되게 만들 수 있을까요?

 

제가 시도한 방법입니다.

 

일단은 Electron 앱의 윈도우의 close 이벤트를 후킹 하는 방법을 사용 했습니다.

let isAllowQuit = false;
let isShow = true;

 win.on("close", (event) => {
    event.preventDefault();

    if (isShow) {
      isShow = false;
    }

    if (!isShow && !isAllowQuit) {
      win.hide();
    }

    if (!isAllowQuit) {
      isAllowQuit = true;

      return;
    }

    if (isAllowQuit) {
      app.exit(0);
    }
  });

close 이벤트를 후킹하여, Electron 앱을 종료하는 것이 아닌 Electorn의 Window를 숨기는 방법으로 구현을 했습니다.

 

그런 다음에는 activate 되었을 때, 다시 show을 해주어야 합니다.

 

 app.on("activate", () => {
    if (!isShow) {
      isShow = true;
    }

    if (isAllowQuit) {
      isAllowQuit = false;
    }

    if (isShow && !isAllowQuit) {
      win.show();
    }
  });

 

이렇게 했을 때, 별다른 이슈 없이 작동할 것처럼 보이지만 사실은 굉장히 크리티컬한 이슈가 숨어 있습니다.

 

그것은 Mac OS 환경에서 발생 합니다.

 

1. Command + Q로 강제 종료를 했을 때도, hide가 됨.

2. Dock bar에서 아이콘의 메뉴를 눌러서 종료를 해도, hide가 됨.

 

저는 이것에 대해서 고민을 해보았습니다. 그러다가 Electron 공식 문서를 읽다가 해결책의 실마리를 발견 했습니다.

 

역시나 해결책의 실마리는 항상 공식 문서에 있는 경우가 많이 있습니다. (또한, 앱의 라이프 사이클을 정확하게 이해 하는 것도 트러블 슈팅에 큰 도움이 됩니다.)

 

그것은 바로, Command + Q를 눌렀을 때, 모든 windows를 닫으려고 시도를 한다는 것이었습니다.

 

따라서 win2를 선언 해준 다음에,

  // 1. Command + Q
  // 2. Dock에서 종료할 때
  // 1번 케이스와 2번 케이스의 동작은 모든 윈도우를 닫는 동작이다.
  // 하지만 2번 윈도우는 사용자에게 보이지 않기 때문에, 2번 윈도우가 닫히면 앱이 종료되도록 한다.
  const win2 = new BrowserWindow({
    width: 0,
    height: 0,
    minHeight: 0,
    maxHeight: 0,
    minWidth: 0,
    maxWidth: 0,
    title: "",
    name: "",
    darkTheme: true,
    closable: true,
    frame: true,
    icon: path.join(__dirname, "/assets/icons/png/icon.png"),
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, "preload.js"),
    },
    show: true,
  });

 

win2에도 "close" 이벤트를 달아 주면 됩니다.

  // 2번 윈도우가 닫히면, 강제 종료를 의미 한다.
  win2.on("close", (event) => {
    event.preventDefault();

    app.exit(0);
  });

 

마무리로..

app.on("window-all-closed", () => {
  if (isMac) {
    app.quit();
  }
});

 

이렇게 하면, 즉각적인 로딩 (hide & show 이용)과 Command + Q, 그리고 Dock bar에서의 강제 종료 기능까지 가능하게 됩니다.

 

읽어 주셔서 감사합니다.

 

궁금하신 게 있으시면 댓글로 달아 주시면 감사하겠습니다.

 

끝.