728x90
1. 일렉트론이란
기본적으로 자바스크립트 언어는 웹브라우저에서 사용가능한 언어입니다. 그러나 자바스크립트를 데스크톱 어플리케이션에도 사용할 수 있습니다. 이를 위한 프레임워크가 일렉트론입니다.
일렉트론은 웹 브라우저를 데스크톱 어플리케이션의 형태로 실행하는 것입니다. 따라서 웹 브라우저 기반의 html.css 등을 그대로 사용합니다. 따라서 웹 개발을 해본 개발자라면 쉽게 사용할 수 있습니다.
공식문서는 아래 링크에 접속해서 확인하시면 됩니다.
Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron
Build cross-platform desktop apps with JavaScript, HTML, and CSS
www.electronjs.org
2. 일렉트론 기본 세팅
아래 코드를 터미널에 입력하여 설치합니다.
npm install electron
기본 코드는 아래와 같습니다.
main.js
const { app, BrowserWindow,globalShortcut ,ipcMain } = require('electron');
const path = require('path');
let mainWindow;
let control
const controller = require('./controller');
async function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});
await mainWindow.loadFile('index.html');
globalShortcut.register('F11', () => {
mainWindow.webContents.openDevTools();
})
control = new controller();
}
// Electron 초기화
app.whenReady().then(async () => {
await createWindow();
});
// Renderer에서 이벤트 수신
// 크롤링 실행
ipcMain.on('start-crawl', async (event, data) => {
try {
console.log("received data: ", data)
let result = control.run(data);
// Renderer에게 완료 메시지 전달 가능
event.reply('crawl-done', `result: ${result}`);
} catch (err) {
console.error('[Main] Puppeteer run error:', err);
event.reply('crawl-error', err.message);
}
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
control?.close();
app.quit()
}
})
preload.js
const { contextBridge, ipcRenderer } = require('electron');
// electronAPI는 view단에서 호출할 변수명
contextBridge.exposeInMainWorld('electronAPI', {
startCrawler: (url) => ipcRenderer.send('start-crawl', url),
onCrawlDone: (callback) => ipcRenderer.on('crawl-done', (event, message) => callback(message)),
onCrawlError: (callback) => ipcRenderer.on('crawl-error', (event, message) => callback(message))
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<script src="event.js" defer></script>
</head>
<body>
<center>
<h1>Hello World!</h1>
<div>
<form id="form">
<input name="uid">
<input name="username">
<button>실행</button>
</form>
</div>
</center>
</body>
</html>
event.js
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("form");
form.addEventListener("submit", function(e) {
e.preventDefault(); // 페이지 새로고침 방지
let formData = new FormData(form);
let uid = formData.get('uid');
let username = formData.get('username');
const data = {
'uid': uid,
'username': username,
};
// 여기서 electronAPI는 preload.js의 브릿지의 api키와 동일해야 함
window.electronAPI.startCrawler(data);
});
});
3. 실행방법
pakage.json파일에서 start앞의 재생버튼을 클릭하거나 터미널에 npm.start를 입력하면 됩니다.
{
"name": "test",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"electron": "^38.0.0",
"googleapis": "^159.0.0",
"puppeteer": "^19.11.1",
"puppeteer-core": "^24.18.0",
"puppeteer-extra": "^3.3.6",
"puppeteer-extra-plugin-stealth": "^2.11.2"
}
}
'JAVASCRIPT Programming > Node.js' 카테고리의 다른 글
| [Node.js] node.js 설치 및 프로젝트 생성 (1) | 2024.07.15 |
|---|