Electron 시작하기 (2)

Electron 공식문서를 번역한 내용입니다. 

Manage your window's lifecycle

​이제 브라우저 창을 열 수 있지만 각 플랫폼에서 더 네이티브하게 느끼도록 하려면 몇 가지 추가 boilerplate code가 필요합니다. 응용 프로그램 창은 OS마다 다르게 동작하며 Electron은 앱에서 이러한 규칙을 구현하는 책임을 개발자에게 전가한다.

일반적으로 process 글로벌의platform속성을 사용하여 특정 운영 체제에 대한 코드를 실행할 수 있습니다.

Quit the app when all windows are closed (Windows & Linux)

윈도우와 리눅스에서 모든 윈도우를 종료하면 응용 프로그램이 완전히 종료된다.

이를 구현하려면 app 모듈의'window-all-closed'이벤트를 listen하고, 사용자가 macOS(darwin)에 있지 않은 경우app.quit()를 호출하십시오.

 

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

 

Open a window if none are open (macOS)

리눅스와 윈도우 앱이 창을 열지 않으면 종료되는 반면, 일반적으로 macOS 앱은 창을 열지 않아도 계속 실행되며 사용할 수 있는 창이 없을 때 앱을 활성화하면 새로운 창이 열립니다.

이 기능을 구현하려면 app 모듈의 activate이벤트를 listen하고 브라우저 창이 열려 있지 않으면 기존 createWindow()메소드를 호출하십시오.

ready 이벤트 전에는 창을 만들 수 없으므로 앱이 초기화된 후에만activate이벤트를 listen해야 합니다. 기존whenReady()콜백 내에서 이벤트 listener를 연결하여 이 작업을 수행합니다.

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

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

참고: 이 시점에서 윈도우 컨트롤이 완전히 작동해야 합니다!

Access Node.js from the renderer with a preload script

이제 마지막으로 해야 할 일은 Electron의 버전 번호와 의존성을 웹 페이지에 출력하는 것입니다.

기본 프로세스에서 노드의 글로벌 process 개체를 통해 이 정보에 액세스하는 것은 간단합니다. 그러나 기본 프로세스에서 DOM은 렌더러의 document컨텍스트에 접근할 수 없으므로 수정할 수 없습니다. 그들은 완전히 다른 과정에 있어요!

참고: 전자 프로세스에 대한 자세한 내용은 프로세스 모델 문서를 참조하십시오.

preload 스크립트를 렌더러에 부착하는 것이 유용한 방법입니다. preload스크립트는 렌더러 프로세스가 로드되기 전에 실행되며 렌더러 글로벌(예: window 및 document)과 Node.js 환경에 모두 액세스할 수 있습니다.

다음과 같이 preload.js 라는 새 스크립트를 생성합니다.

 

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

위의 코드는 Node.js 의process.versions object에 접근하고replaceTexthelper 함수를 실행하려 버전 번호를 HTML 문서에 삽입합니다.

렌더러 프로세스에 이 스크립트를 연결하려면 preload 스크립트의 경로를 기존BrowserWindow 생성자의webPreferences.preload 옵션에 전달하십시오.

// include the Node.js 'path' module at the top of your file
const path = require('path')

// modify your existing createWindow() function
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}
// ...

여기에 사용되는 두 가지 Node.js 개념이 있습니다.

• __dirname 문자열은 현재 실행 중인 스크립트의 경로(이 경우 프로젝트의 루트 폴더)를 가리킵니다.
• path.join API는 여러 경로 세그먼트를 함께 결합하여 모든 플랫폼에서 작동하는 결합된 경로 문자열을 생성합니다.

현재 실행 중인 JavaScript 파일에 상대적인 경로를 사용하여 상대적인 경로가 개발 모드와 패키지된 모드 모두에서 작동할 수 있도록 합니다.

Bonus: Add functionality to your web contents

이 때 프로그램에 기능을 추가하는 방법이 궁금할 수 있습니다.

웹 내용과 상호 작용하려면 렌더러 프로세스에 스크립트를 추가해야 합니다. 렌더러는 정상적인 웹 환경에서 실행되므로index.html파일의</body>태그 바로 앞에<script>태그를 추가하여 원하는 임의의 스크립트를 포함할 수 있습니다.

<script src="./renderer.js"></script>

그런 다음renderer.js에 포함된 코드는webpack을 사용하여 코드를 번들로 묶고 최소화하거나 사용자 인터페이스를 관리하는 것과 같이 일반적인 프런트엔드 개발에 사용하는 것과 동일한 JavaScript API 및 도구를 사용할 수 있습니다.

Recap

위의 단계를 수행한 후 다음과 같이 완벽하게 작동하는 Electron 응용 프로그램이 있어야 합니다.

전체 코드는 아래에서 확인할 수 있습니다.

 

main.js

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

preload.js

// preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

index.html

<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

지금까지 수행한 모든 단계를 요약하면 다음과 같습니다.

• Node.js 응용 프로그램을 bootstrapped하고 Dependency로 Electron을 추가했습니다.
• 우리는 앱을 제어하고 Node.js 환경에서 실행되는 메인 프로세스를 실행하는main.js스크립트를 만들었습니다. 이 스크립트에서는 Electron app과 BrowserWindow모듈을 사용하여 별도의 프로세스(렌더러)로 웹 콘텐츠를 표시하는 브라우저 창을 만들었습니다.
• 렌더러에서 특정 Node.js 기능에 접근하기 위해, 우리는 BrowserWindow 생성자에 preload스크립트를 첨부했다.

Package and distribute your application

새로 만든 앱을 배포하는 가장 빠른 방법은Electron Forge를 사용하는 것입니다.

1. 앱의 개발 의존성으로 Electron Forge를 추가하고import명령을 사용하여 Forge's scaffolding을 설정합니다.

```sh npm2yarn
npm install --save-dev @electron-forge/cli
npx electron-forge import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!
```

2. Forge의 make명령을 사용하여 배포 가능한 제품을 만듭니다.

npm run make

> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Electron Forge는 패키지가 위치할 out폴더를 만듭니다.

// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app