티스토리 뷰

헉!!/ETC

[Electron] 시작하기

권태성 2024. 7. 20. 23:48
728x90

사내에서 필요한 도구를 Chrome Extension으로 만들어봤었는데 Desktop Application 형태로 만들려면 어떤 도구가 적합할까 생각하다가 찾았던 Electron.

notion에 메모했던 내용을 블로그로 옮겨본다.

 

 

기본적으로 npm 설치가 선행되어야함

 

프로젝트 시작하기

1. 적당한 경로에 작업 폴더를 생성

2. 작업 폴더에서 npm init 명령어 실행

3. 명령어 실행 후 설정 값들을 입력할 때 다른 값들은 기본 값을 사용하되 entry point는 main.js로 입력

  • Electron Application에서 main.js를 entry point로 사용하는 것은 많은 튜토리얼에서 사용하는 관습
  • Electron Application은 두 가지 주요 프로세스로 구성됨 (Main / Renderer Process)
  • main.js는 일반적으로 메인 프로세스의 진입점 (Entry Point) 파일로 사용되며, Application이 시작될 때 실행되는 첫 번째 스크립트

아래 내용을 참조하여 npm init을 실행

taeseong@taeseongui-MacBookPro electron % mkdir start-electron
taeseong@taeseongui-MacBookPro electron % cd start-electron
taeseong@taeseongui-MacBookPro start-electron % npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (start-electron)
version: (1.0.0)
description:
entry point: (index.js) main.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/taeseong/electron/start-electron/package.json:

{
  "name": "start-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)
npm notice
npm notice New minor version of npm available! 8.3.1 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g npm@8.19.2 to update!
npm notice

 

위와 같이 초기 설정이 완료되면 electron 의존성 주입

 

taeseong@taeseongui-MacBookPro start-electron % npm i --save-dev electron

added 77 packages, and audited 78 packages in 20s

10 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

 

설치가 완료되면 package.json 파일을 아래와 같이 수정

{
   "name": "start-electron",
   "version": "1.0.0",
   "description": "",
   "main": "main.js",
   "scripts": {
     "start": "electron ." //수정된 라인
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "electron": "^21.0.1"
   }
}

 

위 기본 설정 과정이 완료되면 Electron에서 사용될 파일 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();
});

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>

 

코드 작성이 끝나면 터미널에서 npm start를 입력하면 Electron Application이 실행된다.

 

 

 

 

 

 

 

728x90

'헉!! > ETC' 카테고리의 다른 글

[React] CSS  (0) 2024.07.21
[React] JSX  (0) 2024.07.21
Selenium에서 Playwright로 전환해보니..  (0) 2024.07.20
Amazon Linux 2023 서버 타임존을 서울로 변경  (0) 2024.06.16
Amazon Linux 2023에 JDK 8 설치하기  (0) 2024.06.16