Electron으로 데스크탑 앱 만들기 (2) - React + Vite + JavaScript

 

nvm까지 설치를 했으니, 실제 프로젝트를 생성해서 Electron으로 감싸보자!

🔧 개발 환경 : Vite
🔨 라이브러리 : React 
🤔 언어 : JavaScript

 

NVM 설치 관련은 아래 포스팅  참고 🔽

https://cyjcyj.tistory.com/207

Electron으로 데스크탑 앱 만들기 (1) - NVM 설치부터

 

---

🏃🏻‍♀️ 목표

 

목표 : 데스크탑 앱으로 띄우기 

순서 : 1️⃣ 프로젝트 생성 -> 2️⃣ Electron 설치 및 기본 설정 -> 3️⃣ 실행 앱 띄우기

 

1️⃣ 프로젝트 생성

> npm create vite@latest
> cd electron-app
> npm install
React, JavaScript, 프로젝트 이름 : electron-app 설정

 

 

2️⃣ Electron 설치 및 기본 설정

> cd ..
> npm install --save-dev electron
sample-app에서 실행 (Electron을 메인 프로세스로 실행할 것이기 때문에 별도로 루트에서 관리)
> touch main.js
sample-app 루트 디렉토리에 main.js 파일 확인

* main.js에 코드 작성

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 없어도 무방
    }
  });

  win.loadURL('http://localhost:5173');
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

- BrowserWindow({ ... }) : 앱 창을 하나 생성
- win.loadURL(...) : 창에 보여줄 웹 페이지
- app.whenReady() : Electron이 실행되고 초기화가 완료되면 실행됨
- app.on('activate') : macOS에서는 창을 모두 닫아도 앱이 살아있는 경우가 많기 때문에 조건 추가
- window-all-closed : 모든 창이 닫혔을 때 발생하는 이벤트 (같은 이유로 darwin 플랫폼만 예외 처리)

 

 

3️⃣ 실행 앱 띄우기

1) 보조패키지 설치
> npm install --save-dev concurrently wait-on
concurrently : npm run dev: react + npm run dev: electron 두개 동시 실행
wait on : React가 준비되기까지 Electron 실행 잠시 대기

2) package.json (main, name, version, scripts) 작성

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "concurrently \"npm:dev:react\" \"npm:dev:electron\"",
    "dev:react": "cd electron-app && npm run dev",
    "dev:electron": "wait-on http://localhost:5173 && electron ."
  },
  "devDependencies": {
    "concurrently": "^9.x.x",
    "electron": "^3x.x.x",
    "wait-on": "^8.x.x"
  }
}

❗️ main과 version이 없으면 경고창 뜨니 작성 필수
🔽 version 형식/규칙 (참고) 🔽

형식	의미
1.0.0	기본적인 형식
0.1.0	정식 릴리스 전일 때
2.5.3	주 버전 2, 부 버전 5, 패치 3

항목	설명	예시
1 (주 버전)	큰 기능 추가나 구조 변경	1.0.0 -> 2.0.0
0 (부 버전)	새로운 기능 추가 (호환됨)	1.0.0 -> 1.1.0
0 (수정 버전)	버그 수정 등	1.0.0 -> 1.0.1

예시	설명
0.1.0	개발 중인 초기 앱
1.0.0	첫 정식 릴리스
1.2.3	여러 기능 추가 + 수정 상태
2.0.0	리팩토링 또는 큰 변화

3) 실행
> npm run dev
electron 앱과 브라우저 모두 뜨는지 확인

 

 

---

브라우저와 앱에 띄우는 것까지는 수월하게 했으나, 배포에서 살짝 삽질 아닌 삽질을 해버렸기 때문에,,

다음 포스팅은 삽질 끝에 성공한 배포까지 작성해보겠다~ 😄