Electron 애플리케이션 개발: Yarn을 활용한 기본 설정과 파일 구성
Yarn을 통한 Electron 설치 및 초기 설정
Yarn을 사용하여 Electron을 손쉽게 설치하고 프로젝트를 초기화합니다.
yarn init -y
yarn add electron --dev
index.html의 기본 구조 설정
기본 HTML 구조를 설정하여 Electron 애플리케이션의 UI를 구성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Electron App</title>
</head>
<body>
<h1>Welcome to My Electron App!</h1>
<!-- 추가 UI 구성 요소를 여기에 추가 -->
</body>
</html>
main.js로 Electron 애플리케이션의 메인 프로세스 설정
Electron의 메인 프로세스를 정의하는 main.js 파일을 구성합니다.
- Electron 모듈 임포트:
app과BrowserWindow를 임포트합니다. - BrowserWindow 인스턴스 생성: 애플리케이션 창 설정을 정의합니다.
- 애플리케이션 초기화 및 창 로드:
app.whenReady()를 통해 애플리케이션을 초기화하고index.html을 로드합니다.
const { app, BrowserWindow } = require('electron');
function createWindow() {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
package.json을 통한 애플리케이션 설정 관리
package.json 파일을 통해 애플리케이션의 메타데이터와 실행 스크립트를 정의합니다.
{
"name": "your-app-name",
"version": "1.0.0",
"description": "Your app description",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"dependencies": {
"electron": "^version"
}
}
애플리케이션 실행 및 테스트
Yarn을 사용하여 Electron 애플리케이션을 실행하고 테스트합니다.
yarn start
728x90
'DEV' 카테고리의 다른 글
| Typescript의 interfaced와 type의 차이는 뭘까 (0) | 2024.01.25 |
|---|---|
| 매번 yarn build 하지 않고 자동 빌드 및 재시작하는 방법 (0) | 2024.01.06 |
| 2023-50W 대노스터디 (0) | 2023.12.12 |
| Intro. Face-based Cryptographic Key Generation (0) | 2023.03.08 |
| Postman 자동화하는 방법 with csv (4) | 2023.02.16 |
