Electron을 이용한 데스크탑앱 개발 시작하기

Electron을 이용하여 데스크탑앱을 개발하는 시작단계를 소개합니다.

 

* 필수 설치 패키지

  - Node.js

Node.js의 설치는 다음 글을 참고하시기 바랍니다.

2022.03.08 - [Web/Node.js] - Node.js 설치

 

* 추천하는 설치 패키지 (이 글의 과정에서도 사용합니다)

  - visual studio code

visual studio code의 설치는 다음 글을 참고하시기 바랍니다.

2022.03.08 - [Windows] - Visual Studio Code 설치

 

이제 폴더를 하나 생성해줍니다.

저는 바탕화면 아래에 'my-electron-app' 폴더를 생성했습니다.

 

my-electron-app 폴더를 열고 목록 부분에 마우스 우클릭 후 "Code로 열기"를 선택합니다.

 

 

아래 화면과 같이 visual studio code가 열립니다.

'Yes, I trust the authors'를 선택해줍니다.

 

 

이제 electron app을 작성하기 위해 다음 목록에서와 같은 파일 3개를 작성하겠습니다.

- package.json

- main.js

- index.html

 

visual studio code의 좌측에서 3개의 파일을 아래 그림에서의 버튼을 눌러서 생성해줍니다.

 

3개의 파일을 생성하여 좌측 목록에서 확인됩니다.

 

이제는 각 파일의 내용을 작성해봅니다.

1. package.json

package.json파일은 app 동작에 필요한 라이브러리와 app의 실행명령을 저장하는 파일입니다.

{
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

2. main.js

main.js는 실행할 javascript코드를 저장하는 파일입니다. package.json의 내용 중에 main.js를 명시하는 부분이 있습니다.

const { app, BrowserWindow } = require("electron");

function createWindow() {
    const win = new BrowserWindow({});
    win.loadFile("index.html");
}

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

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

 

3. index.html

index.html은 main.js에서 사용하는 html문서 파일입니다. 확인을 위한 간단한 내용만을 저장해봅니다.

<h1>Hello</h1>

 

아래 그림은 main.js를 작성한 후의 화면입니다.

 

이제 상단의 메뉴에서 "New Terminal"을 실행합니다.

화면의 오른쪽 하단에 실행된 터미널에서 "npm install electron"를 입력하고 엔터키를 누릅니다.

electron을 다운로드하여 현재 폴더의 하위에 node_modules 폴더를 생성하여 저장합니다.

좌측화면에서 생성된 폴더를 확인할 수 있습니다.

 

이제 마지막 실행단계만이 남았습니다.

화면의 오른쪽 하단에 실행된 터미널에서 "npm run start"를 입력하고 엔터키를 누릅니다.

 

데스크탑 앱이 실행되었습니다.