Electron 핵심

Electron을 한번 쯤 익혀 보고싶다고 생각난 이유는 업무 효율성이다.

node로 이것저것 필요할 때마다 스크립트를 작성해서 전체 파일명을 바꾼다던지, 복사한다던지.. 등 작업을 해왔다.

하나, 둘 쌓여가니 편하게 데스크탑 앱으로 만들어 내 생산성을 높여보고자 정리해본다.

핵심 app, BrowserWindow

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

app : 일렉트론 이벤트 라이프사이클 컨트롤

BrowserWindow : 윈도우창 컨트롤

* app 의 ready 이벤트가 emitt 되야 윈도우를 생성할 수 있다.

일반적인 데스크탑 앱 UX 구현

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

보통은 윈도우, Linux 의 경우 창을 닫으면 앱을 종료하도록 동작하기 때문에, 맥을 제외하고서는 윈도우창이 곧 앱의 라이프사이클이 되도록 해준다.

 

그리고 맥의 경우에는 백그라운드에서도 항상 앱이 동작하기 때문에, 열려있는 창이 없다면 생성할 수 있도록 해줘야 한다.

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

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

preload 로 Node 에 접근하기

electron 을 통해서 웹 페이지를 실행하면 preload 개념을 사용하여, 브라우저에게 node 에서 작성한 객체를 전달할 수 있다.

Browser <-> Node 간의 통신을 뜻한다.

서로는 전혀 다른 프로세스이기 때문에 서로에게 접근이 불가능 하지만, preload 는 node 에서 웹페이지를 띄우기 직전에 DOM에 주입되어 실행되면서 브릿지 역할을 한다.

즉, preload 스크립트 파일은 DOM, 제한된 node, electron API 의 context 에 접근 가능하다.

devDependencies

electron 을 비롯한, 개발환경에서 사용되는 패키지는 -D 옵션으로 설치해야한다.

electron 또한 번들에 포함될 필요는 없다.

 

Event 기반 설계

electron 의 core 모듈들은 모두 비동기 event driven 방식으로 event emitter 로 구현되어 있기 때문에, 이벤트를 수신하고 발생시키는 방식이 많이 사용된다.

* 예시 : app 인스턴스의 'ready' 이벤트가 발생되야 window 창을 생성할 수 있다.

 

renderer.js

브라우저에서 사용될 js 파일인데, 단순히 electron 이 브라우저 역할을 해주어서, BrowserWindow로 html 파일을 파싱하는것과 똑같다.

그럼 html 에서 사용되는 js 파일들을 renderer 라고 칭하는 것이다.

Entry Point

package.json 의 main 프로퍼티를 electron 의 main process 로 실행시킨다.

Summury

* main(node) <-> renderer(web page) 간의 통신을 하는 것이 electron 의 핵심이다. 각각은 별도의 프로세스인데, 둘을 연결해주는 역할이 preload 이다.

 

* renderer 는 local 의 파일이어도 되고, 외부 url 이어도 된다