Docs Menu
Docs Home
/
MongoDB Atlas
/
Atlas Device SDK

Electron 퀵 스타트

개요

이 페이지에는 Realm Electron 애플리케이션 에 빠르게 통합하기 위한 정보가 포함되어 있습니다. 추가 프레임워크를 사용하지 않고 Realm 에서 Electron 애플리케이션 설정하다 방법을 학습 Electron 설정하다 지침을 참조하세요. Create React App 을(를) 사용하여 애플리케이션 이미 생성했거나 Electron을 사용하여 React App을 Realm 과 통합하는 데 관심이 있다면 Electron with React 설정하다 지침을 확인하세요.

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

참고

버전 요구 사항

Realm 공식적으로 지원되는 모든 Electron 버전에서 작동합니다. 안정적인 최신 출시하다 사용하는 것이 좋습니다. 공식적으로 지원되는 Electron 버전을 확인하려면 Electron Releases 문서 확인하세요.

설정

1

애플리케이션 파일 설정

애플리케이션 개발을 시작하려면 다음과 같이 애플리케이션 디렉토리를 생성하세요.

mkdir myElectronApplication

애플리케이션의 루트 디렉토리에 index.html, main.js 및 renderer.js 파일을 생성합니다.

touch index.html main.js renderer.js

main.js 파일 은 애플리케이션 index.html 의 진입 점 이며 메인 프로세스 에서 실행됩니다. 파일 Electron의 BrowserWindow API 에 로드하는 역할을 합니다. 이 HTML 파일 에 필요한 모든 스크립트 파일은 렌더러 프로세스 에서 실행됩니다.index.html 파일 에 다음을 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <script src="renderer.js"></script>
  </body>
</html>

renderer.js 파일에 다음 코드를 추가합니다.

const Realm = require("realm");

참고

각 Electron 애플리케이션 main process 이 하나만 있을 수 있습니다. 메인 프로세스 웹 페이지를 생성합니다. 각 웹 페이지는 이라고 하는 자체 프로세스 에서 실행됩니다.renderer process 이에 대한 자세한 학습 은 공식 Electron 프로세스 모델 문서 참조하세요.

2

메인 스크립트 파일 생성

main.js 파일은 애플리케이션의 진입점입니다. 파일에 Electron 브라우저 창을 만들고 index.html 파일을 로드하여 HTML을 사용자에게 표시합니다.

const { app, BrowserWindow } = require('electron')
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })
  // to prevent the Sync Connection from ending prematurely, start reading from stdin so we don't exit
  process.stdin.resume();
  win.loadFile('index.html')
}
app.whenReady().then(createWindow)
3

설정 package.json

package.json을(를) 초기화하여 패키지 설치 및 프로젝트에서 사용을 시작하세요. 터미널에서 다음 명령을 실행합니다.

npm init -y

애플리케이션 파일 구조는 다음과 유사해야 합니다.

.
|-- package.json
|-- package-lock.lock
|-- index.html
|-- main.js // runs on the main process
|-- renderer.js // runs on a renderer process

main.js 파일이 main 프로세스에서 실행됩니다. renderer.js 파일과 해당 파일 또는 index.html에 필요한 기타 파일은 renderer 프로세스에서 실행됩니다.

4

프로젝트 종속성 설치

Realm을 사용하여 Electron 애플리케이션 개발을 시작하려면 필요한 종속성을 설치하세요.

npm install electron --save-dev
npm install realm@12 --save
5

애플리케이션 실행을 위한 스크립트 생성

npm start 명령으로 애플리케이션을 시작하려면 package.json 파일에 스크립트를 추가하세요.

"scripts": {
 "start": "electron ."
}
6

애플리케이션 실행하기

터미널에서 애플리케이션을 시작합니다.

npm start

다음과 같은 내용이 표시되어야 합니다.

Electron 데스크탑 앱

Realm 열기

사용자를 인증하고, 스키마를 정의하고, Device Sync를 동기화한 후 렌더러 .js 파일에서 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에 오신 것을 환영합니다

이 페이지의 내용