Electron과 웹 기술 연동

React, Vue, Svelte를 Electron과 함께 사용하기

Electron은 HTML, CSS, JavaScript 기반으로 UI를 구성하기 때문에, React, Vue, Svelte 같은 프론트엔드 프레임워크와 쉽게 통합할 수 있습니다.
이를 통해 강력한 데스크톱 애플리케이션을 개발할 수 있습니다.

Electron과 React, Vue, Svelte는 Vite를 활용하면 쉽게 통합 가능
렌더러 프로세스에서 preload.js를 사용하여 보안을 강화해야 함
IPC(ipcMain, ipcRenderer)를 활용하여 프레임워크와 Electron을 연결 가능

---

1. Electron + React 설정 및 실행

Electron에서 React를 사용하려면 Vite + React 설정 후 Electron과 연동하면 간단하게 실행할 수 있습니다.

1️⃣ 프로젝트 생성

mkdir electron-react-app
cd electron-react-app
npm init -y

프로젝트 폴더를 만들고 초기화합니다.

---

2️⃣ React + Vite 설치

npm create vite@latest frontend --template react
cd frontend
npm install

React 프로젝트를 Vite로 설정하고 필요한 패키지를 설치합니다.

---

3️⃣ Electron 패키지 설치

cd ..
npm install electron electron-builder concurrently wait-on cross-env --save-dev

Electron 실행 및 빌드를 위한 패키지를 설치합니다.

---

4️⃣ main.js (Electron 메인 프로세스)

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

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, "preload.js"),
    }
  });

  mainWindow.loadURL("http://localhost:5173"); // Vite 개발 서버 로드
});

이제 Electron이 React 개발 서버를 로드하도록 설정됩니다.

---

5️⃣ package.json에 실행 스크립트 추가

"scripts": {
  "start": "concurrently \"npm run dev --prefix frontend\" \"wait-on http://localhost:5173 && electron .\""
}

이제 npm run start를 실행하면 Electron과 React가 함께 실행됩니다.

---

6️⃣ React에서 Electron API 사용

preload.js (보안 설정)

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
  sendMessage: (message) => ipcRenderer.send("messageToMain", message)
});

React 컴포넌트에서 API 호출

import { useEffect } from "react";

function App() {
  useEffect(() => {
    window.electronAPI.sendMessage("React에서 보낸 메시지");
  }, []);

  return <h1>Electron + React</h1>;
}

export default App;

이제 React에서 Electron의 기능을 활용할 수 있습니다.

---

2. Electron + Vue 설정 및 실행

Vue와 Electron을 통합하려면 Vite + Vue 프로젝트를 만든 후 Electron과 연결하면 됩니다.

1️⃣ 프로젝트 생성

mkdir electron-vue-app
cd electron-vue-app
npm init -y

---

2️⃣ Vue + Vite 설치

npm create vite@latest frontend --template vue
cd frontend
npm install

---

3️⃣ Electron 패키지 설치

cd ..
npm install electron electron-builder concurrently wait-on cross-env --save-dev

---

4️⃣ main.js (Electron 메인 프로세스)

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

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, "preload.js"),
    }
  });

  mainWindow.loadURL("http://localhost:5173"); // Vite 개발 서버 로드
});

---

5️⃣ package.json 실행 스크립트 추가

"scripts": {
  "start": "concurrently \"npm run dev --prefix frontend\" \"wait-on http://localhost:5173 && electron .\""
}

---

6️⃣ Vue 컴포넌트에서 Electron API 사용

preload.js

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
  sendMessage: (message) => ipcRenderer.send("messageToMain", message)
});

Vue 컴포넌트에서 API 호출

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  window.electronAPI.sendMessage("Vue에서 보낸 메시지");
});
</script>

<template>
  <h1>Electron + Vue</h1>
</template>

이제 Vue에서도 Electron API를 사용할 수 있습니다.

---

3. Electron + Svelte 설정 및 실행

Svelte도 Vite를 사용하여 쉽게 Electron과 연동할 수 있습니다.

1️⃣ 프로젝트 생성

mkdir electron-svelte-app
cd electron-svelte-app
npm init -y

---

2️⃣ Svelte + Vite 설치

npm create vite@latest frontend --template svelte
cd frontend
npm install

---

3️⃣ Electron 패키지 설치

cd ..
npm install electron electron-builder concurrently wait-on cross-env --save-dev

---

4️⃣ main.js (Electron 메인 프로세스)

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

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, "preload.js"),
    }
  });

  mainWindow.loadURL("http://localhost:5173"); // Vite 개발 서버 로드
});

---

5️⃣ package.json 실행 스크립트 추가

"scripts": {
  "start": "concurrently \"npm run dev --prefix frontend\" \"wait-on http://localhost:5173 && electron .\""
}

---

6️⃣ Svelte 컴포넌트에서 Electron API 사용

preload.js

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
  sendMessage: (message) => ipcRenderer.send("messageToMain", message)
});

Svelte 컴포넌트에서 API 호출

<script>
  import { onMount } from "svelte";

  onMount(() => {
    window.electronAPI.sendMessage("Svelte에서 보낸 메시지");
  });
</script>

<h1>Electron + Svelte</h1>

이제 Svelte에서도 Electron API를 사용할 수 있습니다.

---

Electron 애플리케이션 배포: electron-forge vs electron-builder

Electron 애플리케이션을 배포하려면 패키징 및 인스톨러 생성 도구가 필요합니다.
Electron에서 가장 많이 사용되는 배포 도구는 다음과 같습니다.

electron-forge → 간단한 설정과 다양한 플러그인을 제공하는 공식 도구
electron-builder → 고급 기능과 다양한 배포 옵션을 제공하는 강력한 도구

즉, electron-forge는 간편한 설정을 원할 때, electron-builder는 더 많은 기능이 필요할 때 사용하면 좋습니다!

---

1. electron-forge를 활용한 배포

electron-forge는 Electron 공식 배포 도구이며, 설정이 간편하고 여러 플랫폼을 지원합니다.

1️⃣ electron-forge 설치

npx electron-forge init my-electron-app
cd my-electron-app
npm install

프로젝트를 생성하고 필요한 패키지를 설치합니다. 

---

2️⃣ Electron 애플리케이션 실행

npm start

Electron 애플리케이션이 실행됩니다. 

---

3️⃣ Electron 애플리케이션 패키징

npm run make

이제 out/ 폴더에 배포 가능한 파일이 생성됩니다. 

---

4️⃣ Electron 애플리케이션 빌드 (Windows, Mac, Linux)

Windows

npm run make -- --platform win32

Mac

npm run make -- --platform darwin

Linux

npm run make -- --platform linux

이제 플랫폼별 실행 파일이 생성됩니다.

---

2. electron-builder를 활용한 배포

electron-builder는 더 많은 옵션과 강력한 배포 기능을 제공하는 Electron 배포 도구입니다.

1️⃣ electron-builder 설치

npm install electron-builder --save-dev

배포를 위한 electron-builder 패키지를 설치합니다.

---

2️⃣ package.json 설정 추가

"build": {
  "appId": "com.example.myapp",
  "productName": "MyElectronApp",
  "directories": {
    "output": "dist"
  },
  "files": [
    "dist/**/*",
    "main.js",
    "preload.js",
    "package.json"
  ],
  "win": {
    "target": "nsis",
    "icon": "assets/icon.ico"
  },
  "mac": {
    "target": "dmg",
    "icon": "assets/icon.icns"
  },
  "linux": {
    "target": "AppImage",
    "icon": "assets/icon.png"
  }
}

Windows, Mac, Linux용 빌드를 설정합니다.

---

3️⃣ Electron 애플리케이션 패키징

npm run build

이제 dist/ 폴더에 배포 가능한 실행 파일이 생성됩니다.

---

4️⃣ 플랫폼별 실행 파일 빌드

Windows

npm run build -- --win

Mac

npm run build -- --mac

Linux

npm run build -- --linux

이제 플랫폼별 .exe, .dmg, .AppImage 파일이 생성됩니다.

---

3. 자동 업데이트 설정 (electron-updater)

electron-builder를 사용하면 자동 업데이트 기능을 추가할 수 있습니다.

1️⃣ electron-updater 설치

npm install electron-updater

자동 업데이트 기능을 위한 패키지를 설치합니다. 

---

2️⃣ main.js에서 자동 업데이트 설정

const { app, BrowserWindow } = require("electron");
const { autoUpdater } = require("electron-updater");

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  mainWindow.loadURL("https://my-app.com");

  autoUpdater.checkForUpdatesAndNotify();
});

이제 애플리케이션 실행 시 자동으로 업데이트를 확인합니다. 

---

3️⃣ package.json에 업데이트 설정 추가

"build": {
  "publish": {
    "provider": "github",
    "owner": "username",
    "repo": "my-electron-app"
  }
}

GitHub Releases를 통해 자동 업데이트를 배포할 수 있습니다. 

---

4. 배포 후 실행 파일 업로드

Windows

npm run build -- --publish always

Mac

npm run build -- --mac --publish always

이제 GitHub에 실행 파일이 자동으로 업로드됩니다.