Electron Quick Start

 

Electron

Electron 은 노드JS(Node.js)를 기반으로 JavaScript, HTML, CSS의 Web 기술을 사용하여 Mac, Window, Linux에서 동작하는 Desktop App을 만드는 Open Framework 다.

Web 기술을 가진 개발자가 굳이 Native App을 위한 새로운 기술을 습득하지 않고서도 현재 개발한 Web App Code를 재사용해서 Desktop에서 실행시킬수 있는 것이다.

Open Source Browser 인 Chromium 을 front-end 로 node.js를 back-end로 사용하고 V8 Javascript 엔진을 공유하여 돌아가게 된다.

post.naver.com/viewer/postView.nhn?volumeNo=29553253&memberNo=36733075&vType=VERTICAL

알아두면 유익한 일렉트론: 자바스크립트 데스크톱 애플리케이션 개발하기

이러한 Electron 기반으로 우리가 잘 알고 있는 JavaScript UI Library 인 Vue.js, React, Angular 로 안정적인 Desktop App을 만들수 있게 된다.

나 같이 CSS와 HTML 초보인 사람을 위해 Electron앱을 쉽게 만들수 있는 Photon이 있는데 막상 돌려보니 에러가 나서 ㅠㅠ (알고보니 5년전 이후로 업데이트가 없었다...)

그래도 만들어놓은 UI Component는 사용가능했다. 

어쨌든 초보인 나는 일단 기본 앱을 Step by Step으로 따라가면서 만들어보자.

Electron 기본 앱 만들기

www.electronjs.org/docs/tutorial/quick-start

Quick Start Guide | Electron

구성 파일 3가지

• package.js : App의 main file을 지정하고 dependencies 관리
• main.js: App 시작 포인트로 main process 가 시작되고 Browser Window 를 생성하고 App의 life cycle 관리
• index.html:  render할 페이지. App의 render process.

디버깅을 위해 가이드 코드에서 아래 추가

win.webContents.openDevTools()

실행

"npm start" 하면 기본 아래 UI 가 나온다. 

빌드

• electron-forge (electron app을 creating, publishing, installing하기 위한 tool) import: 터미널에서 아래 실행

>> npx @electron-forge/cli import

• 배포 가능한 App 빌드

npm run make

• 빌드하면 아래 경로에 앱 생성: 역시 Chromium + 각종 node.js module 을 함께 패키징하다보니 Build 한 앱 용량이 178M나 된다.

• 모든 OS에서 사용하는 Framework라고 해서 build 하면 windows/linux/mac 용의 app이 나오는줄 알았는데 빌드한 노트북의 해당 OS용 App만 빌드된다.

요약

• 수년전 한때 object C+X Code로 Iphone app을 만들었었는데... 이런 정보 전혀 필요 없이 html, Javascript, css 로 앱을 구현할수 있는것에 세상이 참 많이 변했구나 싶다. 
• Electron이 그냥 이쁜 native app을 만들어주는 줄 알았는데 UI는 또 좋은 Javascript UI library로 개발해야한다.
• Electron은 Web app을 다양한 Desktop App으로 빌드/설치/업데이트/관리...를 도와주는 framework 다.