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에 대해 알아봤다. 좋은 프레임워크 같다. 이제 웹개발자도 데스크탑앱을 만들 수 있다.
아마 리멤버라는 앱이 이걸루 만든 듯 하다.