Development Etc. - Electron의 관하여

 

 

[JavaScript] Electron의 관하여

 

 

What is Electron?

---

웹사이트를 만드실 수 있다면 데스크톱 앱도 만드실 수 있습니다. Electron은 JavaScript, HTML, CSS 같은 웹 기술로 네이티브 애플리케이션을 만들 수 있는 프레임워크입니다.

간단히 말하면, ‘웹 애플리케이션을 .exe 파일로 사용할 수 있다.' 입니다.

지금은 Github에서 개발을 하고 있으며 GUI(그래픽 인터페이스 애플리케이션) 기반 개발을 할 수 있습니다.

동작에 있어 Backend는 Node.js Runtime을 사용하여 운영체제와의 상호작용을 하는것이 간편하며, Frontend는 구글 Chromium 기술을 사용해 Chrome의 멀티 프로세스 아키텍쳐가 사용 가능합니다.

 

 

이미 세계적인 몇몇 기업들은 Electron을 사용하여 크로스 플랫폼 소프트웨어를 만들고 있습니다.

Javascript 기반의 개발 환경으로 낮은 진입도가 있다는 것도 굉장히 장점입니다.

또한 어떠한 환경에서도 최신 브라우저의 기술을 사용할 수 있다는 점에서 더 이상 크로스 브라우징 처리를 하지 않는다는 점에서도 개발자에게 축복…? 이라고 생각합니다.

또한 Build 옵션에 따라서 어떠한 운영체제에서도 실행 가능하다는 점도 있습니다!

 

Electron Application Architecture

---

 

 

Electron을 가장 접하기 쉬운 방법은 바로 Electron에서 지원하고 있는 ‘ Electron-Quick-Start’입니다.

핵심 파일로는 package.json, main.js, index.html이 있습니다.

(package.json)

 

 

package.json의 가장 핵심 내용은 “name”, “version”, “main”이 되겠습니다.

name : 기본적으로 사용할 프로그램 이름입니다. 예를들어 Windows 10 환경에서의 이벤트(경고, 확인 창 등…)의 메세지가 출력 됬을 때의 이름입니다.

version : 응용 프로그램의 버전입니다.

main : Electron에서 가장 먼저 실행 메인 프로세스 스크립트 파일입니다. 이 곳에서 대부분의 기능들이 결정납니다.

(main.js)

 

메인 프로세스는 모든 웹 페이지와 각 페이지들이 소유한 렌더러(Renderer) 프로세스를 관리합니다. Renderer 프로세스는 서로 ‘독립적’으로 동작합니다.

핵심 메인 프로세스는 ‘BrowserWindow’ 인스턴스를 생성하여 웹 페이지를 만듭니다. 실제 동작을 했을 때 보여주기 위한 껍데기 역할을 합니다.

(index.html)

 

 

실제 브라우저에서 보여지는 화면입니다. main이 되는 화면으로 각종 자바스크립트 라이브러리를 사용 할 수 있습니다.

또한 Build된 index.html을 메인으로 사용하는 FrontEnd Framework(Vue, Angluer, React 등…)기반 웹 어플리케이션도 사용할 수 있습니다.

 

관련 문서

---

Electron Documents : https://www.electronjs.org/docs

Electron Quick Start : https://github.com/electron/electron-quick-start