https://nodejs.org/download/release/v10.24.1/

 

Index of /download/release/v10.24.1/

 

nodejs.org

 

NodeJs 버전은 10.x.x 사용

node-gyp 은 6.1.0 사용

~]# npm install -g node-gyp@6.1.0

끝!!!

 

Posted by 비니미니파파

npm 으로 원하는 버전 설치하기 중요 

node-gyp 을 원하는 버전 6.1.0으로 설치하고자 할때는

node-gyp@version 형식으로 설치 하면 된다. 

~]# npm install -g node-gyp@6.1.0

버전 확인

~]# node-gyp -v
v6.1.0
Posted by 비니미니파파

먼저 nodejs 가 설치되어 있어야 한다.

프로젝트 디렉토리를 생성 한다. ( 예 : pjtest )

visual studio code 를 실행 후 폴더를 연다.

nodejs 나 electron 개발 시 visual studio code 가 좀 더 편한거 같다.

터미널을 연다.

터미널에서

~> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (pjtest)
version: (1.0.0)
description: Test Project
entry point: (index.js)
test command: start
git repository:
keywords:
author:
license: (ISC) MIT
About to write to C:\dev\vstudio\workspace\pjTest\package.json:
{
  "name": "pjtest",
  "version": "1.0.0",
  "description": "Test Project",
  "main": "index.js",
  "scripts": {
    "test": "start"
  },
  "author": "",
  "license": "MIT"
}


Is this OK? (yes) y

package.json 이 생성되었으면 반은 성공

일렉트론을 설치해 보자

~> npm install --save-dev electron

added 87 packages, and audited 88 packages in 21s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

설치완료 스타트(start) 스크립트 설정

package.json 을 열고 script 부분을 아래와 같이 변경한다.

  "scripts": {
    "start": "electron ."
  },

{
  "name": "pjtest",
  "version": "1.0.0",
  "description": "Test Project",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "electron": "^13.1.9"
  }
}

설정은 끝났다. 실행할 파일을 만든다. ( index.js , main.html )

index.js

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    })

    mainWindow.loadFile('main.html')

}

app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

main.html 을 만든다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

터미널에서 실행해 본다.

~> npm start

 

끝...

자세한 공부는 아래에서 하자.

https://www.electronjs.org/docs/tutorial/quick-start

Posted by 비니미니파파