Electron이란?

Electron이란?

Electron은 JavaScript, HTML, CSS를 사용하여 데스크톱 애플리케이션을 구축하기 위한 프레임워크입니다.
Electron은 Chromium 과 Node.js를 바이너리에 내장함으로써 하나의 JavaScript 코드베이스를 유지하고
Windows, macOS 및 Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있도록 해줍니다. 

→ 데스크탑 앱을 생성하는 라이브러리 (https://www.electronjs.org/)

일렉트론 아키텍쳐

• Backend: Node.js 런타임
• Frontend: Chromium 등

일렉트론 App의 구조

• Package.json
• index.html
• main.js

간단하게 Electron 실행하기

$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm i && npm start

• package.json 파일에 아래 내용을 추가

// package.json

{
  "name": 기존 설정한 이름,
  "version": "1.0.0",
  "description": 프로젝트 또는 앱 설명,
  "main": "main.js",
  "author": 사용자 이름,
  "license": "MIT"
}

// scripts 내용에 추가

{
  "scripts": {
    "start": "electron ."
  }
}

• 간단하게 살펴 보는 Electron 구조
  

Electron 도구

1. Electron Builder:
   Electron Builder는 Electron 애플리케이션을 빌드하고 패키징하는 데 사용되는 도구입니다. 이 도구를 사용하면 애플리케이션을 다양한 플랫폼 및 아키텍처에 대해 빌드하고 배포할 수 있습니다.
2. Electron Forge:
   Electron Forge는 Electron 애플리케이션의 프로젝트 구조를 생성하고 관리하는데 도움을 주는 도구입니다. 이를 통해 초기 프로젝트 설정, 뼈대 코드 생성, 애플리케이션 구조 관리 등을 쉽게 할 수 있습니다.
3. Electron DevTools:
   Electron DevTools는 Chrome DevTools를 기반으로 한 디버깅 및 개발 도구 세트로, Electron 애플리케이션을 개발하는 동안 사용됩니다. 개발자는 코드 디버깅, 성능 분석, 요소 검사 및 네트워크 분석과 같은 다양한 작업을 수행할 수 있습니다.