봄수의 연구실

Electron 애플리케이션 개발: Yarn을 활용한 기본 설정과 파일 구성 본문

DEV

Electron 애플리케이션 개발: Yarn을 활용한 기본 설정과 파일 구성

berom 2024. 1. 4. 00:18

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 파일을 구성합니다.

  1. Electron 모듈 임포트: app과 BrowserWindow를 임포트합니다.
  2. BrowserWindow 인스턴스 생성: 애플리케이션 창 설정을 정의합니다.
  3. 애플리케이션 초기화 및 창 로드: 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
'DEV' Related Articles more