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 개발하기


Published on

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

Published in: Engineering
  • Login to see the comments

Electron 개발하기

  1. 1. Electron 개발하기 ABCD 한성일
  2. 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. 3. Chromium 의 렌더링 라이브러리만 사용 그래도 용량을 큼 Chromium
  4. 4. Process
  5. 5. 브라우져 앱 (view) nodejs Process
  6. 6. ipcRenderer ipcMain
  7. 7. 개발 프로세스 일렉트론 환경설정 브라우져 기반의 view 개발 패키징/배포
  8. 8. 전역으로 설치 $ npm install -g electron-prebuilt 프로젝트 경로에 설치 $ npm install --save-dev electron-prebuilt Nodejs 설치
  9. 9. Hello World package.json 생성 { "name": "hello-electron", "version": "0.1.0", "main": "main.js" } main.js index.html main process renderer process 시연 addSync 소스 (github)
  10. 10. Renderer Process 테스트 방법 win.webContents.openDevTools();
  11. 11. Battle Ship Headfirst Javascript Programing 소스 리팩토링 소스 (github)
  12. 12. 프로젝트 구조
  13. 13. MVC 패턴 (Renderer) 스크린샷 (Main) 메뉴 CODE 라이브러리사용없이 기본 자바스크립트 코드로 구현
  14. 14. Packaging 1. prebuild app download 2. 패키지 열기 3. 소스 파일 copy & paste electron/ option. 아이콘 변경
  15. 15. 확인되지 않은 개발자가 배포… MACOS Control 키를 누른 상태에서 앱선택
  16. 16. Packaging Reference 일렉트론 문서 윈도우 스토어 가이드 서드파티 빌드앱 - electron-builder - electron-packager asar
  17. 17. Electron 공식 문서
  18. 18. 수고하셨습니다. :)