⭐ Node.js 설치하기
Node.js — Download Node.js®
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
일렉트론에서는 프로젝트 기본 구조 생성 과정에서 Node.js가 사용된다. 또, NPM 패키지 관리자도 일렉트론 생태계에서 사용되므로, 위 사이트에서 최신 LTS 버전을 다운로드 받고 설치하자.
📌 Node.js와 NPM 설치 확인하기
명령 프롬프트 창을 열어서 node -v 명령어와 npm -v 명령어로 설치가 정상적으로 이루어졌는지 확인할 수 있다.
⭐ 일렉트론 프로젝트 실행하기
mkdir my-electron-app && cd my-electron-app
npm init
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "RYU",
"license": "MIT"
}Entry Point는 index.js가 아니라 main.js로 설정한다.
npm install electron --save-dev
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "RYU",
"license": "MIT",
"devDependencies": {
"electron": "^35.0.0"
}
}다음 명령어를 작성해서 electron 의존성을 추가한다.
이 단계까지 도달하면 main.js가 생겨야 한다고 했는데 따로 생성되지 않아서 직접 생성하고 실행하는 명령어를 추가하여 package.json을 변경했다.
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start" : "electron ."
},
"author": "RYU",
"license": "MIT",
"devDependencies": {
"electron": "^35.0.0"
}
}
⭐ 일렉트론으로 'Hello World' 띄우기
일렉트론으로 Hello World를 띄우기 위해서 필요한 폴더는 위와 같다.
📌index.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 from Electron renderer!</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
<p>👋</p>
</body>
</html>
📌 main.js
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then( () => {
createWindow()
})
📌 결과물
실행은 npm start로 할 수 있다.