Electron으로 간단한 앱을 만드는 과정을 통해 Electron에 대해 알아봅시다.

1. Electron 시작하기

2. Electron
- Build cross platform desktop apps
with Javascript, HTML, and CSS
- Node (main) + Chromium (renderer)
- 2013년 Atom Shell로 시작
- 2014년 오픈소스로 공개
- 2015년 Atom Shell → Electron
- 2016년 Electron 1.0

3. 알고 있어야 할 것
- Node
- Frontend (js, html, css) : SPA
- Chromium

4. Electron 장점
- 크로스 브라우징 생각하지 않고
Chromium에서 할 수 있는 모든 일을 할 수 있다.
- Chromium이 동작하는 모든 플랫폼에 배포
- 최신버전: Node 7.4.0, Chromium 56
→ ES2015, WebGL을 제한없이...
- 모든 리소스를 로컬에서 로드가능 (권장)
→ app.min.js 용량걱정 X
→ 보안: remote 리소스도 renderer가 할 수 있는 모든 것을 할 수 있다

5. Electron 단점
- 배포코드가 모두 공개된다.
→ 웹앱의 특징. asar도 쉽게 열린다. uglify가 최선
- 용량이 크다.
→ Chromium + Node.js + 코드 = 약 7~80MB
Electron Archive
format

6. Electron 특징
- Main / Renderer process
→ Main : 앱 전반을 컨트롤 가능
→ Renderer : 브라우저와 같다. 단 require로 로컬 리소스 접근 가
능
- IPC / Remote
→ IPC : main/renderer간 event 전달
→ Remote : renderer에서 main직접 호출
- Webview
→ iframe과 달리 별도의 process

7. Sample App (Daum Blog Editor)
1. Hello, world
2. OAuth2
3. API call
4. 웹앱
5. 배포
https://github.com/joostory/daumblog-editor

8. Daum Blog Editor (1)

9. Daum Blog Editor (2)

10. Daum Blog Editor (3)

11. Daum Blog Editor (4)

12. Daum Blog Editor (4)
● React
● Redux
● Material-ui
● Codemirror

13. Daum Blog Editor (5)

14. 아직 다루지 않은 이야기
● Store
● Tray
● App icon
● Menu
● 그 외 (http://electron.atom.io/docs/)

15. 감사합니다

17. Q&A