일렉트론 시작하기

일렉트론을 이용하면 자바스크립트로 데스크탑 앱까지도 구현할 수 있다.

방법도 너무 쉬우니 하나하나 따라해보자.

 

크게 두 부분으로 나뉜다.

가. 개발 단계에서 앱으로 실행 되게끔 만드는 방법

나. 사용자가 설치하고 실행할 수 있는 앱으로 빌드하는 방법

 

 

개발 단계에서 앱으로 실행 되게끔 만드는 방법

 

첫 번째는 일렉트론 공식 매뉴얼을 보면 잘 나와있다.

https://www.electronjs.org/docs/tutorial/first-app

이하는 공식 매뉴얼의 내용을 축약했을 뿐이다.

 

1. 프로젝트 폴더를 만든다.

 

2. 프로젝트 폴더 위치에서 터머널에 npm init을 입력해 package.json 파일을 생성한다.

 

3. package.json에 다음을 추가한다.

 

{

    /* ... */

    "main": "main.js"

}

 

main.js로 설정하지 않으면 기본적으로 index.js를 이용한다.

 

4. 명령어를 위한 스크립트를 추가한다.

 

{

    /* ... */

    "main": "main.js",

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

}

 

5. 다음을 터미널에 입력해서 일렉트론을 설치한다.

npm install --save-dev electron

 

6. main.js 파일을 생성해서 다음의 내용을 입력한다.

 

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

function createWindow () {
  const win = new BrowserWindow({ // 브라우저 창을 생성한다.
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html') // index.html 파일을 불러온다.
}

app.whenReady().then(createWindow);

 

7. 터미널에 npm start를 입력해 앱을 실행한다.

 

그밖에도 Quick Start Guid를 참고하면 자세한 내용을 알지 못하더라도 손쉽게 일렉트론 개발 설정을 할 수 있다.

www.electronjs.org/docs/tutorial/quick-start#quick-start-guide

Quick Start Guide | Electron

예제가 되는 코드도 참고하자.

github.com/electron/electron-quick-start

github.com/electron/electron-api-demos

 

 

사용자가 설치하고 실행할 수 있는 앱으로 빌드하는 방법

 

개발 환경에서만 성공하면 의미가 없다.

실제 앱으로 구현이 돼야 한다.

electron-forge나 electron-builder를 사용하자.

마찬가지로 매뉴얼에 아주 잘 나와있다.

www.electronforge.io/

www.electron.build/

 

이하는 electron-builder를 사용하는 방법을 적어놓았다.

 

1. 먼저 일렉트론 빌더를 설치한다.

yarn add electron-builder --dev

 

2. package.json에 다음을 추가한다.

 

"build": {

    "appId": "your.id",

    "mac": {

        "category": "your.app.category.type"

    }

}

 

3. package.json의 scripts 속성에 아래의 pack과 dist를 더 추가한다.

 

"scripts": {

    /* ... */

    "pack": "electron-builder --dir"

}

 

4. 이제 scripts에 등록한 명령어 중 하나를 입력하면 앱을 빌드할 수 있다.

 

yarn pack

실행할 수 있는 앱 파일이 생성된다.

 

아이콘을 변경한다든지 등의 세부 설정을 원한다면 위에서 언급한 링크를 참고하자.