ELECTRON, 웹베이스 데스크탑 앱 간단 튜토리얼

ELECTRON, 웹베이스 데스크탑 앱 실전 간단 튜토리얼

Electron은 자바스크립트와 함께 제공된 풍부한 네이티브 API를 사용하여 멋진 데스크탑 애플리케이션을 만들 수 있도록 해주는 프레임워크입니다. 이 프레임워크의 Node.js는 웹 서버 개발이 아닌 데스크탑 애플리케이션 개발에 초점을 맞췄습니다.

이 말은 Electron이 GUI 라이브러리의 자바스크립트 바인딩이라는 뜻이 아닙니다. 대신, Electron은 웹 페이지의 GUI를 사용합니다. 쉽게 말해 Electron은 자바스크립트를 사용하여 조작하는 작은 Chromium 브라우저로 볼 수 있습니다.

- electron 공식 한국어 문서 소개원문 발췌

NodeJS 와 git 이 global 으로 설치되어 있다는 가정 하에 진행합니다.

만약 깔려있지 않다면 이 둘을 먼저 설치 해주세요.

단순하게 설치, 초기 세팅을 위한 문서입니다. 좀 더 자세한 API 문서나 설명을 보고 싶다면 공식 문서를 참고 해주세요.

본 튜토리얼은 MS Windows 10 64bit OS 를 사용하였습니다. 물론 다른 OS 에서도 별반 다르진 않을겁니다.

순서대로 따라 해봅시다.

: electron 플랫폼을 설치 해줍니다.

npm install electron-prebuilt -g

: 예제를 위한 electron 데모 앱을 clone 받아줍니다.

git clone https://github.com/electron/electron-quick-start

cd electron-quick-start

npm install

여기까지 됬다면 electron 기본 개발 환경은 세팅 완료되었습니다.

앱 개발 후 앱 디렉토리에서 npm start 또는 electron . 을 해주면 앱이 실행 됩니다.

아래로는 개발된 앱을 패키징하고 설치파일을 만들어주는 작업입니다.

: 데모 앱의 경우 package.json 의 name 에 "-" 문자가 들어가 있습니다. 파일 명명규칙에 위배될 경우 electron-winstaller 등에서 오류가 날 수 있으니 원하는 {앱이름} 으로 바꿔줍시다.

: 패키징을 위한 electron-packager 를 설치 해줍니다. ( https://github.com/electron-userland/electron-packager )

npm install electron-packager -g

Windows OS 의 경우엔 electron-winstaller 를 사용하여 설치파일을 만들어줍니다.

: 해당되는 OS에 대한 패키지를 생성해줍니다. (Windows x64)

electron-packager ./ {앱이름} --platform=win32 --arch=x64 --out dist

: 설치파일을 만들기 위한 electron-winstaller 를 설치 해줍니다. ( https://github.com/electron/windows-installer )

npm install electron-winstaller -g

: 설치파일을 만들기 위한 installer.js 를 작성해줍니다.

var electronWinstaller = require('electron-winstaller');

resultPromise = electronWinstaller.createWindowsInstaller({

    appDirectory: './dist/{앱이름}-win32-x64',

    outputDirectory: './dist/installer-win32-x64',

    exe: '{앱이름}.exe',

    setupExe: '{설치파일이름}.exe'

});

resultPromise.then(function () {

    console.log("설치파일 생성이 완료되었습니다.");

}, function (e) {

    console.log('ERROR : ' + e.message);

});

: 작성 완료한 installer.js 를 NodeJS 에서 실행해줍니다.

node installer.js

Mac OS 는 설치파일 생성을 위해 electron-installer-dmg 를 사용하게 됩니다.

: 해당되는 OS에 대한 패키지를 생성해줍니다. (Mac x64)

electron-packager ./ {앱이름} --platform=darwin --arch=x64 --out dist

: 설치파일을 만들기 위한 electron-installer-dmg 를 설치 해줍니다. ( https://www.npmjs.com/package/electron-installer-dmg )

npm install electron-installer-dmg -g

: dmg 설치파일을 생성해줍니다.

electron-installer-dmg ./dist/{앱이름}-darwin-x64/{앱이름}.app {앱이름} --out=./dist/installer-darwin-x64

여기까지 정상적으로 진행 됬다면 애플리케이션 오리지널 디렉토리, 패키지 그리고 설치파일이 생성되었을 것입니다.

이외에 앱 아이콘을 바꾸거나 바로가기를 만들거나, uninstaller 를 만들거나 버전관리를 하는 등의 방법은 본문의 각 API 링크에서 볼 수 있습니다.

electron 에 대해 개념 및 API 들을 자세히 기술해놓은 공식 번역 문서

https://github.com/electron/electron/tree/master/docs-translations/ko-KR

참고 링크

http://i5on9i.blogspot.kr/2016/04/nodejs-electron-hello-world.html

https://blog.outsider.ne.kr/1169

http://developer.dramancompany.com/2015/12/electron으로-웹-앱-만들듯-데스크톱-앱-만들기/

http://proinlab.com/archives/1928