# Electron

## 개요

**Electron**은 자바스크립트, HTML, CSS와 같은 웹 기술을 활용하여 **크로스플랫폼 데스크톱 애플리케이션**을 개발할 수 있도록 해주는 오픈소스 프레임워크입니다. 원래 GitHub에서 개발한 프로젝트로, 처음에는 Atom 텍스트 편집기를 만들기 위해 개발되었으나, 이후 전 세계적으로 수많은 데스크톱 앱 개발에 활용되며 널리 보급되었습니다. Electron은 **Chromium 렌더링 엔진**과 **Node.js 런타임**을 결합하여 웹 기술 기반의 앱이 시스템 수준의 기능(예: 파일 시스템 접근, 네이티브 메뉴, 시스템 트레이 등)을 사용할 수 있게 해줍니다.

Electron을 사용하면 개발자는 웹 애플리케이션을 개발하듯 데스크톱 앱을 만들 수 있어, 웹 개발 기술 스택을 가진 팀이 데스크톱 환경으로 쉽게 확장할 수 있습니다. 이로 인해 Microsoft Visual Studio Code, Slack, Discord, Figma, 그리고 GitHub Desktop과 같은 유명한 애플리케이션이 Electron 기반으로 제작되었습니다.

---

## 주요 특징

### 1. 크로스플랫폼 지원
Electron은 **Windows, macOS, Linux**를 모두 지원하며, 동일한 코드베이스로 각 플랫폼에 맞는 빌드를 생성할 수 있습니다. 이는 개발 효율성을 크게 높이고, 유지보수 비용을 줄입니다.

### 2. 웹 기술 기반
HTML, CSS, JavaScript를 사용해 UI와 로직을 구현하므로, 프론트엔드 개발자들이 쉽게 접근할 수 있습니다. React, Vue, Angular 등 현대 웹 프레임워크와도 원활하게 통합됩니다.

### 3. Node.js 통합
Electron 앱은 Node.js의 전역 객체(`require`, `process`, `__dirname` 등)에 접근할 수 있어, 파일 시스템 조작, 네트워크 요청, 프로세스 관리 등의 시스템 레벨 기능을 사용할 수 있습니다.

### 4. 두 가지 프로세스 아키텍처
Electron은 두 가지 유형의 프로세스로 구성됩니다:
- **Main Process**: 앱의 진입점이며, 윈도우 생성, 시스템 이벤트 처리 등을 담당합니다. Node.js 환경에서 실행됩니다.
- **Renderer Process**: 각 창(브라우저 윈도우) 내에서 웹 페이지를 렌더링하는 프로세스입니다. Chromium 기반으로 웹 콘텐츠를 실행합니다.

이 두 프로세스는 `ipcMain`과 `ipcRenderer` 모듈을 통해 안전하게 통신할 수 있습니다.

---

## 작동 원리

Electron은 내부적으로 다음과 같은 구성 요소를 사용합니다:
- **Chromium**: 웹 콘텐츠를 렌더링하고 HTML/CSS/JS를 실행합니다.
- **Node.js**: 시스템 API에 접근하고 백그라운드 로직을 처리합니다.
- **Electron 커스텀 API**: 데스크톱 앱 기능(메뉴, 다이얼로그, 트레이 아이콘 등)을 제공합니다.

앱 실행 시, Electron은 메인 프로세스를 시작하고, 이 프로세스가 하나 이상의 브라우저 창을 생성합니다. 각 창은 독립적인 렌더러 프로세스에서 웹 페이지를 로드하며, 웹 페이지는 일반 브라우저와 유사하게 작동하지만 Node.js 기능도 사용할 수 있습니다.

예를 들어, 아래 코드는 간단한 Electron 앱의 메인 프로세스 예제입니다:

```javascript
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
```

---

## 장점과 단점

| 항목 | 설명 |
|------|------|
| ✅ 장점 | - 웹 개발 기술을 재활용 가능<br>- 크로스플랫폼 지원<br>- 풍부한 생태계와 커뮤니티<br>- 시스템 통합이 용이 |
| ❌ 단점 | - 앱 크기가 큼 (Chromium 포함)<br>- 메모리 사용량이 높음<br>- 성능이 네이티브 앱보다 낮을 수 있음<br>- 보안 이슈 (Node.js 통합으로 인한 공격 면적 증가) |

특히 앱 크기 문제는 Electron 앱이 Chromium을 번들로 포함하기 때문에, 최소 100MB 이상의 설치 파일 크기를 가지는 경우가 많습니다. 이는 가볍고 빠른 앱을 요구하는 환경에서는 단점으로 작용할 수 있습니다.

---

## 보안 고려사항

Electron 앱은 웹 기술 기반에 Node.js 권한이 결합되므로, 보안 취약점에 노출되기 쉽습니다. 주요 보안 가이드라인은 다음과 같습니다:
- `nodeIntegration`을 반드시 `false`로 설정하고, `preload` 스크립트를 통해 제한적으로 기능을 노출
- 원격 콘텐츠 로딩을 최소화하고, CSP(Content Security Policy) 적용
- `contextIsolation` 활성화
- 사용자 입력에 대한 검증 및 이스케이프 처리

Electron 팀은 [Electron 보안 가이드](https://www.electronjs.org/docs/latest/tutorial/security)를 제공하며, 앱 배포 전 반드시 보안 점검을 권장합니다.

---

## 관련 도구 및 생태계

Electron 개발을 지원하는 다양한 도구들이 존재합니다:
- **Electron Forge**: 프로젝트 생성, 패키징, 배포 자동화 도구
- **Electron Builder**: 다양한 플랫폼용 설치 파일 생성
- **Spectron**: Electron 앱을 위한 E2E 테스트 프레임워크 (현재 유지보수 중단됨)
- **Vite + Electron**: 빠른 빌드를 위한 최신 개발 환경 구성

또한, TypeScript, ESLint, Prettier 등과의 통합도 잘 이루어져 있어, 대규모 프로젝트에서도 효과적으로 활용 가능합니다.

---

## 참고 자료

- [Electron 공식 문서](https://www.electronjs.org/)
- [Electron GitHub 저장소](https://github.com/electron/electron)
- [Electron 앱 보안 가이드](https://www.electronjs.org/docs/latest/tutorial/security)
- [Electron Forge 문서](https://www.electronforge.io/)

Electron은 웹 기술을 데스크톱 앱 개발에 활용하고자 하는 개발자들에게 강력한 도구이지만, 성능과 보안 측면에서 신중한 설계와 최적화가 필요합니다.