Electron 시작하기는 세미나에서 발표한 내용 중 다음블로그의 글관리툴 만드는 과정을 설명한다. Electron의 설명이나 특징 같은 것은 내가 만들지 않더라도 이미 많은 문서가 있으니 넘어간다. 물론 중간중간 간단한 설명은 할 것이다. 그 첫번째로 Hello, world!를 해본다. 일단 화면에 뭐라도 출력을 하고나면 그때부턴 쉬워지는 것 같다.
Electron 두가지 프로세스
Electron은 간단히 이야기하자면 OS에서 제공하는 API를 사용하는 main process와 Chromium이 제공하는 API를 사용하는 renderer process로 구성되어 있다. main process는 nodejs로 동작하는데 브라우저를 생성하고 Tray, 메뉴 등의 앱 UI 관련된 API를 사용한다. 그리고 nodejs로 할 수 있는 모든 일을 할 수 있다.
renderer process는 Chromium에서 동작하는 process로 html, css, js등을 사용할 수 있다. 물론 remote를 통해서 main process가 하는 일도 할 수 있지만 복잡해지니 꼭 필요할 때만 하는 것이 좋다고 생각한다. Chromium이라는 앞서가는 브라우저를 사용하는 관계로 수많은 html5 feature를 사용할 수 있고 Chromium에서만 지원하는 것들도 사용할 수 있다. 웹 기술로 앱을 만드는 게 Electron의 핵심이니 renderer process가 Electron의 가장 특징적인 부분이라고 할 수 있다.
Electron start
Electron으로 간단한 앱을 만드는 것은 공식문서에 잘 나와있지만 daumblog editor의 경우로 보자면 src/main/에 main process에 해당하는 코드를 두고 src/renderer/에 renderer process에 해당하는 코드, app/에는 html, js 같은 파일을 뒀다. 파일이 준비되면 이렇게 실행하면 된다.
$ npm install --save electron
$ node_modules/.bin/electron .
BrowserWindow
UI는 웹기술로 만들면 되는데 그렇게 하기 위해서 먼저 브라우저를 실행해야한다. 브라우저는 BrowserWindow를 통해서 만들 수 있다. app이 준비되면 BrowserWindow를 만들고 app/index.html을 로드한다. 이제 실행하면 브라우저가 하나뜨고 거기에 'Hello, world!'가 보인다.
const { app, BrowserWindow } = require('electron')
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600
})
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, '../../app/index.html'),
protocol: 'file:',
slashes: true
}))
})
참고로 다른 OS는 윈도우가 없으면 앱이 종료되는데 맥OS는 그렇지 않다. 강제로 종료를 해줘야한다. 다른 OS와 동일하게 동작하게 하려면 window-all-closed 이벤트에 앱을 종료하도록 한다. 필수도 아니고 맥에만 해당한다.
app.on('window-all-closed', () => {
app.quit()
})
이렇게 간단히 Hello, world!를 출력하는 앱이 동작하게 했다. 여기까지만 해도 벌써 다 한 것 같다. 이제 화면에 보여주는 것만 금새 만들어내면 될 것 같은 느낌이 든다. 오늘은 여기까지다. 다음 글은 화면에 보여줄 데이터를 가져오고 저장하는 API에 대한 내용이 될 것 같다.
