Introduction

Electron은 JavaScript, HTML, CSS 같은 웹 기술로 네이티브 애플리케이션을 만들 수 있는 프레임워크입니다. 기본적으로 Chromium과 Node.js를 이용하고 있으며, 이에 따라 Node.js에 익숙한 분들은 쉽게 접근이 가능합니다. 또한 GitHub가 관리하는 오픈소스 프로젝트이며, 크로스플랫폼 개발을 진행할 수 있습니다.

Electron 또한 Node.js 모듈과 마찬가지로 시작점은 package.json 입니다. Node.js가 서버 사이드에 대하여 최적화된 런타임을 제공한다면, Eletron은 데스크탑 애플리케이션에 좀 더 초점을 맞추고 있는 런타임입니다.

버전

Electron은 3가지 버전으로 제공되고 있습니다.

toy example

Electron 공식 문서에서 제공하는 예시 어플리케이션을 만들어봅시다. git 저장소에서 소스를 불러온 후, npm으로 의존성을 설치한 다음 어플리케이션을 구동합니다.

# 빠른 시작 저장소 Clone
$ git clone https://github.com/electron/electron-quick-start

# 저장소로 이동
$ cd electron-quick-start

# 종속성을 설치하고 실행하세요
$ npm install && npm start

위 과정을 완료하면 다음과 같은 파일이 생성됩니다.

/electron-quick-start (master)
$ ls -al
total 69
drwxr-xr-x 1  197121     0   ./
drwxr-xr-x 1  197121     0   ../
drwxr-xr-x 1  197121     0   .git/
-rw-r--r-- 1  197121    14   .gitignore
-rw-r--r-- 1  197121   712   index.html
-rw-r--r-- 1  197121  6585   LICENSE.md
-rw-r--r-- 1  197121  1443   main.js
drwxr-xr-x 1  197121     0   node_modules/
-rw-r--r-- 1  197121   456   package.json
-rw-r--r-- 1  197121 28013   package-lock.json
-rw-r--r-- 1  197121   445   preload.js
-rw-r--r-- 1  197121  2362   README.md
-rw-r--r-- 1  197121   299   renderer.js

npm은 package.json이라는 파일을 통해 정보를 관리합니다. main 필드에 명시된 스크립트는 앱을 시작하는 스크립트입니다.

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js"
}

만일 main 필드 값이 설정되어있지 않다면 Electron은 index.js를 로드하려고 할 것입니다. 것은 간단한 Node 애플리케이션이지만, 현재 패키지를 실행하기 위한 node 명령어를 담은 start 스크립트를 추가할 수도 있습니다.

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "node ." // 또는 electron .
  }
}

브라우저를 통해 나타나는 부분은 index.html에서 다루어지게 됩니다. 따라서 이 부분을 수정하면 다음과 같은 화면을 볼 수 있습니다.

Installation

간략하게 Electon 애플리케이션의 맛을 보았다면, 이제 Electron을 설치해볼 시간입니다. 여러가지 앱과 작업할 수 있게 개발의존성 유형으로 electron을 설치합시다.

앱 디렉토리에서 npm으로 electron을 설치해봅시다

npm install --save-dev electron

전역설치는 다음과 같이 진행할 수 있습니다.

npm install electron -g

프록시, 커스텀미러, 캐시 등 다른 방식으로 설치하는 방법은 공식문서를 참조합시다.

Reference

Electron Document