최신버전으로 React + Typescript + Electron 개발하기

 

 

안녕하세요?

 

예전에는 React를 그냥 Javascipt로 개발했지만 최근에는 점점 더 Typescript가 대세가 되고 있습니다.

 

그래서 개인적으로 Electron 앱을 취미로 개발하고 있는데 React와 Typescript를 적용해서 개발하려고 합니다.

 

그런데 React + Typescript + Electron 이 함께 적용된 보일러플레이트(boilerplate)가 전부 옛날 버전의 React와 옛날 버전의 ElectronJS를 사용하더라고요.

 

그래서 구글링 좀 열심히 해서 백지상태에서 최신 버전으로 React + Typescript + Electron 보일러 플레이트(boilerplate)를 만들어 봤습니다.

 

React App 설치

일단 npm 또는 yarn이 설치되어 있다는 전제하에 진행하겠습니다.

 

먼저 React 앱을 create-react-app으로 typescipt template로 만들어야 합니다.

 

npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript

cd my-app

위와 같이 실행하면 my-app 폴더에 React앱이 Typescript 템플릿으로 작성되게 됩니다.

 

ElectronJS 설치

이제 위에서 설치한 React 앱에 들어가서 그 위에 ElectronJS를 설치하겠습니다.

 

먼저, 다음과 같이 관련 패키지를 설치 바랍니다.

npm install --save-dev electron electron-builder concurrently wait-on cross-env

# or

yarn add --dev electron electron-builder concurrently wait-on cross-env

각 패키지의 설명입니다.

 

• electron : Electron 기본 패키지입니다.

• electron-builder : electron을 실행파일 형태로 빌드해줍니다.

• concurrently : 두 개 이상의 명령어를 실행할 수 있게 해 줍니다.

• wait-on : 특정 파일(포트)이 활성화될 때까지 대기해 줍니다.

• cross-env : 윈도즈 환경이든 맥, 리눅스 환경이든 시스템에 관계없이 환경변수 값을 설정할 수 있게 해 줍니다.

그리고 React Hot Reloading을 위해 추가로 아래의 패키지를 설치해 줍니다.

npm install --save electron-is-dev

# or

yarn add electron-is-dev

electron-is-dev 패키지는 현재 electron이 로드된 상태가 development상태인지 production 상태인지 구분해서 React Hot Reloading을 위한 electron loadURL 경로를 바꿔 주는 역할을 합니다.

 

electron.js 파일 만들기

public 폴더에 electron.js 파일을 아래와 같이 만듭시다.

public 폴더에 만드는 이유는 electron-builder가 패키징 할 때 create-react-app이 build 한 build 폴더를 패키징 하는데

이때 electron 앱의 엔트리 포인트가 없는 상태가 됩니다.

그래서 public 폴더에 electron 앱의 엔트리 포인트인 electron.js를 만들면 create-react-app의 webpack이 자동으로 public 폴더를 build 폴더에 복사하기 때문에 electron-builder 가 패키징 할 수 있게 됩니다.

그리고 electron.js라고 이름 지은 이유는 electron-builder 가 디폴트로 일렉트론 앱의 엔트리 포인트로 build/electron.js 파일을 찾기 때문입니다.

 

const { app, BrowserWindow } = require("electron");
const path = require("path");
const isDev = require("electron-is-dev");

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      devTools: isDev,
    },
  });

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

  if (isDev) {
    mainWindow.webContents.openDevTools({ mode: "detach" });
  }

  mainWindow.setResizable(true);
  mainWindow.on("closed", () => (mainWindow = null));
  mainWindow.focus();
}

app.on("ready", createWindow);

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

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});

위 코드를 보면 electron-is-dev 패키지에 따른 isDev 변수에 따라 mainWindow가 loadURL을 분기하게 됩니다. 그래서 개발 환경일 때 Hot-Reloading을 이용할 수 있는 거죠.

 

 

Script 수정

package.json 파일에서 일부 script를 수정해야 합니다.

"description": "electron test app",
  "author": "cpro95",
  "main": "public/electron.js",
  "homepage": "./",
  "build": {
    "productName": "electron-test-app",
    "asar": true,
    "appId": "org.cpro95.electron-test-app"
  },
  
  
  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test",
    "react-eject": "react-scripts eject",
    "start": "concurrently \"cross-env NODE_ENV=development BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "build": "yarn react-build && electron-builder",
    "release": "yarn react-build && electron-builder --publish=always"
  },

위에서 "homepage"를 "./"로 설정하는 이유는 만약 설정하지 않으면, 패키지 된 앱이 js파일과 css 파일을 찾지 못하게 됩니다.

 

이제 개발 환경을 위한 모든 준비가 끝났습니다.