먼저 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) ypackage.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
끝...
자세한 공부는 아래에서 하자.
'JavaScript&Platform > nodejs&electron' 카테고리의 다른 글
| [NodeJs] nodeJs 에서 Shared Memory 사용해야 할때. (0) | 2022.12.20 |
|---|---|
| [NodeJs] npm을 이용하여 원하는 버전을 추가해 보자(version) (0) | 2022.05.10 |
| [NodeJs] nodejs 원하는 버전을 설치해 보자 (0) | 2022.05.10 |
