electron

요 몇일 전에 electron 라는 놈을 알게 되었다. 데스크탑의 하이브리드라 할까? 이제 웹 개발자도 PC앱을 만들 수 있게 되었다.ㅎㅎㅎ 찾아보니까 한글문서도 잘 되어 있다. 일단 한번 만들어 보자. 간단하게 빈 프로젝트를 만들자. 필자는 electron-sample 이렇게 했다. 그 밑에 파일들을 만들었다. 준비할 파일은 index.html, main.js, package.json 이렇게 세개의 파일이다. 아주 간단하다. main.js에 아래와 같이 추가 한다.

use strict;

const electron = require(electron);
const app = electron.app;  // Module to control application life.
const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.

// Keep a global reference of the window object, if you dont, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on(window-all-closed, function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != darwin) {
    app.quit();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on(ready, function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadURL(file:// + __dirname + /index.html);

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

  // Emitted when the window is closed.
  mainWindow.on(closed, function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

다음은 index.html에 아래와 같이 추가 한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

package.json에는 아래와 같이 추가 한다.

{
  "name"    : "electron-sample",
  "version" : "0.0.1",
  "main"    : "main.js",
  "scripts": {
    "start": "electron main.js"
  }
}

그런 후 앱을 실행 하기 위해 electron-prebuilt를 설치 한다.

npm install -g electron-prebuilt

이제 실행을 해 볼차례다

cd electron-sample

해당 폴더로 가서 다음과 같이 실행하자!

npm start

어플리케이션 배포

간단하게 해보자. 필자는 npm 으로 설치를 해서 경로가 /usr/local/lib/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources (mac기준)에 app이라는 폴더를 만든다. 만들고 나서 위에서 만들었던 프로젝트를 복사한다.

/usr/local/lib/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/app/index.html
/usr/local/lib/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/app/main.js 
/usr/local/lib/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/app/package.json

위와 같은 경로에 넣는다. 그런 후에 Electron.app을 실행 시켜보자. (window는 .exe) 그럼 위에서 만든앱이 실행된다. 이것으로 electron에 대해 알아봤다. 좋은 프레임워크 같다. 이제 웹개발자도 데스크탑앱을 만들 수 있다. 아마 리멤버라는 앱이 이걸루 만든 듯 하다.