Electron은 웹 기술을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발하기 위한 오픈 소스 프레임워크입니다. 주로 HTML, CSS, JavaScript를 사용하여 UI를 구축하고 Node.js를 사용하여 백엔드 로직을 처리합니다. Electron은 웹 애플리케이션을 데스크톱 환경에서 실행할 수 있도록 해주는 Chromium 브라우저와 Node.js 런타임을 기반으로 합니다.
아래는 Electron을 사용하여 간단한 데스크톱 애플리케이션을 개발하는 예제 코드입니다.
- 프로젝트 초기화:
mkdir my-electron-app
cd my-electron-app
npm init- 필요한 패키지 설치:
npm install electron --save-dev- 메인 프로세스 스크립트 작성 (main.js):
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});- 렌더러 프로세스 스크립트 작성 (index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Electron App</title>
</head>
<body>
<h1>Hello Electron!</h1>
<script>
console.log('Hello from the renderer process!');
</script>
</body>
</html>- 애플리케이션 실행:
npx electron .위의 예제 코드에서 Electron 애플리케이션은 main.js 파일을 시작점으로 사용합니다. createWindow 함수는 브라우저 창을 생성하고 index.html 파일을 로드합니다. app 객체는 Electron 애플리케이션의 생명주기 이벤트를 관리하며, BrowserWindow는 렌더러 프로세스를 포함하는 브라우저 창을 생성합니다.
Electron은 웹 기술을 사용하기 때문에 웹 애플리케이션과 유사한 방식으로 개발할 수 있습니다. 이를 통해 크로스 플랫폼 데스크톱 애플리케이션을 비교적 간단하게 개발할 수 있습니다. 또한 Electron은 네이티브 기능에 접근할 수 있는 API를 제공하므로 파일 시스템, 네트워크, 운영체제 등 다양한 기능을 활용할 수 있습니다.
