Docs Menu
Docs Home
/ /
Atlas Device SDK

React를 이용한 Electron 퀵 스타트

이 페이지의 내용

  • 개요
  • 설정
  • React 애플리케이션 개발하기
  • 웹 바이탈 종속성 제거하기
  • CRACO를 설치하여 웹팩 구성 변경하기
  • CRACO 구성 파일 생성하기
  • Electron 설치하기
  • Electron 메인 프로세스 파일 생성하기
  • 애플리케이션 실행하기
  • Realm 설치하기
  • Realm 열기

이 페이지에는 Create React App을 사용하여 애플리케이션 을 개발하여 Realm 을 Electron 애플리케이션 에 빠르게 통합할 수 있는 정보가 포함되어 있습니다.

시작하기 전에 다음 사항을 확인하세요.

참고

버전 요건 - Electron

Realm은 공식적으로 지원되는 모든 Electron 버전에서 작동합니다. 그러나 Electron은 각 업데이트마다 지속적으로 변경되므로 이 문서와의 호환성을 위해 Electron 버전 13.2.x를 사용하는 것이 좋습니다. 공식적으로 지원되는 Electron 버전을 확인하려면 Electron Releases 를 확인하세요. 문서.

참고

버전 요건 - React.js

이 가이드는 React.js 버전 17.0지원하기 위해 4 작성되었습니다. 및 Create React 앱 버전 .0. 이 버전이 아닌 버전은 React.js와 Create React 앱 모두에 새로운 종속성이 자주 추가되므로 애플리케이션을 빌드하는 동안 오류가 발생할 수 있습니다.

Realm을 사용하여 Electron 애플리케이션을 설정하려면 다음 지침을 따르세요.

1

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에서 실행됩니다.

참고

각 Electron 애플리케이션에는 메인 프로세스 가 하나만 있을 수 있습니다. 메인 프로세스에서는 웹 페이지가 생성됩니다. 각 웹 페이지는 렌더러 프로세스 라는 자체 프로세스에서 실행됩니다. 이에 대해 자세히 알아보려면 공식 Electron Process Model (Electron 프로세스 모델)을 참조하세요. doc.

2

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();
3

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

npm install @craco/craco
4

사전 구성 웹팩 값을 재정의하려면 애플리케이션의 루트에서 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
5

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

npm install electron --save-dev
6

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

참고

각 Electron 애플리케이션에는 메인 프로세스 가 하나만 있을 수 있습니다. 메인 프로세스에서는 웹 페이지를 생성할 수 있습니다. 각 웹 페이지는 렌더러 프로세스 로 알려진 자체 프로세스에서 실행됩니다. 이에 대해 자세히 알아보려면 공식 Electron Process Model (Electron 프로세스 모델)을 참조하세요. doc.

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와 이에 필요한 모든 파일은 메인 프로세스에서 실행됩니다.

7

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

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

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

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

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

React 기능이 있는 Electron 데스크탑 앱
8

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

npm install realm

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

import Realm from "realm";

사용자를 인증하고 스키마를 정의한 후 Device Sync 동기화 활성화를 실행한 다음, Realm 가져오기의 대상이 된 파일에서 Realm.open()을(를) 호출하세요.

이 영역을 열고 나면 영역에 쓰기를 할 수 있습니다.

const app = new Realm.App({ id: "<Your App ID>" }); // create a new instance of the Realm.App
async function run() {
// login with an anonymous credential
await app.logIn(Realm.Credentials.anonymous());
const DogSchema = {
name: "Dog",
properties: {
_id: 'int',
name: "string",
age: "int",
},
primaryKey: '_id'
};
const realm = await Realm.open({
schema: [DogSchema],
sync: {
user: app.currentUser,
partitionValue: "myPartition",
},
});
// The myPartition realm is now synced to the device. You can
// access it through the `realm` object returned by `Realm.open()`
// write to the realm
}
run().catch(err => {
console.error("Failed to open realm:", err)
});

참고

renderer 프로세스 및 main 프로세스 양쪽에서 영역에 쓰는 작업의 예시를 보려면 realm-electron-advanced-quickstart 리포지토리를 확인하세요.

참고

현재의 React Native 바이너리는 realm 패키지에 포함되어 있습니다. 빌드에서 해당 바이너리와 react-native 디렉토리를 제거할 수 있습니다. package.json 파일에서 build.files 항목을 추가한 후 이 항목의 값을 !**/node_modules/realm/react-native(으)로 설정하세요.

다음도 참조하세요.

다음

Atlas Device SDK Docs에 오신 것을 환영합니다