Electron으로 새 프로젝트를 시작했어요!

새로운 프로젝트를 시작했습니다! 이번에는 데스크탑 앱으로 작업물을 하나 만들어볼 계획이에요. 프로젝트 세팅은 Electron, Vite, React로 진행하려고 합니다. 원래는 Next.js를 사용하고 싶었지만, 현재 물리적으로 시간이 부족해서 우선 Vite로 간단하게 시작하려고 해요. 이렇게 글에 올려두면 프로젝트가 굴러가게 되겠죠?

Electron, Vite, React 세팅하는 방법

1. 새 프로젝트 디렉토리 생성 및 초기화

   mkdir my-desktop-app
   cd my-desktop-app
   npm init -y

2. 필수 패키지 설치

   Vite, React, Electron 관련 패키지를 설치하면 돼요.

   npm install vite react react-dom electron
   npm install -D electron-builder @types/react @types/react-dom

3. 프로젝트 구조 설정

   프로젝트 폴더 구조는 아래와 같이 설정하면 돼요.

   my-desktop-app/
   ├── public/            # 정적 파일
   ├── src/               # React 소스코드
   │   └── main/        # Electron 메인 프로세스 코드
   └── package.json      # 프로젝트 설정 파일

4. Electron 메인 프로세스 코드 작성

   const { app, BrowserWindow } = require('electron');
   const path = require('path');
   
   let mainWindow;
   
   app.on('ready', () => {
       mainWindow = new BrowserWindow({
           width: 800,
           height: 600,
           webPreferences: {
               preload: path.join(__dirname, 'preload.js'),
           },
       });
   
       mainWindow.loadURL('http://localhost:3000'); // Vite 개발 서버
   });
   
   app.on('window-all-closed', () => {
       if (process.platform !== 'darwin') app.quit();
   });

5. Vite 설정 파일 작성

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
       plugins: [react()],
       build: {
           rollupOptions: {
               external: ['electron'],
           },
       },
   });

6. Electron 빌더 설정

   "main": "src/main/main.js",
   "scripts": {
       "start": "vite",
       "electron": "electron .",
       "build": "vite build && electron-builder"
   },
   "build": {
       "appId": "com.my-desktop-app.app",
       "files": [
           "dist/**",
           "src/main/**"
       ],
       "directories": {
           "output": "build"
       }
   }

7. React 초기화

   src/main.jsx 파일을 생성하고 React 앱을 초기화합시당

   import React from 'react';
   import ReactDOM from 'react-dom';
   import './index.css';
   
   const App = () => <h1>Hello, Electron + React!</h1>;
   
   ReactDOM.render(<App />, document.getElementById('root'));

8. 개발 및 빌드 실행

   개발 중에는 Vite 서버와 Electron을 동시에 실행해야 해요!

   npm run start   # Vite 서버 실행
   npm run electron # Electron 실행

   배포 빌드는 다음 명령어로 실행해요.

   npm run build

이제 Electron, Vite, React로 데스크탑 앱 개발을 시작할 준비가 되었습니다. 조금씩 꾸준히 해보겠습니당~!