IndexedDB 초보자 가이드-JS 튜토리얼-php.cn

A Beginner

웹 앱에서 클라이언트 측 저장소 사용에 대한 자습서

최신 웹 애플리케이션, 특히 프로그레시브 웹 앱(PWA)을 구축할 때는 데이터를 오프라인으로 저장할 수 있는 방법을 갖추는 것이 중요합니다. IndexedDB는 사용자가 오프라인일 때에도 웹 앱이 데이터를 저장하고 검색할 수 있게 해주는 강력한 클라이언트 측 데이터베이스입니다. 이 가이드는 IndexedDB의 기본 사항을 안내하고 웹 앱 내에서 데이터를 생성, 읽기, 업데이트 및 삭제(CRUD 작업)하는 방법을 보여줍니다.

IndexedDB란 무엇인가요?

IndexedDB는 파일 및 Blob을 포함한 대량의 구조화된 데이터를 클라이언트 측에 저장하기 위한 하위 수준 API입니다. localStorage와 달리 IndexedDB를 사용하면 문자열뿐만 아니라 복잡한 데이터 유형을 저장할 수 있습니다. 비동기식 트랜잭션 데이터베이스 모델을 사용하므로 대규모 데이터 세트나 오프라인 데이터 동기화를 처리해야 하는 애플리케이션에 강력합니다.

IndexedDB를 사용하는 이유는 무엇입니까?

오프라인 기능: 프로그레시브 웹 앱(PWA) 및 오프라인 우선 애플리케이션에 적합합니다.
저장 용량: IndexedDB는 localStorage(약 5~10MB로 제한)에 비해 훨씬 더 많은 데이터를 저장할 수 있습니다.
유연성: 배열, 객체, 심지어 blob과 같은 복잡한 객체를 저장합니다.
비동기: 작업이 UI 스레드를 차단하지 않으므로 앱이 계속 응답합니다.

시작하기: IndexedDB 설정

IndexedDB 작업의 핵심 단계를 살펴보겠습니다. 우리가 다룰 내용은 다음과 같습니다.

데이터베이스 생성 또는 열기
객체 저장소(테이블) 생성
데이터 추가
데이터 읽기
데이터 업데이트 중
데이터 삭제

1단계: 데이터베이스 열기

IndexedDB와 상호작용하려면 먼저 데이터베이스에 대한 연결을 열어야 합니다. 데이터베이스가 없으면 생성됩니다.

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

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

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

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('customers')) {
        const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
        console.log('Object store created.');
    }
};

로그인 후 복사

현재 상황은 다음과 같습니다.

indexedDB.open은 데이터베이스를 열거나 생성합니다.
onerror는 데이터베이스를 열 때 발생하는 모든 오류를 처리합니다.
onsuccess는 데이터베이스 연결이 성공적으로 열리면 트리거됩니다.
onupgradeneeded는 데이터베이스를 업그레이드해야 할 때 실행됩니다(예: 데이터베이스를 처음 여는 경우 또는 버전이 변경되는 경우). 여기에서 객체 저장소를 정의합니다(SQL의 테이블이라고 생각하세요).

2단계: IndexedDB에 데이터 추가

이제 데이터베이스와 개체 저장소가 설정되었으므로 여기에 데이터를 추가해 보겠습니다.

const addCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.add(customer);

    request.onsuccess = () => {
        console.log('Customer added:', customer);
    };

    request.onerror = (event) => {
        console.error('Error adding customer:', event.target.errorCode);
    };
}

const customer = { id: 1, name: 'John Doe', email: 'john@example.com' };

request.onsuccess = (event) => {
    const db = event.target.result;
    addCustomer(db, customer);
};

로그인 후 복사

현재 상황은 다음과 같습니다.

수정이 가능하도록 '읽기/쓰기' 액세스 권한이 있는 트랜잭션을 생성합니다.
add() 메소드는 객체 저장소에 데이터를 삽입하는 데 사용됩니다.
데이터가 성공적으로 추가되었는지 확인하기 위해 성공 및 오류 이벤트를 수신합니다.

3단계: IndexedDB에서 데이터 읽기

IndexedDB에서 데이터를 읽는 것도 간단합니다. get() 메소드를 사용하여 방금 추가한 고객을 검색해 보겠습니다.

const getCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readonly');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.get(id);

    request.onsuccess = (event) => {
        const customer = event.target.result;
        if (customer) {
            console.log('Customer found:', customer);
        } else {
            console.log('Customer not found.');
        }
    };

    request.onerror = (event) => {
        console.error('Error fetching customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    getCustomer(db, 1); // Fetch customer with ID 1
};

로그인 후 복사

4단계: IndexedDB에서 데이터 업데이트

기존 레코드를 업데이트하려면 add()와 유사하게 작동하지만 키가 이미 존재하는 경우 레코드를 바꾸는 put() 메서드를 사용할 수 있습니다.

const updateCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.put(customer);

    request.onsuccess = () => {
        console.log('Customer updated:', customer);
    };

    request.onerror = (event) => {
        console.error('Error updating customer:', event.target.errorCode);
    };
}

const updatedCustomer = { id: 1, name: 'Jane Doe', email: 'jane@example.com' };

request.onsuccess = (event) => {
    const db = event.target.result;
    updateCustomer(db, updatedCustomer);
};

로그인 후 복사

5단계: IndexedDB에서 데이터 삭제

마지막으로 레코드를 삭제하려면 delete() 메소드를 사용하세요.

const deleteCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.delete(id);

    request.onsuccess = () => {
        console.log('Customer deleted.');
    };

    request.onerror = (event) => {
        console.error('Error deleting customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    deleteCustomer(db, 1); // Delete customer with ID 1
};

로그인 후 복사

결론

IndexedDB는 특히 오프라인 우선 웹 앱에서 클라이언트 측 데이터 저장소를 처리하기 위한 강력한 솔루션입니다. 이 가이드를 따르면 다음 방법을 배울 수 있습니다.

데이터베이스 열기 및 생성
객체 저장소 만들기
데이터 추가, 읽기, 업데이트 및 삭제

IndexedDB를 사용하면 데이터를 로컬에 저장하고 인터넷 연결 없이도 작동하는 보다 탄력적인 웹 애플리케이션을 구축할 수 있습니다.

참고자료:

MDN 웹 문서 - IndexedDB API

IndexedDB의 작동 방식, API 방법 및 사용 사례에 대한 종합 가이드입니다.

MDN IndexedDB 가이드
Google 개발자 - IndexedDB

오프라인 지원 웹 앱 구축을 위한 IndexedDB 사용 및 모범 사례를 다루는 자세한 기사입니다.

Google 개발자 - IndexedDB
W3C 인덱스 데이터베이스 API

IndexedDB의 기술 구현 및 구조를 설명하는 W3C의 공식 사양입니다.

W3C IndexedDB 사양