[electron] 1. Building your first App

 

23. 9. 19.

- Could -

이 글은 어쩌다가 electron을 하게 된 학습 기록입니다. 철저하게 개인의 이해 목적으로 쓰여져 있으며 상당한 오류를 포함하고 있을 가능성이 있음을 사전에 알립니다.

1. Electron 이란?

일렉트론은 데스크톱앱을 JS, HTML, CSS를 이용해서 build를 가능하게 하는 프레임워크다.
단일 바이너리 파일에 Chromium과 Node.js를 임베드하여 단일 JS 코드베이스로 windows, macOS, Linux에서 작동하는 크로스 플랫폼 앱을 제작할 수 있다.

electron 설치시 주의점

- 프로덕션환경에서는 패키지를 설치할 필요가 없으므로 종속성 목록인 devDependencies로 설치한다.

npm install electron --save-dev

Importing modules

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

 

- app 은 앱의 이벤트 라이프사이클을 제어한다.
- BrowserWindow 는 app의 창을 생성하고 관리한다.

표기규칙
- 일렉트론은 일반적인 자바스크립트 규칙을 따름
- 파스칼케이스 모듈은 인스턴스화 가능한 클래스 생성자
- 카멜케이스 모듈은 인스턴스화 불가능

 

ECMAScript 모듈들은 현재 일렉트론에서 바로 가져올 수 없다.
- i.e. using `import` to load a module
- 쉽게 말해서 import 문을 사용해서 electron을 가져올 수 없다.

Calling your function when the app is ready

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

- 일렉트론의 대다수 모듈은 node의 비동기 이벤트 중심 아키텍처를 준수한다. 따라서 app의 모든 준비가 끝났을때 createWindow()를 호출한다.

Managing your app's window lifecycle

OS마다 앱의 창은 다르게 작동한다. 일렉트론은 이러한 규칙을 기본적으로 적용하지만, 사용자가 원하는 경우 앱 코드내에서 규칙을 구현할 수 있는 선택권을 제공한다. 앱과 브라우저창 모듈에서 발생하는 이벤트를 수신하여 창 규칙을 구현 할 수 있다.

윈도우와 리눅스에서 모든 창이 닫혔을때 앱 종료하기

- 윈도우와 리눅스는 기본적으로 모든 창이 닫히면 앱이 완전히 종료된다.
- 일랙트론 앱으로 해당 기능을 구현하려면 app.quit()를 호출해야 한다.

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

macOS에서 앱 실행하기

- macOS는 창이 열려있지 않아도 기본적으로 앱이 실행중이다. 사용 가능한 창이 없을 때 앱을 활성화하면 새 창이 열린다.
- 이 기능 구현을 위해서는 앱 모듈의 활성화 이벤트를 수신대기하고 있다가, 열려 있는 BrowserWindows가 없는 경우에 createWidow() 메서드를 호출해야한다.
- 준비 이벤트 이전에는 창을 만들 수 없으므로 앱이 초기화 된 후에만 활성화 이벤트를 수신해야하고, 이렇게 하려면 whenReady() 콜백 내에서 활성화 이벤트를 수신 대기 해야한다.

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

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

Final code

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

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

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

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

Optional: Debugging from VS Code

Renderer에서 프로세스에 연결하기 때문에 디버거가 실행되지 건에 연결할 시간이 충분하지 않아 코드의 첫줄이 건너 뛰어지는 경우가 존재. 개발 모드에서 코드를 실행하기 전에 페이지를 새로 고치거나 시간 제한을 설정하면 해결 된다.

 

Reference

https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app

Building your First App | Electron