Electron은 웹 기술(HTML, CSS, JavaScript)을 사용해 데스크탑 애플리케이션을 만들 수 있는 강력한 프레임워크입니다. 이 글에서는 Visual Studio Code를 활용해 Electron 앱을 로컬에서 실행하는 방법을 단계별로 안내합니다.
1. Node.js 설치 확인
Electron은 Node.js 환경에서 동작하므로 먼저 Node.js가 설치되어 있어야 합니다.
설치 여부 확인
Visual Studio Code의 터미널(Ctrl + `)에서 아래 명령어를 입력합니다.
node -v
npm -v
두 명령어 모두 버전이 출력되면 설치가 완료된 상태입니다. 설치되어 있지 않다면 Node.js 공식 사이트에서 LTS 버전을 다운로드해 설치하세요.
2. 프로젝트 폴더 생성 및 초기화
Visual Studio Code에서 새 폴더를 만들고 해당 폴더를 열어주세요.
mkdir my-electron-app
cd my-electron-app
프로젝트를 초기화합니다.
npm init -y
이 명령어는 기본 설정으로 package.json 파일을 생성합니다.
3. Electron 설치
Electron을 개발 의존성으로 설치합니다.
npm install electron –save-dev
설치가 완료되면 node_modules 폴더와 package-lock.json이 생성됩니다.
4. 기본 파일 구성
아래와 같은 구조로 파일을 생성합니다.
My-electron-app
- main.js // Electron 메인 프로세스
- index.html // 렌더링할 HTML
- package.json // 프로젝트 설정
main.js
const { app, BrowserWindow } = require(‘electron’);
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
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>
</body>
</html>
5. package.json 수정
Electron 앱을 실행할 수 있도록 package.json의 “scripts” 항목을 수정합니다.
“scripts”: {
“start”: “electron .”
}
6. 앱 실행
Visual Studio Code의 터미널에서 아래 명령어를 입력합니다.
npm start
Electron 창이 열리면서 index.html에 작성한 내용이 표시됩니다.