ABCD 3월 세미나 자료입니다.

1. Electron
개발하기
ABCD 한성일

2. 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

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

4. Process

5. 브라우져 앱 (view)
nodejs
Process

6. 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

7. 개발 프로세스
일렉트론 환경설정
브라우져 기반의 view 개발
패키징/배포

8. 전역으로 설치
$ npm install -g electron-prebuilt
프로젝트 경로에 설치
$ npm install --save-dev electron-prebuilt
Nodejs 설치
https://nodejs.org/ko/download/

9. 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)

10. Renderer Process 테스트 방법
win.webContents.openDevTools();

11. Battle Ship
Headfirst Javascript Programing
소스 리팩토링
https://github.com/ABoutCoDing/electron-battleship-app
소스 (github)

12. 프로젝트 구조

13. MVC 패턴 (Renderer)
스크린샷 (Main)
메뉴
https://electron.atom.io/docs/api/menu/
CODE
라이브러리사용없이 기본 자바스크립트 코드로 구현

14. 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. 아이콘 변경

15. 확인되지 않은 개발자가 배포…
MACOS
Control 키를 누른 상태에서 앱선택

16. 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

17. https://github.com/electron/electron/tree/master/docs-translations/ko-KR
https://electron.atom.io/docs/
Electron 공식 문서

18. 수고하셨습니다. :)
abcds.kr