[Electron] 데스크탑 앱 개발 쉽게하기

소개

Electron 은 JavaScript, HTML 및 CSS (또는 ECMAScript 6, TypeScript, CoffeeScript 또는 JavaScript로 컴파일되는 모든 언어)

만 사용하여 Cross Platform Application을 만들 수 있게 해주는 프레임워크입니다.

쉽게 Desktop앱을 만들 수 있습니다.

electron-quick-start 로 간단한 Electron app을 만들어 볼 수 있습니다.

---

Intellij에서 개발환경 구성하기

0. npm설치

Node.js packages를 관리하는 npm을 설치해야 합니다.

https://www.npmjs.com

1. electron 설치하기

electron-prebuilt는 미리 컴파일된 electron 바이너리를 포함하는 npm모듈입니다.

전역으로 설치하여 프로그램을 실행할 수도 있고, 

프로젝트 내에 npm의존성 라이브러리로 설치하여 프로젝트 단위로 설치할 수도 있습니다.

  $ npm install -g electron-prebuilt #전역 모듈로 설치

  $ npm install --save-dev electron-prebuilt  #프로젝트 내 모듈로 설치

출처 : http://proinlab.com/archives/1928

2. code completion 구성하기

Project에서 Electron API에 대한 코딩을 하기 위해 electron.d.ts를 Javascript라이브러리로 추가하면 됩니다.

- File > Settings > Language & Frameworks > Javascript > Libraries에서 Download를 클릭하여

  electron을 찾아 Download and Install을 해줍니다.

- 또한, File > Settings > Language & Frameworks > Javascript 에서 Language version을 ECMAScript 6 으로 바꿔줍니다.

- electron은 웹 페이지 내에서 Node.js API를 사용하기 때문에 이에 대한 code completion을 하려면,

  File > Settings > Language & Frameworks > Node.js and NPM으로 이동하여 'Enable coding assistance' 클릭해줍니다.

3. Electron app 실행 및 디버깅하기

Electron에는 어플리케이션의 웹 페이지를 관리하고 시스템 이벤트를 처리하는 main process와,

어플리케이션의 모든 개별 페이지와 관련되고 어플리케이션 로직을 호스팅하는 render process의

두가지 유형의 프로세스가 있습니다.

main process 실행 및 디버깅

어플리케이션을 시작할 때 발생하는 상황을 보고싶다면 main process를 디버깅해야합니다.

Run/Debug Configurations 설정에서 Node.js항목을 새로 추가하고

Node interpreter 항목에 Electron 실행 파일의 경로와 앱의 기본 JavaScript 파일 경로를 지정해줍니다.

Electron 실행 파일은 command line에서 Electron 앱을 시작하는데 사용하는 프로그램입니다.

Electron을 로컬에 설치한 경우에는 node_modules/.bin 폴더 아래에 있습니다.

OS X , Linux에서는 실행 파일이 electron이고, Windows에서는 electron.cmd 입니다!

global하게 설치된 electron에 대한 경로를 지정하셔도 됩니다.

render process 디버깅

Run/Debug Configurations Node.js 항목의 Application parameters에

--remote-debugging-port=9222 옵션을 주어 실행할 수 있습니다. (port는 원하는 거 아무거나 가능)

앱이 실행되면 render process에 연결하기 위해 포트 9222에서 새로운 Chrominum 원격 실행 및 디버그 구성을 시작합니다.

참고

https://blog.jetbrains.com/webstorm/2016/05/getting-started-with-electron-in-webstorm/

https://shirishkadam.com/2016/10/29/configuring-intellij-idea-for-electron/

https://shirishkadam.com/2016/10/29/setting-up-electron-framework-for-desktop-apps/

http://proinlab.com/archives/1928

http://blog.acidraincity.com/2016/12/electron-electron.html