<참고 링크>

• pks2974님의 미디엄
• 개발자-톡님의 티스토리
• itinerant님의 티스토리

[ 일렉트론 ]

일렉트론이란 Node.js를 기반으로 JavaScript를 사용하여 데스크탑 App을 만드는 플랫폼입니다.

[ 개발 환경 ]

$ node -v
v18.12.1


$ npm -v
8.19.2


$yarn -v
1.22.19

[ 일렉트론 + 리액트 ]

Electron에서 화면을 그리기 위해서 📋.html파일 혹은 🖇️URL이 필요합니다.

아직 초보 개발자인 제가 일렉트론앱을 만들고 배포했을 때, 📋index.html 파일만 나오고 React가 적용이 안 되어 나오는 부분을 계속 찾아보았습니다.

[ 1. CRA 생성 ]

$ npm create-react-app [프로젝트명]

CRA 명령어를 통해 리액트앱 프로젝트를 생성해줍니다.

[ 2. electron-builder 설치 ]

• 개발자-톡님의 티스토리

상단 링크의 main.js를 사용했습니다.

$ yarn add electron-is-dev

isDev의 삼항 연산자를 통해
개발 중이라면 로컬:포트를, 그렇지 않다면 로컬 파일의 📋index.html을 사용해서 윈도우가 열리도록 설정되어있습니다.

npm install --save-dev electron-builder

electron을 빌드해서 배포할 수 있도록 다음 명령어를 입력해줍니다.

[ 3. 📋main.js 생성 ]

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

const path = require("path");
const isDev = require("electron-is-dev");

const remote = require("@electron/remote/main");
remote.initialize();

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
    },
  });

  win.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );

  remote.enable(win.webContents);
}

app.on("ready", createWindow);

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

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

[ 4. 📋package.json 수정 ]

[ 4-1. main / hompage 추가 ]

"main": "src/main.js",
"homepage": "./"

여기서 homepage를 넣어주셔야 배포 후 JS와 CSS를 로컬에서 가져와 사용할 수 있습니다.

[ 4-2. scripts 추가 ]

"build": "yarn react-build && electron-builder",
"start": "electron ."

스크립트에 빌드를 위한 두 명령어를 추가해줍니다.

기존 start와 build값이 편한 사람은 개인적으로 커스텀해줍니다.

[ 빌드 및 배포 ]

# 상단 json 설정을 기준으로 하겠습니다.
$ npm run build

React는 Build시 완성된 📋.html, 📋.css, 📋.js를 생성합니다.

이때, build명령어 실행 시 빌드되는 파일들은 📁public 폴더에 존재하는 파일들이 빌드됩니다.

[ Error ]

빌드를 하면 계속 빌드 후에 📁build 폴더에 📋electron.js 파일이 존재하지 않다고 오류가 났습니다.

Application entry file "build\electron.js" in the 폴더
엄청 길게 나오는데 build한 📁build폴더에 electron.js가 없다고 나옵니다.

📋main.js를 📋electron.js로 작성하시는 분들이 계시길래,
build가 됐을 때, 📁build 폴더에 해당 📋electron.js도 같이 build시키기 위해 📁src폴더에 있던 📋main.js를 📁public폴더로 옮겨 build시켜서 배포했더니 성공했습니다.

그 후, 해당 폴더로 들어가 배포된 ⚙️.exe 파일을 실행시켜주시면

일렉트론이 정상적으로 작동하는 것을 확인할 수 있습니다.