달력

1

« 2019/1 »

  •  
  •  
  • 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/01'에 해당되는 글 1

  1. 2019.01.19 Node.js, Electron 설치 및 동작 확인

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

  • 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
Posted by 공장장 코딩스미스

댓글을 달아 주세요