일렉트론을 알아보게 된 계기
새로 개발하는 시스템(기본적으로 현장에서 사용할)이 컴퓨터에서도 되고, 모바일 환경에서도 작동해야 했다. 두가지 방법이 거론되었는데, 하나는 Electron 으로 개발, 다른하나는 웹버전으로 만들기 이다. 어떠한 선택에 있어서, 가장 좋은 방법은 가장 합리적인 방법을 택하는 것이라 생각했다. 우선은 생소한 일렉트론에 대해 알아보고자 구글링을 해보았다.
일렉트론(Electron) 이란?
일렉트론은 Javascript(+html, css) 만으로도 여러 플랫폼에서 동작할 수 있는 데스크톱 어플리케이션을 만들 수 있게 해주는 프레임워크다.
자바스크립트 만으로 라는 게 무엇일까. 기존에 React로 개발하던 소스 코드를 그대로 사용해도, 일렉트론으로 빌드하여 데스크톱 앱으로 만들어낼 수 있다.
공식문서에 나온 일렉트론의 개요.
The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromium and is used by the Atom editor and many other apps.
일렉트론은 브라우저 (Chromium)와 Node.js를 기본 번들로 포함해버리기 때문에 앱 용량이 매우 커지는 단점… bare-bones 일렉트론 앱은 압축하지 않은 상태에서 120MB 정도 됨..
😊 장점
- 방대한 커뮤니티 보유
- Microsoft, Discord, Slack 등에서 사용중
- 낮은 러닝 커브로 배우기 쉬움.
- 웹 기술을 사용할 수 있다. ⭐️ 가장핵심!
- Node.js 를 사용하므로 Javascript 의 모든 기능 사용 가능.
😡 단점
- 큰사이즈의 설치 파일
- 많은 RAM 과 CPU 사용
- 모바일 지원 X … ⭐️ 핵심.
- 현재 개발하는 시스템은 모바일 기능도 만들어야 하는데, 이부분이 아쉽다.ㅠ_ㅜ
- 보안에 취약
일렉트론은 Node.js와 Chormium(구체적으로는 Chromium 렌더링 엔진)을 기반으로 한다고 언급한다. 이것이 무슨 의미인지 이해하려면 Electron Process Model을 알아볼 필요가 있다.
Electron Process Model = main process + renderer process
일렉트론은 두 가지 프로세스 , main process 와 renderer process 라는 개념이 존재한다.
Process Model
일렉트론은 Chromium 멀티 프로세스 구조를 상속받아 최근 웹 브라우저와 구조적으로 비슷.
Why not a single process?
웹 브라우저들은 정말 엄청나게 복잡한 어플리케이션이다. 가장 중요한 능력인 웹 컨텐트를 보여주는 것을 뒤로하고, 그들은 다른 책임이 있는데, 예를 들어 여러개의 윈도우(혹은 tabs) 를 정리하거나 써드파티 확장자를 로딩하는 것이 있다.
이전에는, 브라우저는 보통 싱글 프로세스를 사용했다. 이런경우 하나의 웹사이트 crashing이 혹은 hanging이 모든 브라우저에 영향을 줄 수 있다.
The multi-process model
이러한 문제를 해결하기 위해, the Chrome team은 각 탭이 각각의 고유한 프로세스를 렌더하게끔 했다,
일렉트론 어플리케이션도 유사하게 구성되어있다. 개발자로서 두개의 프로세스를 제어할 텐데 main 과 renderer 이다.
The main process
각각의 일렉트론 앱은 하나의 싱글 main process를 갖는데, 어플리케이션의 entry point 에서 작동한다. 메인 프로세스는 Node.js 환경에서 구동되는데, 이는모듈과 Node.js APIs 를 require 할 수 있다는 얘기다.
Window management 메인 프로세스의 가장 중요한 목적은 BrowserWindow 모듈을 사용해서 어플리케이션 윈도우를 생성하고 관리하는 것이다.
Application lifecycle
메인 프로세스는 일렉트론의 app module 을 통해 어플리케이션의 라이프사이클(생명주기) 를 조정한다.
Native APIs
메인 프로세스는 웹 컨텐츠를 넘어서, custom APIs 를 추가해 사용자의 운영체제와 소통할 수 있다.
The renderer process
각 일렉트론 앱은 BrowserWindow에 대해 별도의 렌더러 프로세스를 생성한다. 이름에서 알 수 있듯이 렌더러는 웹 콘텐츠를 렌더링 하는 역할. 모든 웹 사양을 설명할 순 없지만, 최소한 이해해야 할 사항.
- HTML 파일은 렌더러 프로세스의 endPoint
- CSS(Cascading Style Sheets) 를 통해 UI 스타일링 추가.
<script>요소를 통해 실행 가능한 JavaScript 코드를 추가가능.
대충 오늘은 여기까지 알아보자. 실제 사용법은 다음 블로깅에서 알아보겠다.