Electron 프로젝트 마이그레이션 가이드 - Create React App에서 Vite

마이그레이션 가이드: Create React App에서 Vite로

이 문서는 React 프로젝트의 빌드 시스템을 Create React App(CRA)에서 Vite로 마이그레이션하는 과정을 설명합니다. 이 마이그레이션은 프로젝트의 빌드 속도를 개선하고, 경로 설정을 보다 쉽게 관리할 수 있도록 하기 위해 수행됩니다.

Vite로의 마이그레이션 배경

• 빌드 속도 개선: Vite는 모던 브라우저의 ES 모듈을 활용하여 빠른 콜드 스타트와 HMR을 제공합니다.
• 경로 설정 용이성: Vite는 tsconfig.json과 유사한 방식으로 경로 별칭을 설정할 수 있으며, 이는 개발자에게 보다 직관적인 경험을 제공합니다.

Vite 프로젝트 설정

0. 기존의 CRA 제거

기존 CRA 프로젝트에서 Vite로 전환하기 전에, CRA와 관련된 의존성을 제거해야 합니다. 이는 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 수행할 수 있습니다.

yarn remove react-scripts

1. Vite 및 관련 플러그인 설치

Vite와 Vite를 위한 React 플러그인을 설치합니다.

yarn add vite @vitejs/plugin-react --dev

2. Vite 설정 파일 생성

프로젝트 루트에 vite.config.ts 파일을 생성하고, 다음 내용을 추가합니다. 이 설정 파일은 Vite가 프로젝트를 어떻게 처리할지 정의합니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      "@common": path.resolve(__dirname, "src/common/"),
      "@main": path.resolve(__dirname, "src/main/"),
      "@render": path.resolve(__dirname, "src/render/"),
    },
  },
});

이 설정은 src/common, src/main, src/render에 대한 경로 별칭을 정의합니다.

Electron 프로젝트 구동 설정

Electron 애플리케이션과 React 프론트엔드를 함께 개발하는 경우, 개발 환경 설정은 다음과 같습니다.

package.json 설정

package.json 파일에는 프로젝트 메타데이터와 스크립트가 정의되어 있습니다. Electron과 React의 빌드 및 개발 스크립트를 다음과 같이 설정합니다.

"scripts": {
  "build": "tsc && vite build",
  "build:electron": "tsc",
  "build:react": "vite build",
  "dev": "concurrently \"yarn dev:react\" \"yarn dev:electron\"",
  "dev:react": "vite",
  "dev:electron": "electron ."
},

이 설정을 통해, React 애플리케이션과 Electron 메인 프로세스를 동시에 개발 모드로 실행할 수 있습니다. concurrently는 여러 명령을 병렬로 실행할 때 사용됩니다.

결론

이 가이드는 Create React App에서 Vite로 마이그레이션하는 과정을 간략하게 설명합니다. Vite는 개발 경험을 개선하고 프로젝트의 빌드 시간을 단축시키는 현대적인 빌드 도구입니다. Electron과 함께 사용하는 경우, 프로젝트의 구조와 빌드 프로세스를 적절히 조정하여 효율적인 개발 환경을 구성할 수 있습니다.