Electron��개발하기

ABCD�한성일

2013년�4월 Atom�Shell�탄생.

2014년�5월 Atom�Shell�오픈소스화.

2015년�4월 Electron�으로�개명.

2016년�5월 Electron�v1.0.0�출시.

2016년�5월 Electron�앱이�Mac�App�Store�와�호환.

2016년�8월 Windows�Store�의�Electron�앱�지원.

History

Chromium�의�렌더링�라이브러리만�사용�그래도�용량을�큼

Chromium

Process

브라우져�앱�(view)

nodejs

Process

ipcRenderer�https://github.com/electron/electron/blob/master/docs-translations/ko-KR/api/ipc-renderer.md�

ipcMain�https://github.com/electron/electron/blob/master/docs-translations/ko-KR/api/ipc-main.md

개발�프로세스

일렉트론�환경설정

브라우져�기반의�view�개발�

패키징/배포�

전역으로�설치�$�npm�install�-g�electron-prebuilt��

프로젝트�경로에�설치�$�npm�install�--save-dev�electron-prebuilt

Nodejs�설치�https://nodejs.org/ko/download/

Hello�World

package.json�생성

{���"name":�"hello-electron",���"version":�"0.1.0",���"main":�"main.js"�}

main.js� index.html�

main�process� renderer�process�

시연�addSync�

https://github.com/ABoutCoDing/electron-basic-app

소스�(github)

Renderer�Process�테스트�방법

win.webContents.openDevTools();

Battle�ShipHeadfirst�Javascript�Programing��소스�리팩토링

https://github.com/ABoutCoDing/electron-battleship-app

소스�(github)

프로젝트�구조

MVC�패턴�(Renderer)

스크린샷�(Main)

메뉴

https://electron.atom.io/docs/api/menu/

CODE

라이브러리사용없이�기본�자바스크립트�코드로�구현

Packaging

1.�prebuild�app�download�https://github.com/electron/electron/releases

2.�패키지�열기

https://github.com/electron/electron/blob/master/docs-translations/ko-KR/tutorial/application-distribution.md

3.�소스�파일�copy�&�paste�electron/Electron.app/Contents/Resources/app/

option.�아이콘�변경

확인되지 않은 개발자가 배포…

MACOS�Control�키를�누른�상태에서�앱선택�

Packaging�Reference

일렉트론�문서�https://github.com/electron/electron/blob/master/docs-translations/ko-KR/tutorial/application-distribution.md

윈도우�스토어�가이드�https://github.com/electron/electron/blob/master/docs-translations/ko-KR/tutorial/windows-store-guide.md

서드파티�빌드앱�-�electron-builder�https://github.com/electron-userland/electron-builder�-�electron-packager�https://github.com/electron-userland/electron-packager

asar�https://github.com/electron/electron/blob/master/docs-translations/ko-KR/tutorial/application-packaging.md

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

https://electron.atom.io/docs/

Electron�공식�문서

수고하셨습니다.�:)

abcds.kr