[Electron] electron, electron react로 개발하기 (환경설정)

[Electron] electron, electron react로 개발하기 (환경설정)

electron 이라고 한번쯤은 들어보았을 것입니다. electron은 웹 개발 언어인 HTML, CSS, JavaScript로 크로스 플랫폼 설치형 프로그램을 개발할 수 있습니다. 공식 홈페이지에서는 Build cross-platform desktop apps with JavaScript, HTML, and CSS와 같이 설명이 되어 있습니다. 무엇보다도 FE 개발자라면 많이 사용해보았을 라이브러리와 프레임워크를 이용하여 개발할 수 있다는 장점이 있습니다. (npm package 사용 가능)

그렇다면 electron으로 개발된 유명한 프로그램을 뭐가 있을까요? Visual Studio Code, Facebook messenger, Twitch, Slack ... 등으로 유명한 프로그램들이 electron으로 구현되었습니다. 해당 카테고리에서는 electron과 react로 간단하게 desktop application을 구현하는 방법을 알아보도록 하겠습니다.

react 프로젝트 생성

react 프로젝트 생성하는 방법은 아래 링크를 통해 확인해봅시다.

이동하기

electron 추가

해당 프로젝트에 electron을 추가해보겠습니다. electron을 사용하기 위해 설치해야할 package는 아래와 같습니다.

설치 명령어 : yarn add -D electron electron-builder wait-on concurrently cross-env

설치 명령어 : yarn add electron-is-dev

우선 위 package들을 먼저 설치해줍니다. 각각에 대해 간단하게 설명하자면

concurrently, wait-on : react와 electron을 한번에 실행시키기 위한 package

electron : electron

electron-builder : electron installer 생성

electron-is-dev : dev, prod 환경 구분

cross-env : window에서 환경변수 사용

으로 이해하시면 됩니다.

react & electron 코드 작성 및 실행

◆ 코드 작성

이제 react와 electron으로 window application을 구현해보겠습니다. 우선 react의 App.js를 아래와 같이 간단하게 수정해줍니다.

const App = () => {
  return <div>This is first electron desktop app.</div>;
};

export default App;

그리고 public 폴더 아래 electron.js 파일을 생성한 뒤 아래처럼 코드를 작성해줍니다.

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

let mainWindow = null;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 640,
    webPreferences: {
      nodeIntegration: 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(false);
  mainWindow.setResizable(true);
  mainWindow.on("closed", () => (mainWindow = null));
  mainWindow.focus();
};

// electron이 초기화 끝났을 때
app.on("ready", () => {
  createWindow();
});

// 모든 window가 종료되었을 때
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

// app이 활성화 되었을 때
app.on("activate", () => {
  if (!mainWindow) {
    createWindow();
  }
});

간단하게 설명하자면 mainWindow는 개발인 경우 개발 url을, 개발이 아닌 경우 index.html을 load합니다.

mainWindow.setResizable(false) 값을 주면 window 크기를 변경할 수 없습니다. 해당 코드에서는 true를 주었고, 해당 코드를 작성하지 않아도 변경할 수 있습니다.

ready, window-all-closed, activate 이벤트에 맞는 동작을 callback으로 등록해주었습니다. 많은 이벤트들이 있는데 아래 참고자료를 확인하시면 됩니다. 그리고 package.json도 수정해줍니다.

{
  "name": "electron",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "main": "public/electron.js",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "electron-is-dev": "^2.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start:electron": "electron .",
    "start:react": "react-scripts start",
    "build:react": "react-scripts build",
    "test:react": "react-scripts test",
    "eject:react": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "^7.0.0",
    "cross-env": "^7.0.3",
    "electron": "^17.1.2",
    "electron-builder": "^22.14.13",
    "wait-on": "^6.0.1"
  }
}

homepage, main, scripts를 추가 및 변경해주었습니다.

◆ 코드 실행하기

위와 같이 코드를 모두 수정하였으면 이제 실행해봅니다. react 프로젝트를 먼저 실행해주어야 localhost:3000이 실행되고, 이후 electron을 실행해야 해당 url을 load하기 때문에 react, electron 순서로 실행해주어야 합니다.

위에서 변경한 scripts를 실행해줍니다. yarn start:react -> yarn start:electron 2개의 script를 실행해줍니다. 그럼 아래처럼 react와 electron이 실행됩니다.

정상적으로 react와 electron을 실행하였습니다. 그런데 매번 이렇게 명령어를 2번 입력해야하고, 사용하지도 않을 react 개발 홈페이지가 실행되는 것은 매우 불필요한 작업입니다. 이것을 수정해보도록 하겠습니다. package.json의 scripts에 아래 script를 추가해줍니다.

"scripts": {
    "start": "concurrently \"cross-env BROWSER=none yarn start:react\" \"wait-on http://localhost:3000 && yarn start:electron\"",
    "start:electron": "electron .",
    "start:react": "react-scripts start",
    "build:react": "react-scripts build",
    "test:react": "react-scripts test",
    "eject:react": "react-scripts eject"
  }

동시에 react와 electron을 실행시키는 script입니다. cross-env는 window를 위해서 작성해주었습니다. BROWSER는 띄우지 않고, react를 실행시킵니다. http://localhost:3000이 실행될 때까지 기다린 후 실행되면 yarn start:electron을 실행합니다. 즉 우리가 원하는 대로 react 브라우저는 띄우지 않고 react가 실행되면 electron을 실행하는 것입니다.

이번 게시글에서는 react와 electron을 이용하여 desktop application을 간단하게 실행시켜보았습니다. 못 따라오신 분은 아래 참고자료에 코드를 확인하시면 됩니다. 다음 게시글에서는 react와 electron 간의 통신을 해보도록 하겠습니다.

참고자료

• 해당 게시글 코드 확인
• electron 공식 홈페이지
• electron app event

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.