:: Dev/Node.js

Electron 시작하기 - 01 - 천 줄 코드도 Hello, World! 부터.

jETA 2022. 3. 10. 10:30
반응형

Electron은 Node.js 개발자에겐 정말 강력한 무기입니다.

웹 사이트를 구성하던 기술 그대로 Desktop Application을 만들 수 있게 해주기 때문이죠.

 

이미 Electron은 충분히 알려져있기 때문에 공식 사이트에 있는 글로 소개를 갈음합니다.

 

Electron?​

Electron은 JavaScript와 HTML, CSS를 이용해 Desktop Application을 제작할 수 있는 프레임워크입니다. Chromium과 Node.js를 바이너리에 내장하여, Electron은 하나의 JavaScript 코드로 Windows와 macOS, Linux에서 모두 작동할 수 있는 크로스 플랫폼 App을 만들 수 있도록 도와줍니다. Native app 개발 경험이 필요하지 않죠.

Intoroduction | Electron

 

Electron 개발 준비

Electron 개발을 위해선 특별한 준비가 필요하진 않습니다.

각자 원하는 에디터를 사용할 수 있고, 특정 OS를 사용할 필요도 없죠.

 

단, Node.js 기반이기 때문에 최신 LTS 이상의 Node.js는 설치가 필요합니다.

Node.js가 설치되어 있지 않다면 이 링크를 통해 다운로드 및 설치를 진행하세요.

 

패키지 초기화

먼저 적당한 이름(start-electron)의 빈 디렉토리를 생성하고, 아래 명령어를 실행하여 패키지를 초기화 합니다.

npm init

 

여러 질문이 나오는데 대부분 기본값을 그대로 사용하셔도 됩니다.

단, entry point는 관습적으로 main.js를 사용합니다.

 

entry point: (index.js) 다음에 입력한 흔적이 보입니다.

 

초기 설정이 완료된 후 아래 명령어로 Electron 의존성을 추가합니다.

npm i --save-dev electron

시간이 조금 소요될 수 있습니다.

 

설치가 완료되면 마지막으로 package.json 파일을 아래와 같이 수정합니다.

{
  "name": "start-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^17.1.1"
  }
}

7번째 줄에 start 스크립트를 추가하였습니다.

나머지 부분은 본 문서와 다르더라도 크게 상관 없습니다.

 

Hello, World!

이제 실제로 실행을 위한 3개의 파일을 생성합니다.

모두 생성한 후 디렉토리 구조는 아래와 같습니다.

 

main.js

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

const createWindow = () => {
    const win = new BrowserWindow({
        width: 640,
        height: 480,
        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();
});

5번째 줄~9번째 줄: 창을 정의합니다.

8번째 줄: 페이지가 표시되기 전에 실행할 전처리 코드를 지정합니다. 스크립트는 반드시 절대 경로로 전달되어야 합니다.

11번째 줄: 창에서 불러들일 HTML 문서를 지정합니다.

14번째 줄: Application이 준비된 후 실행할 스크립트를 지정합니다.

 

preload.js

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector)
        if (element) element.innerText = text
    }

    for (const type of ['chrome', 'node', 'electron']) {
        replaceText(`${type}-version`, process.versions[type]);
    }
});

자세히 볼 필요는 없습니다.

전처리 코드를 넣을 수 있다는 것을 보이기 위한 예제입니다.

 

 

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, World!</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>
            It's using Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span> and Electron <span id="electron-version"></span>.
        </p>
    </body>
</html>

 

 

실행

터미널에 아래 명령어를 입력하면 App이 실행됩니다.

npm start

Hello, World!도, 전처리 코드도 모두 잘 실행되었습니다.

 

참고 문서

 

 

 

반응형
저작자표시 비영리 동일조건