Electron 개발환경

Electron 개발환경 만들기

git 설치

다음의 명령어를 실행하면 git이 다운됩니다.

$ brew install -s git

아래의 명령어를 실행하면 잘 설치되었는지 확인 할 수 있습니다.

$ git --version

Node.js 설치

node.js는 JavaScript 기반으로 구성된 서버 사이드 서비스를 JavaScript로 구현할 수 있게 만든 런타임입니다.
Node.js는 아래의 링크에서 다운받을 수 있습니다.
https://nodejs.org/en/download/

npm은 node.js 기반의 모듈을 모아둔 집합 저장소입니다.
터미널에 아래와 같은 명령어를 입력하고 version이 잘 나타나는지 확인합니다. 두 명령어를 실행하여 버전 값이 출력 되었다면 잘 설치된 것입니다.

$ node -v
$ npm -v

Node.js 업데이트

이미 Node.js가 깔려있다면 아래의 명령어를 통해 Node.js와 npm을 update시킵니다.

$ sudo npm install -g n
$ sudo n latest

Electron 설치

기본적으로 Electron은 아래와 같은 폴더 구조를 가집니다.

your-app/
├── package.json
├── main.js
└── index.html

package.json : 앱의 기본 파일을 가리키고 디테일한 정보와 종속성에 대한 정보가 담긴 파일입니다.
main.js : 앱을 시작하고 어떻게 실행할지 어떤 설정이 필요한지에 대한 코드이며 main process에 해당됩니다.
index.html : 실제 앱에 보여줄 화면이며 renderer process에 해당됩니다.

새로운 Electron 애플리케이션을 위해 빈 폴더를 하나 만듭니다.

$ mkdir electron_test
$ cd electron_test

아래의 명령어를 실행하고 엔터/엔터/엔터/main.js/엔터/엔터/엔터/엔터/엔터 를 눌러줍니다.

$ npm init

package name: (electron) 
version: (1.0.0) 
description: 
entry point: (index.js) main.js
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 

위의 과정을 마쳤다면 package.json은 아래와 같은 내용을 담고 있을 것입니다. 참고로 Electron은 main의 필드값을 보고 어떤 JavaScript 파일을 실행할지 결정합니다.

 {                                                                              
   "name": "eletest",
   "version": "1.0.0",
   "description": "", 
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },  
   "author": "", 
   "license": "ISC",
   "devDependencies": {
     "electron": "^8.1.1"
   }
 }

이제 다음의 명령어를 입력하면 electron이 설치됩니다.

$ npm install --save-dev electron

main.js, index.html, package.json 파일을 작성한 후 아래의 명령어를 입력하면 앱이 실행됩니다.

npm start

Electron 예제 실행 시키기

Electron-quick-start 실행 하기

다음으로는 예제코드가 들어있는 Electron-quick-start을 받아 실행해보겠습니다.

$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install
$ npm start

실행하면 다음과 같은 화면을 볼 수 있습니다.

앱 실행은 npm start의 명령어로 시작할 수도 있고 npm이 로컬에 다운받아져 있다면 아래의 명령어로도 앱을 실행 할 수 있습니다.

$ ./node_modules/.bin/electron .

Electron Build

예제인 Electron-quick-start Application을 실제로 빌드를 하여 실행 파일을 생성해보겠습니다.
아래의 명령어를 실행하여 Build Package Tool을 설치해보도록 하겠습니다.

npm i -D electron-builder

설치 후 패키지에 필요한 정보를 package.json 가장 하단에 추가합니다.

{
  // ..
  "build": {
    "productName": "Electron-Application",
    "appId": "myApp"
  }
}

다음으로 package.json의 npm command를 수정합니다.

{
  // ..
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder"
  }
}

아래의 명령어를 입력하여 실행시킵니다.

$ npm run pack

그럼 Electron Application을 실행 및 설치 할 수 있는 파일을 확인 할 수 있습니다.