React를 이용한 Electron 퀵 스타트
이 페이지의 내용
개요
이 페이지에는 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 애플리케이션을 설정하려면 다음 지침을 따르세요.
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
에서 실행됩니다.
참고
각 Electron 애플리케이션에는 메인 프로세스 가 하나만 있을 수 있습니다. 메인 프로세스에서는 웹 페이지가 생성됩니다. 각 웹 페이지는 렌더러 프로세스 라는 자체 프로세스에서 실행됩니다. 이에 대해 자세히 알아보려면 공식 Electron Process Model (Electron 프로세스 모델)을 참조하세요. doc.
웹 바이탈 종속성 제거하기
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 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와 이에 필요한 모든 파일은 메인 프로세스에서 실행됩니다.
애플리케이션 실행하기
애플리케이션을 실행하려면 다음 항목을 package.json
파일에 추가해서 홈페이지 및 Electron의 기본 진입점을 지정하세요.
"main": "public/electron.js", "homepage": "./",
마지막으로, 다음 스크립트를 package.json
파일에 추가하세요.
"scripts": { "build": "craco build", "start": "electron ." },
터미널에서 npm run build
을(를) 실행한 다음 npm run start
을(를) 실행하세요. 다음과 같은 내용이 표시됩니다.

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
(으)로 설정하세요.