Electron이란?
Electron is a framework for building desktop applications using JavaScript, HTML, and CSS.
javascript, html, css로 데스크톱 앱을 만들 수 있는 프레임워크로, electron으로 제작한 어플리케이션의 실행 파일(executable file)에 Cromium(웹 브라우저 엔진)과 node.js(백엔드)가 포함되어 있어서 별도의 설치 과정 없이 바로 실행 가능한 실행 파일을 제작할 수 있습니다. 하나의 코드베이스로 Windows, macOS, Linux에서 모두 동일하게 동작하는 애플리케이션을 만들 수 있다는 장점이 있습니다.
chromium
구글이 개발한 오픈 소스 웹 브라우저 프로젝트로 렌더링 앤진으로는 Blink, Javascript 엔진으로는 V9로 구성되어 있습니다. 네트워킹과 멀티미디어 처리를 지원합니다. 단점으로는 메모리와 CPU를 많이 차지하여 리소스를 많이 소비한다는 단점이 있습니다.
Electron -vite는?
electron-vite is a build tool that aims to provide a faster and leaner development experience for Electron.
electron 을 위한 빠른 개발 툴이며 이 툴로 제작한 앱은 Vite를 사용하여 electron에 내장된 Chromium 브라우저에서 실행되는 웹 어플리메이션을 빌드하고 서비스합니다.
- 핫 리로딩 가능
- electron app을 빌드할 때 필요한 민감한 기본 설정 제공
- 메인 프로세스에서 사용되는 정적 자원에 대한 asset handling 제공
electron -vite가 제공하는 기능에 대한 문서: https://electron-vite.org/guide/features
electron-vite 로 설치하기 (quick start)
링크: https://electron-vite.org/guide/#scaffolding-your-first-electron-vite-project
npm create @quick-start/electron@latest
yarn create @quick-start/electron
pnpm create @quick-start/electron
설치시 아래와 같은 기능들이 추가적으로 덧붙여서 세팅됩니다.
ESLint + Prettier: 코드의 품질을 높이기 위해 린트와 스타일 설정이 되어 있음
Electron Toolkit: 개발을 돕기 위한 다양한 설정 제공
Electron Builder: 앱 패키징을 위해 사전 구성됨
Electron Updater: 자동 업데이트 기능 제공
clone template
설치되는듯한? template github link: https://github.com/alex8088/electron-vite-boilerplate
프로젝트 구조 - basic
├──src/
│ ├──main
│ ├──preload
│ └──renderer
├──electron.vite.config.js
└──package.json
러프하게 이해하자면, renderer는 react나 vue와 같이 UI 화면을 그리는 용도의 코드들이고, main과 preload는 electron app을 위한 코드입니다. main의 코드들은 electron 의 메인 프로세스 코드, preload는 main과 renderer 프로세스 사이에서 다리(bridge)역할을 합니다.
official
https://www.electronjs.org/docs/latest/
https://electron-vite.org/guide/
https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app
non official
https://blog.logrocket.com/build-electron-app-electron-vite/#why-need-electron-vite
