[Electron + Vite + React + TypeScript] 프로젝트 시작하기

electron-vite

이번에 처음으로 데스크탑 애플리케이션을 구축할 수 있는 도구인 Electron을 사용하게 되었다. electron-vite를 사용하면, electron 프로젝트를 Vite로 빌드할 수 있다. 완전히 처음 접해보기 때문에 처음 프로젝트 시작하는 과정을 공식 문서에 따라 진행해보며 정리한 글이다. 참고로 이번 프로젝트는 제목과 같이 React, TypeScript을 기술스택으로 사용한다.

 

 

electron-vite 설치하기

npm i electron-vite -D

 

electron-vite를 설치하기 전에 Node.js 버전 18 이상, 20 이상 및 Vite 버전 4.0 이상이 필요하니 미리 설치해두자!

 

 

프로젝트 시작하기

npm create @quick-start/electron@latest

 

위 명령어를 입력하면, 프로젝트명을 세팅하고, 프레임워크를 선택할 수 있다. 방향키로 원하는 프레임워크를 선택하고 엔터를 클릭하면 된다.

 

 

이후 TypeScript 사용 여부를 설정할 수 있고, 몇가지 추가 설정을 한다.

Electron updater plugin은 Electron 애플리케이션의 자동 업데이트 기능을 제공하는 모듈이고, Electron download mirror proxy는 여기에서 네트워크 불안정성 문제를 해결하기 위해 설계된 옵션이라고 하는데, 설치에 문제가 없다면 무시해도 좋다고 한다.

 

 

모든 설정을 끝마치고 엔터를 누르면, 자동으로 현재 위치 기준 바로 하위에 프로젝트 이름으로 된 폴더가 생성되고, 위와 같이 npm install 명령어를 따라주면 된다.

 

 

실행 화면

 

npm run dev를 입력하면 이렇게 데스크탑 애플리케이션이 실행되는 모습을 확인할 수 있다.