Electron + Vite + React 환경 세팅 살펴보기

• 나중에 Electron과 지금 공부하고 있는 Three.js를 엮어 작은 프로젝트를 해보면 좋겠다는 생각이 들었다.
• 마침 Vite를 사용했을 때, 만족으러운 개발 경험을 했기 때문에 Vite도 쓸 수 있나? 했는데 딱 쓰기 좋은 템플릿이 보였다.
• 간단하게 어떤 방법으로 환경을 간단히 구성할 수 있는지, 어떤 구성으로 되어있는지 살펴보기로. 

---

 

  서론에서 언급한대로, Electron과 Vite 환경을 쉽게 구성할 수 있나? 싶어 가볍게 살펴보았다. 몇 가지 방법이 있었는데 아래와 같다.

 

1. electron-forge의 vite 템플릿을 사용하기.

• Electron-forge는 OpenJS 재단에서 관리하고 있는 오픈소스 프로젝트이다.
• Electron으로 개발된 프로젝트의 패키징과 배포를 한 번에 처리할 수 있도록 하는 도구이다.
• 템플릿을 제공하며, 여기서 Vite를 선택함으로써 Electron + Vite 환경을 구축할 수 있다.

npm init electron-app@latest my-app -- --template=webpack

// 이후 Vite를 선택

 

 

2. electron-vite 템플릿 사용하기.

• Electron + Vite 환경을 구축할 수 있는 또다른 템플릿.
• Vite에서 큰 장점이라 여겼던 HMR 등의 다양한 기능을 지원한다.

npm i electron-vite -D

 

 

3. electron-vite-react 템플릿 사용하기.

• 위와 마찬가지로 Electron + Vite 환경을 구축할 수 있는 템플릿.
• 역시나 HMR 등의 기능을 제공한다.
• 차이점이라면 React와 Vue가 포함된 템플릿을 제공한다는 것.
• 처음엔 위 사이트랑 똑같은 곳인가? 했는데 다른 곳이었다.

 

  이래저래 꽤 많은 템플릿이 있었고 아예 그냥 처음부터 내가 직접 구성하는 방법도 있지만, 우선은 프로젝트 구조 등에 대해 파악하고 싶었기에 3번의 패키지를 선택해보았다.

 

 

electron-vite-react 시작해보기

  시작 방법은 공식의 설명을 그대로 따랐다. 몇 가지 방법이 존재하는데;

1. npm create 사용하기
2. Vite의 공식 create 명령어 사용하기
3. Git에서 레포지터리 클론해오기

// 1. npm create 사용하기
npm create electron-vite@latest

// 2. Vite 공식 명령어 사용하기
npm create vite@latest my-electron-vite-project

// 3. Git에서 클론해오기
git clone https://github.com/electron-vite/electron-vite-react.git

yarn
yarn run dev

 

  2번을 보아하니 Vite에서 공식적으로 지원하는 템플릿? 인 것 같았다. 나는 2번의 방법으로 진행했다.

 

  필요한 의존성을 설치해주고 실행해주면 아래와 같은 Electron 창이 나온다.

 

프로젝트 실행 시 등장하는 화면

 

이것저것 건드려본 + 살펴 본 후기

  아래는 기본적으로 추가되어있는 라이브러리나 프로젝트 구조 등을 살펴보며 느낀 개인적인 후기를 두서없이 적어낸 부분이다.

• HMR이 지원된다.
  • 전에 포스팅 했던 글에서 언급했지만, 전에 Electron을 사용해서 개발했을 때는 electron-reload 라는 라이브러리를 통해 직접 핫 리로딩을 추가했었다. 그마저도 TypeScript를 사용했어서 TS 컴파일을 한 번 진행하고 Electron을 빌드하는 방식이라 애로사항이 있었다.
  • 그런데 이건 그런 불편함이 없었다. 코드를 변경하고 저장하면 자연스레 화면이 갱신되고, React 단 코드가 아닌 Electron의 main 코드를 변경해도 바로 변경사항이 적용된 Electron 창이 뜬다. 이전에 경험했던 불편함이 크게 개선된 느낌이라 무척이나 편했다.
• 기본적으로 electron-builder가 추가되어있다.
• 빌드 시 dist / dist-electron의 두 폴더가 생긴다.
  • dist가 React, dist-electron이 Electron 빌드 폴더이다.
  • Electron 쪽에서는 dist 내 index.html을 Renderer 진입점으로 삼는 구조로 보인다.
• 테스팅 라이브러리로 PlayWright가 사용된다.
  • PlayWright는 들어본 적이 별로 없어서 알아봤는데, 마이크로소프트에서 개발한(정확히는 개발팀이 마이크로소프트로 들어갔다고 한다) E2E 테스팅 라이브러리라고.
  • 한편으로 Cypress랑 어떤 점이 다른가? 싶었는데 아무래도 '속도' 측면에서 Cypress에 비해 두각을 드러내는 라이브러리인 것 같았다.
    • Cypress는 유료 플랜에서만 병렬 처리를 지원하는데, PlayWright는 기본적으로 병렬 처리를 지원해서 속도 차이가 난다고.
• electron-updater가 추가되어있다.
  • Electron에 자동 업데이트 기능을 추가할 수 있음을 알고는 있었는데 해본 적이 없었었다. 배포나 다운로드 지원 등에 인증서나 서명이 필요하지 않나 싶었는데, 조금 찾아보니 서명이 필요하지 않을 수도 있겠다는 느낌이 들어서... 프로젝트를 구상하면서 배포 생각을 깊게 해보진 않았는데 깃허브와 연동해서 릴리즈 환경을 꾸려보는 것도 좋은 경험이 되겠다는 생각이 들었다.
• 전에는 React로 개발된 웹 프로젝트가 이미 존재하는 상태에서, 필요에 의해 Electron을 뒤늦게 추가하느라 React 프로젝트와 Electron이 별도의 프로젝트로 분리되어 있었다. 그래서인지 이렇게 Electron 내에 React가 아예 들어있는 방식은 처음 겪는 것 같다. 일단 템플릿을 좀 더 살펴보면서 어떤 방식으로 연결되어 있는지 파악을 해봐야할 것 같다.