728x90
필수 개념
- Electron은 웹 기술(HTML, CSS, JavaScript)로 데스크톱 애플리케이션을 만들 수 있는 프레임워크이다.
- Electron 앱은 두 개의 주요 프로세스로 나뉜다:
- 메인 프로세스 (Main Process): Node.js 환경에서 실행되며 애플리케이션 수명 주기를 관리하고, OS와 상호작용한다.
- 렌더러 프로세스 (Renderer Process): 각 창에서 실행되며 웹 기술을 사용하여 UI를 렌더링 한다.
프로젝트 설정
폴더 생성 및 npm 초기화
mkdir my-electron-app && cd my-electron-app
npm init -y
Electron 설치 (개발 의존성)
npm install electron --save-dev
.gitignore 추가
node_modules/를 포함하여 불필요한 파일을 Git에서 제외해야 한다.
Electron 앱 실행
main.js 생성 및 기본 코드 작성
console.log('Hello from Electron 👋')
package.json 수정 (scripts 추가)
"scripts": {
"start": "electron ."
}
실행
npm run start
BrowserWindow로 UI 추가
index.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello from Electron</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
</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()
})
▶ 실행 후 결과
실행하면 index.html이 Electron 창에 표시된다.
운영 체제별 창 관리
모든 창이 닫히면 앱 종료 (Windows & Linux)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
macOS에서 창이 닫혀도 앱 실행 유지
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
배운 점 정리
- Electron 프로젝트는 npm init으로 설정하고, electron을 devDependency로 설치한다.
- 메인 프로세스(main.js)에서 BrowserWindow를 생성하여 HTML 파일을 로드한다.
- OS별 창 관리 방법을 구현해야 한다. (Windows/Linux vs macOS)
- 다음 학습 목표: Renderer 프로세스 보강 & 프로세스 간 통신 (IPC) 배우기 🚀
728x90
'Web > Node.JS' 카테고리의 다른 글
| Node.js 최신 자바스크립트 트렌드와 프론트엔드 기술 탐구 (0) | 2025.02.06 |
|---|---|
| Node.js 입문 기본 개념과 설치 방법 (0) | 2025.02.05 |
| NodeJS 공부한후 누군가와 함께 팀프로젝트를 시작 해보려고 한다. (0) | 2025.02.04 |