Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Electron 시작하기

1,891 views

Published on

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

Published in: Technology
  • Be the first to comment

Electron 시작하기

  1. 1. Electron 시작하기
  2. 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. 3. 알고 있어야 할 것 - Node - Frontend (js, html, css) : SPA - Chromium
  4. 4. Electron 장점 - 크로스 브라우징 생각하지 않고 Chromium에서 할 수 있는 모든 일을 할 수 있다. - Chromium이 동작하는 모든 플랫폼에 배포 - 최신버전: Node 7.4.0, Chromium 56 → ES2015, WebGL을 제한없이... - 모든 리소스를 로컬에서 로드가능 (권장) → app.min.js 용량걱정 X → 보안: remote 리소스도 renderer가 할 수 있는 모든 것을 할 수 있다
  5. 5. Electron 단점 - 배포코드가 모두 공개된다. → 웹앱의 특징. asar도 쉽게 열린다. uglify가 최선 - 용량이 크다. → Chromium + Node.js + 코드 = 약 7~80MB Electron Archive format
  6. 6. Electron 특징 - Main / Renderer process → Main : 앱 전반을 컨트롤 가능 → Renderer : 브라우저와 같다. 단 require로 로컬 리소스 접근 가 능 - IPC / Remote → IPC : main/renderer간 event 전달 → Remote : renderer에서 main직접 호출 - Webview → iframe과 달리 별도의 process
  7. 7. Sample App (Daum Blog Editor) 1. Hello, world 2. OAuth2 3. API call 4. 웹앱 5. 배포 https://github.com/joostory/daumblog-editor
  8. 8. Daum Blog Editor (1)
  9. 9. Daum Blog Editor (2)
  10. 10. Daum Blog Editor (3)
  11. 11. Daum Blog Editor (4)
  12. 12. Daum Blog Editor (4) ● React ● Redux ● Material-ui ● Codemirror
  13. 13. Daum Blog Editor (5)
  14. 14. 아직 다루지 않은 이야기 ● Store ● Tray ● App icon ● Menu ● 그 외 (http://electron.atom.io/docs/)
  15. 15. 감사합니다
  16. 16. Q&A

×