Electron에 대해서
Electron이란?
공식 사이트의 내용을 가져오면 Electron은 HTML, CSS, 자바스크립트를 사용해 크로스 플랫폼 데스크탑 애플리케이션을 만들기 위해 GitHub에서 개발한 오픈 소스 라이브러리이다. Electron은 크로스 플랫폼을 지원하기 위해 Chromium과 Node.js를 1개의 런타임으로 통합했고, Electron을 이용해 작성한 앱은 Mac, Windows, 리눅스용으로 패키지할 수 있다. 간단하게 웹 기술을 가지고 그대로 설치형 어플리케이션을 제작할 수 있는 프레임워크다.
Electron 구조
일렉트론은 두 가지의 프로세스가 존재한다. 하나는 main 스크립트를 실행하는 메인 프로세스이다. 일렉트론 앱에서 메인 프로세스는 항상 하나만을 가진다. 다른 하나는 렌더러 프로세스라고 부른다. 일렉트론은 웹페이지를 보여주기 위해서 Chromium을 사용하는데, 일렉트론 안에서 보여지는 각각의 웹페이지가 이 프로세스에서 동작한다. 메인 프로세스에서는 이러한 렌더러 프로세스들을 관리하고. 각각의 렌더러 프로세스는 서로 독립적으로 동작한다. 그리고 웹페이지에서 네이티브 GUI관련 API는 직접 호출할 수 없고 메인 프로세스에 요청하여 실행할 수 있다.
Electron 시작하기
간단하게 일렉트론으로 창을 하나 띄우고 거기에 Hello Electron글자를 출력해 보자. 먼저, 빈 디렉토리에서 npm을 초기화하고 일렉트론을 설치하자.
npm init -y
npm install electron@latest --save-dev
그리그 package.json파일에 일렉트론을 간단하게 실행할 수 있게 아래 내용을 추가하자.
{
...
"main": "main.js",
"scripts": {
"start": "electron .",
...
},
...
}
그 후 main.js와 index.html파일을 생성하자. main.js의 역할은 main process를 담당하고, index.html은 화면을 보여주기 위한 페이지이다.
//main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
let mainWindow = null
function initialize() {
function createWindow() { //창을 생성하고, 연결되는 페이지는 index.html
const windowOptions = {
widht: 800,
height: 600,
}
mainWindow = new BrowserWindow(windowOptions)
mainWindow.loadURL(path.join('file://', __dirname, '/index.html'))
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', () => {
createWindow()
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
}
initialize()
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
</head>
<body>
Hello Electron!
</body>
</html>
일렉트론과 실행할 파일이 준비되었기 때문에 npm start를 실행하면 하나의 창과 그 안에 Hello Electron이 나오는 것을 볼 수 있다.
electron api
일렉트론의 기본적인 API사용 방법은 일렉트론 사이트에서 데모 앱으로 제공한다. 이 앱을 통해서 일반적으로 사용되는 API와 종류들을 살펴볼 수 있다. https://github.com/electron/electron-api-demos 더 자세한 내용은 공식 사이트 https://www.electronjs.org/docs/api 에서 볼 수 있다.
Electron Boilerplate
일렉트론은 웹 기술을 기반으로 하기 때문에 프론트 엔드에 자주 사용되는 AngularJS, React, Vue도 일렉트론과 같이 사용할 수 있다. 그리고 이미 훌륭하신 분들이 이를 잘 사용할 수 있게 만들어 놓은 보일러플레이트도 있기 때문에 직접하기 어렵다면 이러한 템플릿을 이용하자.
- Vue : electron-vue https://github.com/SimulatedGREG/electron-vue
- React : electron-react-boilerplate https://github.com/electron-react-boilerplate/electron-react-boilerplate
- AngularJS : angular-electron https://github.com/maximegris/angular-electron
Electron 배포(electron-builder)
일렉트론은 크로스 플랫폼을 지원하고 있다. 그리고 이를 쉽게 패키지 할 수 있는 서드 파티가 존재한다. 그 중에서 electron-builder에 대해서 알아보자. 아래의 명령을 통해서 electron-builder를 설치할 수 있다.
npm install electron-builder --save-dev
electron-builder가 설치가 되면 package.json에 아래 내용을 추가해서 실행할 수 있는 환경을 구성하자. (json에는 주석이 없으므로, 내용 중 설명된 부분은 지우도록 하자.)
{
...
script: {
"build:osx": "electron-builder --mac",
"build:linux": "npm run build:linux32 && npm run build:linux64",
"build:linux32": "electron-builder --linux --ia32",
"build:linux64": "electron-builder --linux --x64",
"build:win": "npm run build:win32 && npm run build:win64",
"build:win32": "electron-builder --win --ia32",
"build:win64": "electron-builder --win --x64",
},
...
"build": {
"productName": "HelloElectron",
"appId": "com.electron.hello",
"asar": true, //소스코드를 asar 포맷으로 압축 패키징 옵션
"protocols" : {
"name" : "helloElectron",
"schemes" : ["helloelectron"]
},
"mac": { //mac용 옵션
"target": [
"default"
],
"icon": "./resources/installer/Icon.icns"
},
"dmg": { //mac 인스톨 옵션
"title": "HelloElectron",
"icon": "./resources/installer/Icon.icns"
},
"win": { // windows 옵션
"target": [ //
"zip", // zip
"nsis" // 인스톨러 실행파일
],
"icon": "./resources/installer/Icon.ico"
},
"linux": { //리눅스 옵션
"target": [
"AppImage",
"deb",
"rpm",
"zip",
"tar.gz"
],
"icon": "./resources/linuxicon"
},
"nsis":{
"oneClick" : false, //nsis 기본 옵션은 원클릭 true
"allowToChangeInstallationDirectory" :true // 디렉토리 변경 옵션
},
"directories": {
"buildResources": "resources/installer/",
"output": "dist/", // 빌드 후 결과물 저장 경로
"app": "."
}
}
...
}
설정까지 완료하였다면 플랫폼에 맞게 쉽게 윈도우, 맥, 리눅스에 맞게 인스톨 파일을 생성할 수 있다. 자세한 옵션이나 내용은 아래 주소에서 확인할 수 있다. https://github.com/electron-userland/electron-builder