Electron 설치

Building your First App | Electron

This guide will step you through the process of creating a barebones Hello World app in Electron, similar to electron/electron-quick-start.


npm install electron --save-dev

첫 번째 앱 빌드하기 (Building your First App)

프로젝트 설정하기

WSL 사용 금지

윈도우를 사용 중이라면 WSL(Windows Subsystem for Linux)을 사용하지 말것.

그렇지 않으면 애플리케이션을 실행할 때 문제가 발생할 수 있음.

npm 프로젝트 초기화

Electron 앱은 npm을 사용해 설정하며, package.json 파일이 진입점 역할을 함.

새로운 폴더를 생성하고 그 안에서 npm init 명령어로 npm 패키지를 초기화


mkdir my-electron-app && cd my-electron-app
npm init

이 명령어는 package.json 파일의 일부 필드를 설정하도록 요구

진입점(entry point)은 main.js로 설정해야 합니다.

저자(author), 라이선스(license), 설명(description)은 아무 값으로나 설정해도 되지만, 이후 패키징 단계에서 필요함

그런 다음, Electron을 devDependencies으로 설치.

(프로덕션에서는 필요하지 않은 개발 전용 패키지들을 포함)


npm install electron --save-dev

package.json 파일은 다음과 같은 형태가 됨


{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "23.1.3"
  }
}

.gitignore 추가하기

.gitignore 파일은 Git이 추적하지 않을 파일 및 디렉토리를 지정

GitHub의 Node.js .gitignore 템플릿을 프로젝트의 루트 폴더에 추가하여 node_modules 폴더를 Git에 커밋하지 않도록 함

Electron 앱 실행하기

package.json 파일의 main 스크립트는 Electron 애플리케이션의 진입점임.

이 스크립트는 Node.js 환경에서 실행되며, 애플리케이션의 생명주기 관리, 네이티브 인터페이스 표시, 특권 작업 수행 및 렌더러 프로세스 관리 등을 담당함

main.js 파일을 프로젝트의 루트 폴더에 생성하고 다음과 같이 코드를 작성


console.log('Hello from Electron 👋')

package.json의 scripts 필드에 start 명령어를 추가하여 이 스크립트를 실행


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

터미널에서 npm run start 명령어를 실행하면 "Hello from Electron 👋"이 출력됨

웹 페이지를 BrowserWindow에 로드하기

이제 index.html 파일을 만들어 간단한 웹 페이지를 작성


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
  </body>
</html>

main.js 파일에서 이 HTML 파일을 Electron의 BrowserWindow에 로드


javascript코드 복사
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

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

이제 npm run start를 실행하면 "Hello from Electron renderer!"라는 메시지가 담긴 창이 열리게 됨

애플리케이션 창 관리

운영 체제마다 애플리케이션 창의 동작이 다름을 주의해야 함.

예를 들어, Windows와 Linux에서는 모든 창을 닫으면 애플리케이션이 종료되지만, macOS에서는 그렇지 않음.

이를 관리하기 위해 app과 BrowserWindow 모듈에서 발생하는 이벤트를 사용하여 창 관리 코드를 작성할 수 있음

Windows 및 Linux: 모든 창을 닫으면 앱을 종료


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

macOS: 열려 있지 않은 경우 창 열기

macOS 앱은 일반적으로 창이 열리지 않아도 계속 실행됨. 때문에, activate되면 만들도록


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

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