Electron, Vite, Vue, TypeScript를 사용한 데스크톱 애플리케이션 개발 가이드. 프로젝트 설정, 개발 모드, 프로덕션 빌드 및 통합 방법을 단계별로 설명한다.

서론

현대적인 웹 기술을 사용하여 데스크톱 애플리케이션을 개발하는 것은 개발자들에게 많은 이점을 제공한다.

Electron, Vite, Vue, TypeScript를 사용하여 데스크톱 애플리케이션을 개발하는 방법에 대해 알아보자.

각 기술의 역할과 통합 방법을 단계별로 알아보기

---

Electron이란 무엇인가?

Electron은 크로스 플랫폼 데스크톱 애플리케이션을 개발하기 위한 프레임워크이다. Chromium과 Node.js를 사용하여 웹 기술로 데스크톱 애플리케이션을 개발할 수 있다. Electron 애플리케이션은 메인 프로세스와 렌더러 프로세스로 나뉜다.

• Electron은 Chromium과 Node.js를 결합하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있게 한다.
• 메인 프로세스: Node.js 환경에서 실행되며, 애플리케이션의 백엔드 로직과 창 관리 등을 처리한다.
• 렌더러 프로세스: Chromium 기반의 웹 페이지를 렌더링하여 사용자 인터페이스(UI)를 표시한다.

Vite와 Vue의 역할

• Vite: Vite는 현대적인 빌드 도구로, 빠른 개발 서버와 최적화된 빌드를 제공한다. Vue 프로젝트를 생성하고, 개발 모드에서 핫 모듈 교체(HMR)를 지원하여 실시간 업데이트를 가능하게 한다.
• Vue: Vue는 사용자 인터페이스를 구축하기 위한 프론트엔드 프레임워크이다. 컴포넌트 기반 구조와 반응성 시스템을 통해 효율적인 UI 개발을 지원하다.
• TypeScript의 장점
  TypeScript는 자바스크립트의 상위 집합으로, 정적 타입 검사와 최신 ECMAScript 기능을 제공한다. 이를 통해 더 나은 코드 가독성과 유지보수성을 제공합니다.

---

빌드 및 패키징 과정

1. Vite로 빌드

• 렌더러 프로세스:
  • Vite는 Vue 컴포넌트와 관련된 모든 프론트엔드 자산(HTML, CSS, JavaScript)을 빌드한다.
  • 최적화된 번들링을 통해 Chromium이 렌더링할 수 있는 정적 파일들을 생성한다.
  • 결과물: dist 디렉토리에 저장되는 정적 파일들 (예: index.html, main.js 등).

2. Electron으로 패키징

• 메인 프로세스:
  • TypeScript로 작성된 Electron의 메인 프로세스 코드는 Node.js 환경에서 실행된다.
  • Electron Builder를 사용하여 애플리케이션을 패키징할 때, Vite가 빌드한 정적 파일들과 메인 프로세스의 코드를 결합한다.
  • 결과물: 설치 가능한 애플리케이션 파일 (예: .exe, .dmg, .AppImage 등).

프로젝트 설정

프로젝트 초기화

먼저 Vite와 Vue, TypeScript를 사용하여 프로젝트를 초기화한다.

yarn create @vitejs/app my-electron-app --template vue-ts
cd my-electron-app
yarn install
yarn add electron electron-builder @types/node --dev

Electron 설정

Electron의 메인 프로세스와 렌더러 프로세스를 설정한다.

• main.ts(main process)

import { app, BrowserWindow, ipcMain, dialog } from 'electron';
import * as path from 'path';
import * as fs from 'fs';
import * as dicomParser from 'dicom-parser';

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      enableRemoteModule: false,
    },
  });

  mainWindow.loadURL('http://localhost:3000');
}

app.on('ready', createWindow);

ipcMain.handle('open-file', async () => {
  const { canceled, filePaths } = await dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [{ name: 'DICOM Files', extensions: ['dcm'] }],
  });

  if (canceled) {
    return null;
  } else {
    const filePath = filePaths[0];
    const data = fs.readFileSync(filePath);
    const dicomData = dicomParser.parseDicom(data);
    return dicomData;
  }
});

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

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

• preload.ts

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electron', {
  openFile: () => ipcRenderer.invoke('open-file'),
});

Vue 설정

• src/App.vue

<template>
  <div id="app">
    <button @click="openFile">Open DICOM File</button>
    <div v-if="dicomData">
      <!-- DICOM 데이터를 화면에 표시 -->
      <pre>{{ dicomData }}</pre>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const dicomData = ref<string | null>(null);

    const openFile = async () => {
      const fileData = await (window as any).electron.openFile();
      dicomData.value = fileData;
    };

    return {
      dicomData,
      openFile,
    };
  },
});
</script>

Vite 설정

• vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
  },
});

개발 모드와 프로덕션 빌드

// 개발 서버 실행
yarn dev

// electron 실행
yarn electron