Hello Electron

Electron을 이용한 App을 만들기 위해서는 위해서는 Electron홈페이지(https://electronjs.org/)에서 배포하고 있는 electron을 다운(https://github.com/electron/electron/releases)받아 설치하여 만드는 방법이 있다. 이 패키지에는 nodejs와 Chromium 그리고 V8 엔진이 포함되어 있다.

또 다른 방법은 nodejs를 설치하고 electron 모듈을 설치하는 방법이 있다. App를 만든 후 배포를 고려한다면 nodejs 의 모듈 형태의 electron을 설치하는 것이 좋아 보였다. 그래서 Nodejs를 이용한 개발 환경 구축을 해 보았다.

Nodejs 설치하기

먼저 nodejs 홈페이지(https://nodejs.org/en/download/)를 통해 nodejs를 다운 받는다.

nodejs 홈페이지에서는 각 플랫폼에 대해서 Installer 형태와 Binary 형태의 파일을 다운 받을 수 있다. 개인적으로 자동 설치를 선호하지 않아 수동설치를 위한 Binary 형태의 zip 파일(https://nodejs.org/dist/v8.9.4/node-v8.9.4-win-x64.zip)을 다운받았다.

다운 받은 파일을 특정 폴더(D:\Dev\node-x64)에 압축을 풀고 시스템의 전역 설정에서 Path을 추가하여 어느 경로에서건 nodejs를 실행할 수 있도록 설정하였다.

D:\Dev\node-x64>node -v
v8.9.4

electron 모듈 설치하기

electron 을 모든 프로젝트에서 사용할 수 있도록 "npm install -g electron" 명령을 이용하여 electron을 전역 설치하였다. 이전에는 electron-prebuilt 였는데 electron으로 변경이 되었다.

D:\Dev\node-x64>npm install -g electron
D:\Dev\node-x64\electron -> D:\Dev\node-x64\node_modules\electron\cli.js

> electron@1.7.10 postinstall D:\Dev\node-x64\node_modules\electron
> node install.js

+ electron@1.7.10
added 152 packages in 14.212s

D:\Dev\node-x64>npm list electron
D:\Dev\node-x64
`-- electron@1.7.10

D:\Dev\node-x64>

Git 설치하기

Git는 electron 개발과 직접적으로 관련은 없지만 quick start 프로젝트를 받기위해 설치 하였다. quick start 프로젝트 없이 electron 홈페이지의 tutorial을 보고 따라해 볼 경우 Git를 설치할 필요는 없다.

Git 홈페이지(https://git-scm.com/)에서 설치파일을 다운로드받아 설치하면 된다.

Quick start 프로젝트 실행 해보기

git 명령을 이용하여 electron quick start 프로젝트를 다운받는다.

D:\DevWork\Projects\Electron\Study>git clone https://github.com/electron/electron-quick-start
Cloning into 'electron-quick-start'...
remote: Counting objects: 267, done.
Receiving objects: 66% (177/267) remote: Total 267 (delta 0), reused 0 (delta 0), pack-reused 267
Receiving objects: 100% (267/267), 44.07 KiB | 0 bytes/s, done.
Resolving deltas: 100% (123/123), done.

D:\DevWork\Projects\Electron\Study>cd electron-quick-start
D:\DevWork\Projects\Electron\Study\electron-quick-start>dir
 Volume in drive D is Work
 Volume Serial Number is C0A2-CA63

 Directory of D:\DevWork\Projects\Electron\Study\electron-quick-start

2018-01-14 23:15 <dir> .
2018-01-14 23:15 <dir> ..
2018-01-14 23:15 14 .gitignore
2018-01-14 23:15 603 index.html
2018-01-14 23:15 6,585 LICENSE.md
2018-01-14 23:15 1,985 main.js
2018-01-14 23:15 456 package.json
2018-01-14 23:15 2,373 README.md
2018-01-14 23:15 174 renderer.js
  7 File(s) 12,190 bytes
  2 Dir(s) 77,275,750,400 bytes free

D:\DevWork\Projects\Electron\Study\electron-quick-start>electron .

이번에는 수동으로 프로젝트를 만들어 보았다.

electron의 tutorial 페이지(https://electronjs.org/docs/tutorial/quick-start)를 참조하였다.

프로젝트는 기본적으로 3개의 파일들(package.json, main.js, index.html)로 구성된다.

package.json

{
  "name" : "your-app",
  "version" : "0.1.0",
  "main" : "main.js"
}

main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
 
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
 
function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})
 
  // and load the index.html of the app.
  win.loadURL(url.format({
  pathname: path.join(__dirname, 'index.html'),
  protocol: 'file:',
  slashes: true
  }))
 
  // Open the DevTools.
  win.webContents.openDevTools()
 
  // Emitted when the window is closed.
  win.on('closed', () => {
  // 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.
  win = null
  })
}
 
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS 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()
  }
})
 
app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
  createWindow()
  }
})
 
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.html

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Hello Electron!</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>