달력

12

« 2019/12 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  
2019. 1. 19. 19:39

Node.js, Electron 설치 및 동작 확인 프로그래밍/Electron2019. 1. 19. 19:39

이 글은 아래의 내용을 담고 있다.

  • Node.js 인스톨과 Electron 시작(본 글에 해당)
  • Electron으로 ffi를 인스톨
  • ffi로 C++ dll을 기동하여, dll 내부 함수를 사용
  • 작성한 Electron어플리케이션을asar으로 하나의 파일로 정리하여 패키징한다.

내 개발 환경 상 Windows10으로 이야기를 진행한다.



Node.js인스톨과 Electron 시작

Electron공식홈페이지에 의하면 현재 안정판은(2019.01.19 기준)

$ npm i -D electron@latest
# Electron     4.0.1
# Node         10.11.0
# Chromium     69.0.3497.106

이기 때문에, 우선 똑같은 Node.js 버전을 구한다.

Node.js 설치와 설정

Node.js릴리스 페이지에서 해당하는 버전을 찾는다.

확장자는 .ms 이다. 64비트를 다운로드, 설치한다. 

설치 후 터미널에서 

$ node -v

를 입력하여, 정상적으로 버전이 표시되었다고 설치가 완료된 것은 아니다.

Node를 윈도우에 설치할 때, 환경변수 설정이 잘못 등록되는 버그가 있기 때문이다.

시스템 환경변수의 Path에는 다음과 같이 등록될 수 있다.

C:\Program Files\nodejs\

아래와 같이 수정한다.

C:\Program Files\nodejs


Electron 설치

프로젝트를 작성하고, 프로젝트를 포기화한다.

your-project> npm ini

이것저것 입력하라고 나오지만, 전부 엔터를 눌러도 문제없다. 필요하다면 완료 후에 package.json 를 편집해도 좋다.
그리고 Electron를 설치한다.

your-project> npm install electron --save-dev

그리고 나서, package.json를 아래와 같이 편집한다.

package.json
{
  "name": "your-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "electron": "설치 버젼"
  }
}

index.js와 index.html로 기술한다.

index.js
const electron = require('electron');
const {app, BrowserWindow} = electron;
const path = require('path');
const url = require('url');
const fs = require('fs');

let mainWindow;

//어플리케이션 기동이 종료 후 동작한다.
app.on('ready', () => {
    createWindow();
});

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 400,
        height: 300,
        useContentSize: true,
        title: "test",

    });

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    //윈도우 전부를 닫고, null로 지정한다.
    mainWindow.on('closed', () => {
        mainWindow = null
    });
}
index.html
<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>
</head>
<body>
Hello world!
</body>
</html>

커맨드를 실행하고, 문제없이 동작하는지 확인한다.

your-project> npm start


'프로그래밍 > Electron' 카테고리의 다른 글

Node.js, Electron 설치 및 동작 확인  (0) 2019.01.19
Trackback (0) : Comment (0)
Posted by 공장장 코딩스미스

댓글을 달아 주세요