Electron

특징

이런 곳에 씁니다

• 코드 편집기와 개발 도구
• 메신저와 협업 도구의 데스크톱 앱
• 사내 업무용 데스크톱 프로그램
• 기존 웹 서비스를 데스크톱 앱으로 제공

설치하기

1. 1

   Node.js 준비

   Electron은 Node.js와 npm으로 설치하고 실행합니다. Node.js LTS 버전을 설치한 뒤 버전이 표시되는지 확인합니다.

   node -v && npm -v

   복사
2. 2

   프로젝트에 Electron 설치

   새 폴더에서 package.json을 만들고 electron을 개발 의존성으로 설치합니다. 그다음 package.json의 main 필드를 main.js로 정하고 start 스크립트에 electron .을 넣습니다.

   mkdir my-electron-app && cd my-electron-app && npm init -y && npm install --save-dev electron

   복사
3. 3

   Electron Forge로 시작하기

   패키징과 배포까지 갖춘 프로젝트를 원하면 공식 도구 Electron Forge의 생성 명령을 사용합니다. 만들어진 폴더에서 npm start로 앱을 실행합니다.

   npm init electron-app@latest my-app

   복사

첫 프로그램

첫 창 띄우기

main.js는 메인 프로세스의 시작점입니다. 앱이 준비되면 800×600 크기의 BrowserWindow를 만들고 같은 폴더의 index.html을 불러옵니다. macOS에서는 창을 모두 닫아도 앱이 남아 있는 관례를 따르므로, 다른 운영체제에서만 앱을 종료합니다. main.js 옆에 간단한 index.html을 두고 npm start로 실행합니다.

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

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  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()
})

npm init -y
npm install --save-dev electron
npm pkg set main=main.js scripts.start="electron ."
npm start

자주 쓰는 도구

Electron Forge

프로젝트 생성, 개발 실행, 패키징, 설치 파일 생성, 배포를 한 흐름으로 묶은 공식 도구입니다.

electron-builder

여러 플랫폼의 설치 파일 생성, 코드 서명, 자동 업데이트를 지원하는 널리 쓰이는 패키징 도구입니다.

Electron Fiddle

작은 Electron 예제를 바로 작성하고 여러 Electron 버전에서 실행해 볼 수 있는 공식 실험 도구입니다.

Playwright

Electron 앱을 실행해 창을 조작하고 메인 프로세스 코드를 평가하는 엔드 투 엔드 테스트를 작성할 수 있습니다.

공식 문서 · 참고 자료

• 공식Electron
• 공식Electron Documentation
• 공식Electron Forge
• 배우기Electron Tutorial
• 배우기Electron Fiddle
• 참고서BrowserWindow API
• 참고서Electron Security Checklist
• 커뮤니티electron/electron on GitHub

쓰는 언어

• TypeScriptTypeScript는 JavaScript에 정적 타입을 더한 언어로, 실행 전에 오류를 찾고 규모가 큰 코드를 안전하게 다루도록 돕습니다.
• JavaScriptJavaScript는 ECMAScript 표준을 따르는 동적 프로그래밍 언어로, 모든 웹 브라우저와 Node.js 같은 런타임에서 실행됩니다.