Electron + Vite (+ React) 사용하기

  • 에 업로드
  • 읽는 데 약 2~3분 정도 걸려요

electron-vite

Electron과 Vite를 함께 사용하는 방법을 검색하였을 때 첫 번째로 나온 electron-vite를 먼저 사용해보았다.

먼저 공식 문서에 나와있는 방법대로 설치를 진행해보았다. 아래 명령어를 입력하여 새 프로젝트를 생성해주었다.

npm create @quick-start/electron
// 또는
pnpm create @quick-start/electron

해당 명령어 입력 후 표시되는 절차에 따라 진행하면 된다. 현재 지원되는 프레임워크는 TypeScript 지원(선택)까지 포함하여 vanilla, vue, react, svelte, solid이다.

하지만 간단한 사이드 프로젝트에는 상당히 부담스럽게 다가온 초기 제공 파일들 때문에 다음 방법을 사용하기로 하였다.

Electron Forge

Electron Forge는 Electron 프로그램 패키지 및 배포를 위한 툴이다.

새 프로젝트를 생성하기 위해 다음 명령어를 입력하였다.

npm init electron-app@latest my-app -- --template=vite
// 또는
pnpm create electron-app@latest my-app --template=vite

이때 my-app을 자신이 원하는 프로젝트명으로 바꾸어 주어도 된다.

📌 알아두기

TypeScript를 사용하고 싶다면 뒤의 --template=vite를 --template=vite-typescript로 바꾸어주면 된다.

설치가 완료된 후 Electron 프로그램을 실행하고 싶다면 다음 명령어를 입력해주면 된다.

npm run start
// 또는
pnpm run start

코드 변경 후 재시작

Electron 실행 후 터미널에 rs를 입력하면 된다.

터미털에서 `rs`를 입력한 모습

React와 같이 사용하기

먼저 React 관련 패키지를 설치해주어야 한다.

npm install --save react react-dom
// 또는
pnpm add react react-dom

📌 알아두기

TypeScript 사용 시 다음 명령어도 추가로 입력해주어야 한다.

npm install --save-dev @types/react @types/react-dom
// 또는
pnpm add -D @types/react @types/react-dom

패키지를 설치해주었다면 관련 파일들을 추가로 생성해주어야 한다.

JavaScript 사용 시

/src/renderer.js 파일명을 /src/renderer.jsx로 변경해준 뒤 그 내용을 다음과 같이 변경하여 준다.

// /src/renderer.jsx
import * as React from 'react'
import { createRoot } from 'react-dom/client'

const root = createRoot(document.getElementById('root'))
root.render(<h2>Hello from React!</h2>)

그 후 /index.html 파일의 body를 다음과 같이 변경해준다.

<!doctype html>
<html>
  <head>
    <!-- 생략 -->
  </head>
  <body>
    <!-- 이 두 줄 -->
    <div id="root" />
    <script
      type="module"
      src="/src/renderer"
    ></script>
  </body>
</html>

TypeScript 사용 시

/src/renderer.ts 파일명을 /src/renderer.tsx로 변경해준 뒤 그 내용을 다음과 같이 변경해 준다.

// /src/renderer.tsx
import { createRoot } from 'react-dom/client'

const root = createRoot(document.getElementById('root') as HTMLDivElement)
root.render(<h2>Hello from React!</h2>)

그 후 /index.html 파일의 body를 다음과 같이 변경해준다.

<!doctype html>
<html>
  <head>
    <!-- 생략 -->
  </head>
  <body>
    <!-- 이 두 줄 -->
    <div id="root" />
    <script
      type="module"
      src="/src/renderer"
    ></script>
  </body>
</html>

다른 글도 읽어보세요

전체 글 보기

  1. Linux에서 Firefox Developer Edition 설치하기

    Firefox Developer Edition을 설치하는 두 가지 방법, apt를 통해 설치하는 방법과 압축 파일 자체로 설치하는 방법을 알아봅니다.

    #컴퓨터

  2. TypeScript에서 as const와 타입 체킹 동시에 사용하기

    as const를 이용하는 동시에 satisfies 키워드를 통해 타입 체킹을 하는 방법에 대해 알아봅니다.

    #프로그래밍

  3. 다차원 Array의 아이템 교체하기

    여러 개의 Array가 네스팅되어 있는 Array의 아이템을 안전하게 교체하는 방법에 대해 알아봅니다. Array.fill 메소드를 통해 채운 Array를 수정할 때 발생하는 문제점에 대해 알아보고, 더 나은 방법을 탐색해봅니다.

    #프로그래밍

  4. ESLint, Stylelint, Prettier로 코드 정리하기

    JavaScript, CSS 및 기타 파일들의 포맷의 일관성을 지키기 위해 Lint와 Formatter를 이용하는 방법에 대해 알아봅니다.

    #프로그래밍