Skip to content

Electron

If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

Category

Libraries

Projects

  • Github - surfbird: A Microblogging client built on Electron and Vue
  • fbs - Electron의 가벼운 대체제

Update server

Depending on your needs, you can choose from one of these:

  • Hazel - Vercel에서 무료로 배포할 수 있는 비공개 또는 오픈 소스 앱용 업데이트 서버입니다. GitHub 릴리스에서 가져오고 GitHub의 CDN 기능을 활용합니다.
  • Nuts - GitHub 릴리스도 사용하지만 앱 업데이트를 디스크에 캐시하고 개인 리포지토리를 지원합니다.
  • electron-release-server - 릴리스를 처리하기 위한 대시보드를 제공하며 릴리스가 GitHub에서 시작되지 않아도 됩니다.
  • Nucleus - Atlassian에서 관리하는 Electron 앱을 위한 완전한 업데이트 서버입니다. 여러 애플리케이션 및 채널을 지원합니다. 정적 파일 저장소를 사용하여 서버 비용을 최소화합니다.

Quick start

const electron = require('electron')
// 애플리케이션 생명주기를 조작 하는 모듈.
const {app} = electron
// 네이티브 브라우저 창을 만드는 모듈.
const {BrowserWindow} = electron

// 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면
// 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다.
let win

function createWindow () {
  // 새로운 브라우저 창을 생성합니다.
  win = new BrowserWindow({width: 800, height: 600})

  // 그리고 현재 디렉터리의 index.html을 로드합니다.
  win.loadURL(`file://${__dirname}/out/index.html`)

  // 개발자 도구를 엽니다.
  win.webContents.openDevTools()

  // 창이 닫히면 호출됩니다.
  win.on('closed', () => {
    // 윈도우 객체의 참조를 삭제합니다. 보통 멀티 윈도우 지원을 위해
    // 윈도우 객체를 배열에 저장하는 경우가 있는데 이 경우
    // 해당하는 모든 윈도우 객체의 참조를 삭제해 주어야 합니다.
    win = null
  })
}

// 이 메서드는 Electron의 초기화가 끝나면 실행되며 브라우저
// 윈도우를 생성할 수 있습니다. 몇몇 API는 이 이벤트 이후에만
// 사용할 수 있습니다.
app.on('ready', createWindow)

// 모든 창이 닫히면 애플리케이션 종료.
app.on('window-all-closed', () => {
  // macOS의 대부분의 애플리케이션은 유저가 Cmd + Q 커맨드로 확실하게
  // 종료하기 전까지 메뉴바에 남아 계속 실행됩니다.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // macOS에선 보통 독 아이콘이 클릭되고 나서도
  // 열린 윈도우가 없으면, 새로운 윈도우를 다시 만듭니다.
  if (win === null) {
    createWindow()
  }
})

// 이 파일엔 제작할 애플리케이션에 특화된 메인 프로세스 코드를
// 포함할 수 있습니다. 또한 파일을 분리하여 require하는 방법으로
// 코드를 작성할 수도 있습니다.

See also

Favorite site

Guide

Deploy guide