Skip to main content

Electron이란?

Electron은 JavaScript, HTML, CSS를 사용해 데스크톱 애플리케이션을 구축할 수 있는 프레임워크다. Chromium과 Node.js를 바이너리에 내장함으로써, Electron은 하나의 JavaScript 코드베이스를 유지하면서 Windows, macOS, Linux에서 동작하는 크로스 플랫폼 앱을 만들 수 있게 해준다. 네이티브 개발 경험이 없어도 가능하다.

시작하기​

Electron 앱을 개발하고 사용자에게 배포하는 과정을 단계별로 안내하는 [튜토리얼][]부터 시작하는 것을 추천한다. [예제][]와 [API 문서][]도 살펴보면서 새로운 기능을 발견하기에 좋은 자료다.

Electron Fiddle로 예제 실행하기​

Electron Fiddle은 Electron으로 작성된 샌드박스 앱으로, Electron 관리자들이 직접 지원한다. Electron API를 실험하거나 개발 중에 기능을 프로토타이핑할 때 학습 도구로 사용하기를 적극 권장한다.

Fiddle은 문서와도 잘 통합되어 있다. 튜토리얼의 예제를 살펴보면 코드 블록 아래에 "Open in Electron Fiddle" 버튼이 자주 보일 것이다. Fiddle이 설치되어 있다면 이 버튼을 클릭해 fiddle.electronjs.org 링크를 열면 예제가 자동으로 Fiddle에 로드된다. 복사 붙여넣기가 필요 없다.

docs/fiddles/quick-start (34.1.1)Open in Fiddle
const { app, BrowserWindow } = require('electron/main')
const path = require('node:path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  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()
  }
})

문서 구성​

공식 문서는 사이드바에서 모두 확인할 수 있다. 각 카테고리별로 어떤 내용을 다루는지 살펴보자:

  • 튜토리얼: 첫 번째 Electron 애플리케이션을 만들고 배포하는 방법을 단계별로 안내하는 종합 가이드.

  • Electron 프로세스: Electron 프로세스에 대한 심층 참고 자료와 이를 다루는 방법.

  • 모범 사례: Electron 앱 개발 시 유념해야 할 중요한 체크리스트.

  • 예제: Electron 앱에 기능을 추가하는 데 유용한 빠른 참고 자료.

  • 개발: 다양한 개발 가이드.

  • 배포: 최종 사용자에게 앱을 배포하는 방법을 배울 수 있다.

  • 테스트와 디버깅: JavaScript 디버깅 방법, 테스트 작성, 그리고 고품질 Electron 애플리케이션을 만드는 데 사용되는 도구들.

  • 참고 자료: Electron 프로젝트가 어떻게 작동하고 구성되어 있는지 더 잘 이해할 수 있는 유용한 링크.

  • 기여하기: Electron 컴파일과 기여는 어려울 수 있다. 이 섹션에서는 이를 더 쉽게 만들고자 한다.

도움 받기​

어려움을 겪고 있는가? 다음은 도움을 얻을 수 있는 몇 가지 링크다:

  • 앱 개발에 도움이 필요하다면, 커뮤니티 Discord 서버에서 다른 Electron 앱 개발자들의 조언을 구할 수 있다.
  • electron 패키지에 버그가 있다고 의심된다면, GitHub 이슈 트래커에서 기존 이슈를 확인해 보자. 해당 문제가 없다면, 버그 보고서 템플릿을 작성해 새 이슈를 제출하면 된다.