[JavaScript] # Electron, 일렉트론

 

 

 

 

 

 

Electron은 HTML, CSS, JavaScript를 사용해 크로스 플랫폼 데스크탑 애플리케이셔을 만들기 위한 오픈 소스라이브러리

크로스 플랫폼을 지원하기 위해 Chromium과 Node.js를 1개의 런타임으로 통합하였고, Mac, Window, 리눅스용으로 패키지 할 수 있습니다.

 

원래는 텍스트 편집기인 아톰을 만들기 위해 Electron 프레임워크를 개발하였습니다.

아래 히스토리에 나온 것 처럼 Atom Shell이라는 이름으로 프로젝트를 시작하였지만, 이후 Electron이라는 이름으로 변경 되었다고 합니다.

 

어떤 앱들이 만들어 졌나

 

카테고리 별로 보면 대충 500~600개 정도에 앱들이 있는걸 알수 있습니다.

옆에 실제 앱들을 보면 잘 알려진 앱들이 많습니다. 스카이프, 깃헙 데스크탑, 디스코드, 아톰, 비쥬얼 스튜디오 코드 등

많이 있습니다. 

 

https://electronjs.org/apps

 

Electron Application Architecture

 

Electron에서 main 스크립트를 실행하는 프로세스를 메인 프로세스라고 부릅니다. 

Electron 앱은 항상 하나의 메인 프로세스를 가지며, 둘 이상이 되는 경우는 없습니다.

 

Electron은 웹페이지를 보여주기 위해 Chromium을 사용하고 있기 때문에 Chromium의 멀티 프로세스 아키텍쳐 가 그대로 이용되고 있습니다. Electron 안에서 보여지는 각각의 웹페이지는 자신의 프로세스 안에서 동작하는데, 이 프로세스를 렌더러 (renderer) 프로세스라고 부릅니다.

 

일반적인 브라우저에서 웹 페이지는 보통 샌드박스 환경에서 실행되므로 네이티브 리소스에는 액세스 할 수 없습니다. 

그러나 Electron 을 사용하게 되면 웹페이지가 Node.js APIs 를 이용할 수 있기 때문에, 

보다 로우한 레벨에서 운영체제와 상호작용하는 것이 허용되어 있습니다.

 

프로세스간에는 IPC(Inter-Process Communication) 통신으로 데이터를 주고 받는다고 합니다.

그것을 위해 ipcRenderer, ipcMain이라는 모듈을 제공 한다고 합니다.

 

Electron 지원

 

Electron이 어떤 프레임 워크와 아키텍처에 대해 알아보았고, 어떤 부분을 지원해주는지에 대해 알아보도록 하겠습니다.

공식 페이지에서 보면 자동 업데이트, 기본 메뉴와 알림, 충돌 보고, 디버깅과 프로파일링, 윈도우 설치 프로그램을 지원한다고합니다.

이런 부분들이 앱, 프로그램들을 개발할 시 신경써야 할 중요한 부분들 입니다. 

이 부분들이 제대로 지원이 된다면 개발이 크게 쉬워질것 같아 보입니다.

 

자동 업데이트

 

OS별로 자동 업데이트를 살펴보면 MacOS는 Squirrel이라고 불리는 어플리케이션 업데이트 프레임워크를 사용합니다.

윈도우 또한 Squireel.window를 사용하는 방법도 있지만

electron-winstaller, electron-forge라는 패키지를 사용하거나 electron-installer 패키지를 사용하는 것을 권장한다고 합니다.

메뉴/ 알림

 

 

먼저 템플릿을 정하고 menu의 스태틱 메서드 buildFormTemplate를 이용하여 템플릿을 만들고 setApplicationMenu를 호출하면 됩니다.

 

기본적인 기능은 electron에서 기본 제공하는 role에 할당하면 됩니다.

그 외 로직이 필요할 경우에는 role 대신 click을 생성하여 함수를 작성하면 됩니다.

role, click 뿐만 아니라 checked, enable, visible 등 옵션등이 있습니다.

 

메뉴를 생성하게 되면 사진 처럼 맥용 윈도우용 리눅스용으로 메뉴가 생성되게 됩니다.

 

 

 

Renderer Process에 구현하면 되고, HTML5 API 중 Notification API를 사용합니다.

Icon 옵션을 이용하여 이미지를 포함하거나 하지 않는 방법을 제공합니다.

 

Electron API Demos

제공되는 API Demo를 사용해서 기본적으로 필요한 기능은 모두 구현 가능해 보입니다.