[아파치 코르도바] Apache Cordova 개발 – 데이터 저장소 사용법

모바일 애플리케이션 개발을 할 때, 데이터를 저장하는 것은 필수적인 요소입니다. Apache Cordova는 웹 기술을 이용하여 크로스 플랫폼 모바일 애플리케이션을 개발할 수 있는 프레임워크로, 데이터 저장을 위해 다양한 방법을 제공합니다. 이 글에서는 로컬 스토리지(Local Storage)와 IndexedDB를 사용하여 데이터를 저장하고 관리하는 방법에 대해서 자세히 설명하겠습니다.

1. 로컬 스토리지 (Local Storage)

로컬 스토리지는 웹 애플리케이션이 클라이언트 측에서 데이터를 저장할 수 있도록 제공하는 간단한 Key-Value 저장소입니다. Apache Cordova는 표준 웹 API를 사용하기 때문에, 로컬 스토리지에 접근하기 매우 쉽고 직관적입니다.

1.1 로컬 스토리지의 기본 사용법

로컬 스토리지를 사용하기 위해서는 localStorage 객체를 사용합니다. 이 객체는 데이터를 저장하고, 불러오고, 삭제하는 메소드를 제공합니다.

데이터 저장


localStorage.setItem('username', 'john_doe');
localStorage.setItem('email', 'john@example.com');

데이터 불러오기


const username = localStorage.getItem('username');
const email = localStorage.getItem('email');
console.log(username);  // "john_doe"
console.log(email);     // "john@example.com"

데이터 삭제


localStorage.removeItem('username');
localStorage.clear(); // 모든 데이터 삭제

1.2 로컬 스토리지의 특징

  • 저장 용량: 약 5MB (브라우저에 따라 다를 수 있음)
  • 데이터는 문자열 형태로 저장됨
  • 동기식 접근: 데이터를 요청하면 즉시 반환됨
  • 브라우저 세션이 끝난 후에도 데이터가 유지됨

1.3 로컬 스토리지의 사용 예제

사용자 설정을 로컬 스토리지에 저장하고 불러오는 간단한 예제를 만들어 보겠습니다.


function saveUserSettings() {
    const theme = document.querySelector('input[name="theme"]:checked').value;
    const language = document.querySelector('input[name="language"]:checked').value;
    localStorage.setItem('theme', theme);
    localStorage.setItem('language', language);
}

function loadUserSettings() {
    const theme = localStorage.getItem('theme') || 'light';
    const language = localStorage.getItem('language') || 'en';
    document.querySelector(`input[name="theme"][value="${theme}"]`).checked = true;
    document.querySelector(`input[name="language"][value="${language}"]`).checked = true;
}

document.addEventListener('DOMContentLoaded', loadUserSettings);

2. IndexedDB

IndexedDB는 대량의 구조화된 데이터를 클라이언트 측에서 저장하기 위해 만들어진 비동기식 데이터베이스입니다. 로컬 스토리지보다 더 많은 양의 데이터 처리와 복잡한 데이터 구조를 지원합니다.

2.1 IndexedDB의 특징

  • 이진 데이터 저장 가능: 텍스트 뿐만 아니라 사진, 오디오, 비디오 또는 Blob 형태의 데이터도 저장할 수 있음
  • 대량의 데이터: 수십 MB에서 수 GB까지 데이터를 저장 가능
  • 비관계형 데이터베이스: 객체 저장소(Object Store)라는 개념을 사용하여 데이터를 저장
  • 비동기 API: 데이터를 저장하거나 읽을 때 비동기적으로 동작하므로 UI가 멈추지 않음

2.2 IndexedDB의 기본 사용법

IndexedDB를 사용하기 위해서는 먼저 데이터베이스를 생성하고, 객체 저장소를 만들어야 합니다.

데이터베이스 열기


const request = indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
    console.error('Database error:', event.target.error);
};

request.onsuccess = function(event) {
    const db = event.target.result;
    console.log('Database opened successfully');
};

request.onupgradeneeded = function(event) {
    const db = event.target.result;
    const objectStore = db.createObjectStore('users', { keyPath: 'id' });
    objectStore.createIndex('name', 'name', { unique: false });
    console.log('Object store created');
};

데이터 저장


function addUser(id, name, email) {
    const transaction = db.transaction(['users'], 'readwrite');
    const objectStore = transaction.objectStore('users');
    const user = { id: id, name: name, email: email };
    const request = objectStore.add(user);

    request.onsuccess = function() {
        console.log('User added to the database');
    };

    request.onerror = function(event) {
        console.error('Error adding user:', event.target.error);
    };
}

데이터 조회


function getUser(id) {
    const transaction = db.transaction(['users']);
    const objectStore = transaction.objectStore('users');
    const request = objectStore.get(id);
    
    request.onsuccess = function(event) {
        const user = event.target.result;
        if (user) {
            console.log('User found:', user);
        } else {
            console.log('User not found');
        }
    };
    
    request.onerror = function(event) {
        console.error('Error getting user:', event.target.error);
    };
}

2.3 IndexedDB의 사용 예제

사용자 정보를 저장하고 불러오는 간단한 예제를 만들어 보겠습니다.


let db;

const request = indexedDB.open('UserDB', 1);

request.onupgradeneeded = function(event) {
    db = event.target.result;
    const objectStore = db.createObjectStore('users', { keyPath: 'id' });
    objectStore.createIndex('name', 'name', { unique: false });
};

request.onsuccess = function(event) {
    db = event.target.result;

    // 사용자 추가
    addUser(1, 'John Doe', 'john@example.com');
    addUser(2, 'Jane Doe', 'jane@example.com');

    // 사용자 조회
    getUser(1);
};

// 사용자 추가 및 조회 함수는 위 예제를 참조하여 작성

결론

Apache Cordova를 사용한 모바일 애플리케이션 개발에서는 로컬 스토리지와 IndexedDB와 같은 다양한 저장소 기술을 활용할 수 있습니다. 로컬 스토리지는 간단한 Key-Value 저장소로 적합하지만, 대량의 데이터를 처리해야 할 경우 IndexedDB를 사용하는 것이 좋습니다. 각각의 특징과 사용법을 숙지하여 필요에 맞는 저장소를 선택하는 것이 중요합니다.

이번 블로그 글이 Apache Cordova에서 데이터 저장소를 이해하고 활용하는 데 도움이 되었으면 합니다. 다양한 예제와 사용법을 통해 애플리케이션 개발 속도를 높이고, 사용자 경험을 향상시키는 데 기여할 수 있기를 바랍니다.

참고 자료