Ember.js 앱을 오프라인으로 만드는 방법: 서버 동기화 활용 가이드

Ember.js 애플리케이션을 오프라인 환경에서도 원활하게 작동하도록 만들려면 클라이언트 측 저장소 어댑터를 활용해야 합니다. 기본 원리는 간단합니다. 네트워크 연결이 없을 때는 브라우저의 로컬 스토리지나 IndexedDB에 데이터를 저장하고, 연결이 복구되면 변경된 데이터를 서버와 동기화하는 방식입니다.

ember-localstorage 어댑터 사용하기

가장 간단한 방법은 ember-localstorage 어댑터를 사용하는 것입니다. 이 어댑터를 사용하면 별도의 복잡한 설정 없이 데이터를 브라우저의 로컬 스토리지에 영구적으로 보관할 수 있습니다.

App.store = DS.Store.create({
    revision: 11,
    adapter: DS.LSAdapter.create()
});

IndexedDB 어댑터 예제

더 많은 데이터를 다루거나 구조화된 저장소가 필요한 경우 IndexedDB 어댑터를 사용할 수 있습니다. 이때는 클라이언트 측 저장소에 사용할 어댑터를 직접 정의하고, 모델과의 매핑 정보를 함께 지정해야 합니다.

App.Store = DS.SyncStore.extend({
    revision: 10,
    adapter: DS.IndexedDB.adapter({
        mappings: {
            person: App.Person,
            persons: App.Person,
            contact: App.Contact,
            contacts: App.Contact
        }
    })
});

주요 포인트

mappings 객체는 단수형과 복수형 키를 모두 등록하여, Ember Data가 모델 이름을 올바르게 해석할 수 있도록 돕습니다. 위 예제에서는 person/persons와 contact/contacts가 각각 App.Person, App.Contact 모델에 매핑되어 있습니다.

이렇게 설정하면 사용자가 오프라인 상태에서 앱을 사용하더라도 모든 데이터 변경 사항이 로컬에 안전하게 저장되며, 서버 연결이 가능해지는 순간 자동으로 동기화됩니다. 결과적으로 사용자는 네트워크 상태와 관계없이 끊김 없는 경험을 누릴 수 있습니다.