Electron 소개
1. Electron은 무엇인가?
Electron은 HTML, css, javascript을 사용하여 크로스 플랫폼을 지원하는 데스크탑 어플리케이션을 제작할 수 있는 프레임워크입니다.
Electron은 Chromium과 Node.js를 하나의 런타임으로 결합하여 실행되며, Mac, Windows 및 Linux 용으로 패키지화 할 수 있습니다.
2. Electron으로 만들어진 프로그램
Atom - https://atom.io/
Visual Studio Code - https://code.visualstudio.com/
Kaku Music player - http://kaku.rocks/
WebTorrent - https://webtorrent.io/
3. Electron 설치
- Node 설치 - https://nodejs.org 에서 Node.js를 설치합니다.
- Electron 설치
전역 설치npm install electron -g
프로젝트별 설치
npm install electron --save-dev
※ Mac이나 리눅스의 경우는 권한에 따라서 npm 명령어 앞에 sudo를 적어주어야 합니다.
4. Electron 실행 구조
Electron은 Main Process와 Renderer Process라고 불리는 2개의 실행 구조를 가집니다.
- Main Process :
- 이 프로세스는 Electron의 주 프로세스이며, BrowserWindow api 인스턴스를 통해 창을 생성하고 웹페이지를 읽어옵니다. Browser process 라고도 불립니다.
- 대표 API 소개
- Renderer Process :
- Main Process의 BrowserWindow가 표시하는 웹페이지 내의 프로세스 입니다. 각각의 웹페이지는 개별적인 Renderer Process를 가집니다.
- 일반 브라우저는 시스템의 고유 리소스 접근을 허용하지 않지만, Electron은 Node.js API를 통해 OS와 상호작용을 가능하게 합니다.
- 대표 API 소개
- webFrame : 현재 웹페이지의 렌더링을 커스터마이징하는 모듈
- remote : Renderer Process에서 Main Process의 모듈을 사용이 가능하게 해주는 모듈
- ipcRenderer : Renderer process에서 Main Process로 비동기적으로 통신하는 모듈