문서 메뉴

문서 홈애플리케이션 개발Atlas Device SDK

Realm Web & Atlas Device Sync 시작하기(미리 보기)

이 페이지의 내용

  • 예제 앱 시작하기
  • 코드 받기
  • 설치 종속성
  • App Services App 만들기 및 연결
  • 예제 앱 실행
  • 수동 설치 및 설정
  • Realm & Realm Mobile Sync 사용
  • Realm 가져오기
  • 앱 초기화
  • 사용자 인증
  • 객체 모델 정의
  • Realm 열기
  • 동기화되지 않은 Realm 열기
  • Realm 객체 생성, 수정 및 삭제
  • 객체 찾기, 정렬 및 필터링
  • Realm 닫기
  • 웹에서 Realm Mobile Sync의 제한 사항

WebAssembly를 지원하는 Realm JavaScript SDK를 사용하면 Realm 데이터베이스 API와 Atlas Device Sync를 사용하여 브라우저를 위한 실시간 웹 애플리케이션을 구축할 수 있습니다.

중요

WebAssembly를 지원하는 Realm JS SDK가 Preview 버전입니다. 현재 Node.js 또는 React Native용 Realm JS SDK와 비교했을 때 상당한 제한 사항이 있습니다. 자세한 내용은 제한 사항 섹션을 참조하세요.

JavaScript 웹 어셈블리 SDK 사용을 시작하는 가장 빠른 방법은 사전 빌드된 웹 동기화 예제 앱을 복제하여 실행하는 것입니다. 이 앱은 React로 작성되었으며 Realm 데이터베이스 API와 Atlas Realm Mobile Sync를 사용합니다.

1

시작하려면 예제 앱 리포지토리를 복제하고 예제 앱 브랜치를 체크아웃한 다음 예제 프로젝트로 이동하세요.

git clone https://github.com/realm/realm-js.git
cd realm-js
git checkout nh/wasm/emscripten_target
cd examples/example-react-task
2

예제 앱의 루트 디렉토리에서 다음 명령을 실행하여 WebAssembly가 있는 Realm JavaScript SDK를 포함한 종속성을 설치합니다.

npm install

참고

예제 앱은 현재 npm 을(를) 사용한 설치를 지원합니다. yarn 또는 pnpm 을 사용하는 경우 추가 폴리필을 제공해야 할 수 있습니다.

3

Device Sync를 사용하려면 Device Sync가 활성화된 App Services App에 연결해야 합니다. 예제 프로젝트의 README.md 파일에 있는 앱 생성 지침을 따릅니다. 앱을 생성 및 구성한 후 클라이언트 앱 ID를 복사하여 예제 프로젝트의 src/atlas-app-services/config.json 파일에 붙여넣습니다.

src/atlas-app-services/config.json
{
"ATLAS_APP_ID": "myapp-abcde"
}
4

이제 종속성을 설치하고 앱에 대한 연결을 정의했으므로 예제 앱을 실행할 수 있습니다.

npm start

npm에서 웹 어셈블리를 지원하는 Realm JavaScript SDK를 설치할 수 있습니다.

npm install realm@12.0.0-browser.2

참고

웹 어셈블리를 지원하는 Realm JavaScript SDK는 현재 npm에서 realm 패키지의 태그가 있는 릴리스로만 사용할 수 있습니다. SDK를 설치할 때 정확한 버전 번호와 태그를 지정해야 합니다.

또한 최상위 대기가 활성화된 상태에서 웹팩을 사용하도록 프로젝트를 구성해야 합니다. 예를 들어, 사용자의 구성은 이 기본 구성을 확장해야 합니다.

module.exports = {
experiments: {
topLevelAwait: true
}
};

WebAssembly를 지원하는 Realm JavaScript SDK를 설치하고 애플리케이션을 구성한 후에는 SDK를 사용하여 Realm 및 Atlas Realm Mobile Sync로 실시간 웹 애플리케이션을 구축할 수 있습니다.

이 섹션의 예제에서는 앱에서 Realm으로 작업하는 방법을 보여줍니다.

React 애플리케이션을 작성하는 경우 @realm/react 패키지를 사용하는 것이 좋습니다. 여기에는 Realm을 React 애플리케이션과 기본적으로 통합할 수 있게 해주는 사전 빌드된 후크와 컴포넌트가 포함되어 있습니다.

데이터베이스와 상호 작용하는 소스 파일 상단에서 영역을 가져옵니다.

import Realm, { App } from "realm";

Realm Mobile Sync는 Atlas App Services를 사용하여 인증을 managed하고 기기 간 데이터를 동기화합니다. 웹 App에서 Realm Mobile Sync를 사용하려면 Realm Mobile Sync가 활성화된 App Services App에 연결해야 합니다.

클라이언트 앱 ID를 사용하여 앱에 연결합니다. 가져오는 방법을 알아보려면 앱 ID 찾기를 참조하세요.

const app = new App({ id: "<your-app-id>" });

사용자를 인증하려면 앱 인스턴스에서 App.logIn() 메서드를 호출합니다. 모든 인증 제공자로 로그인할 수 있습니다. 더 많은 예시 는 사용자 인증을 참조하세요.

const credentials = Realm.Credentials.anonymous();
await app.logIn(credentials);

Realm은 네이티브 JavaScript 객체를 사용하여 애플리케이션 데이터를 모델링합니다. 지정된 유형의 모든 객체가 객체의 내용을 제어하는 스키마를 공유하는 Realm 객체 유형을 정의합니다.

Realm 객체 유형을 정의하려면 해당 유형의 nameproperties을(를) 지정하는 스키마 객체를 만드세요. 유형의 이름은 영역 내 객체 유형들 사이에서 고유해야 합니다.

const TaskSchema = {
name: "Task",
properties: {
_id: "int",
name: "string",
status: "string?",
owner_id: "string?",
},
primaryKey: "_id",
};

동기화된 영역을 열려면 영역의 스키마를 지정하고 sync 구성 객체를 포함하는 구성 객체를 사용하여 Realm.open() 를 호출합니다. 동기화 구성은 인증된 사용자를 지정하고 동기화되는 데이터를 제어하는 초기 구독을 정의해야 합니다.

const realm = await Realm.open({
schema: [TaskSchema],
sync: {
user: app.currentUser,
flexible: true,
// Define initial subscriptions to start syncing data as soon as the
// realm is opened.
initialSubscriptions: {
update: (subs, realm) => {
subs.add(
// Get objects that match your object model, then filter them by
// the `owner_id` queryable field
realm.objects(Task).filtered(`owner_id == "${anonymousUser.id}"`)
);
},
},
},
});

동기화되지 않는 로컬 인메모리 영역을 열려면 로컬 영역 구성 객체를 사용하여 Realm.open() 를 호출합니다.

const realm = await Realm.open({
schema: [TaskSchema]
});

영역을 연 후에는 해당 영역에서 객체를 생성, 수정 및 삭제할 수 있습니다. All write operations must occur within a Realm.write() transaction block.

const allTasks = realm.objects(Task);
// Add a couple of Tasks in a single, atomic transaction.
realm.write(() => {
realm.create(Task, {
_id: 1,
name: "go grocery shopping",
status: "Open",
});
realm.create(Task, {
_id: 2,
name: "go exercise",
status: "Open",
});
});
const task1 = allTasks.find((task) => task._id == 1);
const task2 = allTasks.find((task) => task._id == 2);
realm.write(() => {
// Modify an object.
task1!.status = "InProgress";
// Delete an object.
realm.delete(task2);
});

Realm.objects() 메서드를 사용하여 영역의 객체를 쿼리할 수 있습니다. 쿼리는 쿼리할 Realm 객체 유형을 지정해야 합니다. 유창한 메서드 체인 API를 사용하여 쿼리 결과를 선택적으로 필터링하고 정렬할 수 있습니다.

// Query for specific obect using primary key.
const specificTask = realm.objectForPrimaryKey(Task, 0);
// Query realm for all instances of the "Task" type.
const tasks = realm.objects(Task);
// Filter for all tasks with a status of "Open".
const openTasks = tasks.filtered("status = 'Open'");
// Sort tasks by name in ascending order.
const tasksByName = tasks.sorted("name");

메모리 누수를 방지하려면 Realm 인스턴스 사용이 완료되면 Realm.close() 메서드를 호출하세요.

// Close the realm.
realm.close();

브라우저의 Realm Mobile Sync에는 현재 다음과 같은 제한 사항이 적용됩니다.

  • 지속성 없음: Realm JavaScript 웹 SDK는 Realm Mobile Sync 데이터를 디스크에 유지하지 않습니다. 모든 로컬 데이터는 메모리에 저장되며 브라우저 탭을 닫거나 새로 고침하면 손실됩니다.

  • 작업자 스레드 없음: 메인 스레드에서 모든 Realm 작업을 수행해야 합니다. 웹 작업자 스레드에서 Realm을 열거나 작업할 수 없습니다.

  • 미사용 데이터 암호화 없음: Realm JS 웹 SDK는 모든 미사용 로컬 데이터를 암호화되지 않은 상태로 메모리에 저장합니다. 브라우저와 Device Sync 서버 간에 전송되는 데이터는 HTTPS를 통해 암호화됩니다.

← React로 빠르게 시작하기 - 웹 SDK