React를 이용한 Electron 퀵 스타트

React 애플리케이션 개발하기

Create React 앱 을 사용하여 애플리케이션 스캐폴딩 도구 체인. 터미널에 다음 명령을 입력합니다.

npx create-react-app my_electron_react_application

애플리케이션에는 다음 파일이 포함되어야 합니다. 프로젝트의 일부 추가 파일(예: CSS, 서비스 워커, 테스트 파일)은 아래 내용에 포함되지 않습니다.

.
|-- package.json
|-- package-lock.lock
|-- public
|   |-- index.html
|-- src
|   |-- App.js // renderer process
|-- |-- index.js // renderer process

src 디렉토리 내의 모든 JS 파일은 renderer process에서 실행됩니다.

웹 바이탈 종속성 제거하기

Create React 앱 버전 4.0+ 웹 바이탈 포함 모듈. 'web-vitals'는 Electron 환경이 아닌 웹에서 작동하도록 설계되었으므로 이 모듈을 포함하면 애플리케이션을 빌드할 때 "chunk runtime-main [entry] Cannot convert undefined or null to object" 오류가 발생할 수 있습니다. 이 오류를 방지하려면 다음 명령을 실행하여 web-vitals 패키지를 제거합니다.

npm uninstall web-vitals

그런 다음 reportWebVitals.js 파일을 삭제하세요.

rm src/reportWebVitals.js

마지막으로, src/index.js 파일에서 다음 행을 제거하세요.

import reportWebVitals from './reportWebVitals';
reportWebVitals();

CRACO를 설치하여 웹팩 구성 변경하기

애플리케이션이 Electron에서 제대로 작동하도록 하려면 웹팩 구성을 변경해야 합니다. create-react-app을 통해 생성된 애플리케이션은 기본적으로 사전 구성된 웹팩 파일을 사용하며 최종 사용자에게 숨겨집니다. Create React 앱의 기본 웹팩 구성은 Realm과 호환되지 않으므로 재정의해야 합니다. CRACO 를 사용할 수 있습니다. 을(를) 클릭하여 이러한 기본값을 재정의합니다. 다음 명령을 사용하여 CRACO를 설치합니다.

npm install @craco/craco

CRACO 구성 파일 생성하기

사전 구성 웹팩 값을 재정의하려면 애플리케이션의 루트에서 craco.config.js(이)라는 CRACO 구성 파일을 생성하세요. 이 파일에 다음 항목을 추가하세요.

const nodeExternals = require("webpack-node-externals");
module.exports = {
  webpack: {
    configure: {
      target: "electron-renderer",
      externals: [
        nodeExternals({
          allowlist: [/webpack(\/.*)?/, "electron-devtools-installer"],
        }),
      ],
    },
  },
};

대상 를 "electron-renderer"로 설정하여 Electron 내장 모듈의 브라우저 환경에 맞게 애플리케이션을 컴파일할 수 있습니다. 모든 node_module이 번들로 제공되지 않도록 nodeExternals 도 지정됩니다. nodeExternals 에 전달된 객체의 allowList 키는 번들에 포함할 모듈(이 경우에는 electron의 개발 도구 및 웹팩)의 목록을 지정합니다. webpack-node-externals를 사용하려면 다음 명령을 실행하세요.

npm install webpack-node-externals --save-dev

Electron 설치하기

프로젝트에 Electron을 추가하려면 다음 명령을 실행하세요.

npm install electron --save-dev

Electron 메인 프로세스 파일 생성하기

Electron main process 파일은 애플리케이션의 진입점으로 간주할 수 있습니다. 이 파일은 React 앱의 index.html 파일을 Electron에서 생성된 BrowserWindow(으)로 로드하는 역할을 합니다.

public 디렉토리의 electron.js(이)라는 새 파일에 다음 코드를 추가하세요.

const electron = require("electron");
const path = require("path");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { nodeIntegration: true, contextIsolation: false },
  });
  // and load the index.html of the app.
  console.log(__dirname);
  mainWindow.loadFile(path.join(__dirname, "../build/index.html"));
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

해당 애플리케이션에는 이제 다음 파일이 포함되어야 합니다. 프로젝트의 일부 추가 파일(예: CSS, 서비스 워커, 테스트 파일)은 아래 내용에 포함되지 않습니다.

.
|-- package.json
|-- package-lock.lock
|-- craco.config.js
|-- public
|   |-- index.html
|   |-- electron.js // main process
|-- src
|   |-- App.js // renderer process
|-- |-- index.js // renderer process

src 디렉토리 내 모든 JS 파일은 renderer 프로세스에서 실행됩니다. electron.js와 이에 필요한 모든 파일은 메인 프로세스에서 실행됩니다.

애플리케이션 실행하기

애플리케이션을 실행하려면 다음 항목을 package.json 파일에 추가해서 홈페이지 및 Electron의 기본 진입점을 지정하세요.

"main": "public/electron.js",
"homepage": "./",

마지막으로, 다음 스크립트를 package.json 파일에 추가하세요.

"scripts": {
  "build": "craco build",
  "start": "electron ."
},

터미널에서 npm run build을(를) 실행한 다음 npm run start을(를) 실행하세요. 다음과 같은 내용이 표시됩니다.

Realm 설치하기

터미널에서 다음 명령을 사용하여 프로젝트에 Realm을 추가하세요.

npm install realm

src/App.js 파일 상단에 다음 항목을 추가하여 렌더링 프로세스에서 영역을 사용하세요(어떤 파일이든 영역을 사용해서 코드를 작성하려면 해당 파일을 가져오는 작업도 해야 함).

import Realm from "realm";