반응형
깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기)
Node를 설치하면 일렉트론을 설치할 수 있다.
여기서 사용하는 Node 버전은 다음과 같다.
$ node -v
v16.19.0
electron_app 폴더를 만들고, 해당 폴더에서 npm init을 실행한다.
entry point가 electron app의 main이 된다.
여기서는 기본으로 설정된 index.js로 하였다.
$ npm init
This utility will walk you through creating a package.json fi
It only covers the most common items, and tries to guess sens
See `npm help init` for definitive documentation on these fie
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: (electron_app)
version: (1.0.0)
description: my_app
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\github\electron_app\package.json:
{
"name": "electron_app",
"version": "1.0.0",
"description": "my_app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes
위와 같이 설정하면 package.json이 만들어지는데, script의 start에 "electron ."을 추가한다.
{
"name": "electron_app",
"version": "1.0.0",
"description": "my_app",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^28.1.0"
}
}
이제 일렉트론을 설치한다.
$ npm install electron
main(entry point)의 이름을 index.js로 설정하였으므로 index.js를 아래와 같이 추가한다.
const { app, BrowserWindow } = require("electron");
let win;
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadFile("index.html");
win.on("closed", () => {
win = null;
});
}
//app.on("ready", createWindow);
app.whenReady().then(createWindow);
app.on("window-all-closed", () => { // 모든 창이 닫혔을 때 발생하는 이벤트
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => { // app이 활성화될 때 발생하는 이벤트
if (win === null) {
createWindow();
}
});
index.html은 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<title>일렉트론 앱</title>
</head>
<body>
<h1>Hello, Electron!</h1>
</body>
</html>
이제 npm start를 해보자.
$ npm start
> electron_app@1.0.0 start
> electron .
아래와 같이 일렉트론 앱이 실행된다.
빌드하기
electron-builder를 설치하자.
npm install electron-builder
package.json을 다음과 같이 수정한다.
(dependencies → devDependencies 로 변경)
{
"name": "electron_app",
"version": "1.0.0",
"description": "my_app",
"main": "index.js",
"scripts": {
"start": "electron .",
"pack": "electron-builder"
},
"build": {
"productName": "electron_app",
"appId": "electron_app"
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^28.1.0",
"electron-builder": "^24.9.1"
}
}
devDependencies를 변경했기 때문에 npm install을 다시 한 번 더 실행한다.
npm install
이제 npm run pack을 실행하자.
npm run pack
dist 폴더에 win-unpacked 폴더가 생성된다.
이제 electron_app.exe를 실행해보자.
반응형
'개발 > Electron' 카테고리의 다른 글
| 일렉트론 - Menu 모듈로 메뉴 만들기 (Create Native Application Menus and Context Menus) (0) | 2024.01.03 |
|---|---|
| 일렉트론 - 리액트 프로젝트 빌드하기 (Build Electron App with React) (0) | 2024.01.02 |
댓글