Web SQL에서 SQLite Wasm으로: 데이터베이스 이전 가이드

원본 비공개 파일 시스템에서 지원하는 SQLite Wasm을 사용하면 지원 중단된 Web SQL 데이터베이스 기술을 다목적으로 대체할 수 있습니다. 이 도움말에서는 Web SQL에서 SQLite Wasm으로 데이터를 이전하는 방법을 안내합니다.

Thomas Steiner

필수 배경

웹 SQL 지원 중단 및 삭제 게시물에서는 웹 SQL 데이터베이스 기술의 지원 중단을 발표했습니다. 기술 자체는 지원 중단될 수도 있지만, 이 기술로 해결되는 사용 사례는 거의 없습니다. 따라서 후속 게시물인 원본 비공개 파일 시스템 지원 브라우저의 SQLite Wasm에서는 Web Assembly (Wasm)로 컴파일되고 원본 비공개 파일 시스템을 기반으로 지원되는 SQLite 데이터베이스를 기반으로 하는 대체 기술 세트에 대해 간략히 설명합니다. 이 도움말에서는 데이터베이스를 Web SQL에서 SQLite Wasm으로 이전하는 방법을 설명합니다.

데이터베이스 마이그레이션

다음 네 단계는 웹 SQL 데이터베이스를 원본 비공개 파일 시스템으로 지원하는 SQLite 데이터베이스를 사용하여 웹 SQL 데이터베이스를 SQLite Wasm으로 마이그레이션하는 개념을 보여줍니다. 이는 웹 SQL 이전 요구사항에 맞게 맞춤설정된 코드의 기반으로 사용할 수 있습니다.

마이그레이션할 웹 SQL 데이터베이스

이 이전 가이드에서는 앱과 관련된 데이터를 보유하는 기존 Web SQL 데이터베이스가 하나 이상 있다고 가정합니다. 아래 스크린샷에는 기분을 심각도로 매핑하는 폭풍우 테이블이 포함된 mydatabase라는 데이터베이스 예시가 있습니다. Chrome DevTools를 사용하면 다음 스크린샷과 같이 디버깅을 위한 웹 SQL 데이터베이스를 확인할 수 있습니다.

Chrome의 DevTools에서 검사한 웹 SQL 데이터베이스 데이터베이스는 mydatabase이며 행 ID, 기분, 심각도라는 세 개의 열이 있는 테이블을 호스팅합니다. 샘플 데이터에는 세 개의 행이 있습니다.

웹 SQL 데이터베이스를 SQL 문으로 변환

사용자에게 투명하게 데이터를 마이그레이션하려면, 즉 사용자가 직접 마이그레이션 단계를 수행할 필요가 없도록 하려면 데이터베이스의 데이터를 애초에 해당 데이터를 만든 원래 SQL 문으로 다시 변환해야 합니다. 이 문제는 이전에 발생한 적이 있으며 이 도움말에 사용된 이전 스크립트(mywebsqldump.js)는 websqldump.js라는 커뮤니티 라이브러리를 기반으로 하며 약간의 조정이 있었습니다. 다음 코드 샘플은 웹 SQL 데이터베이스 mydatabase를 일련의 SQL 문으로 변환하는 데 필요한 코드를 보여줍니다.

websqldump.export({
  database: 'mydatabase',
  version: '1.0',
  success: function(sql) {
    // The SQL statements.
  },
  error: function(err) {
    // Handle the error.
  }
});

이 코드를 실행하면 아래의 SQL 문 문자열이 생성됩니다.

CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');

SQLite Wasm으로 데이터 가져오기

남은 것은 SQLite Wasm의 컨텍스트에서 이러한 SQL 명령을 실행하는 것입니다. SQLite Wasm 실행 설정에 관한 자세한 내용은 원본 비공개 파일 시스템에서 지원하는 브라우저의 SQLite Wasm 도움말을 참고하세요. 요점은 다시 아래에 있습니다. 이 코드는 필수 HTTP 헤더가 올바르게 설정된 상태로, 라이브러리가 자동으로 생성하는 작업자에서 실행해야 합니다. npm에서 @sqlite.org/sqlite-wasm 패키지를 설치할 수 있습니다.

import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';

(async () => {
  try {
    const promiser = await new Promise((resolve) => {
      const _promiser = sqlite3Worker1Promiser({
        onready: () => {
          resolve(_promiser);
        },
      });
    });

    let response;

    response = await promiser('open', {
      filename: 'file:mydatabase.db?vfs=opfs',
    });
    const { dbId } = response;

    const sql = `
      CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
      INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
      INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
      INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');`
    await promiser('exec', { dbId, sql });

    await promiser('close', { dbId });
  } catch (err) {
    if (!(err instanceof Error)) {
      err = new Error(err.result.message);
    }
    console.error(err.name, err.message);
  }
})();

이 코드를 실행한 후 OPFS Explorer Chrome DevTools 확장 프로그램을 사용하여 가져온 데이터베이스 파일을 검사합니다. 이제 두 개의 파일이 있습니다. 하나는 실제 데이터베이스가 있고 다른 하나는 저널링 정보가 있습니다. 이 두 파일은 원본 비공개 파일 시스템에 있으므로 OPFS 탐색기 확장 프로그램을 사용해야 볼 수 있습니다.

OPFS Explorer Chrome DevTools로 원본 비공개 파일 시스템 검사 두 개의 파일이 있습니다. 하나는 mydatabase.db이고 다른 하나는 mydatabase.db-journal입니다.

가져온 데이터가 초기 웹 SQL 데이터와 동일한지 실제로 확인하려면 mydatabase.db 파일을 클릭합니다. 그러면 OPFS 탐색기 확장 프로그램에 Save File 대화상자가 표시되어 사용자가 볼 수 있는 파일 시스템에 파일을 저장할 수 있습니다. 데이터베이스 파일이 저장된 상태에서 SQLite 뷰어 앱을 사용하여 데이터를 탐색합니다. Project Fugu API 쇼케이스에는 브라우저에서 SQLite를 사용하기 위한 앱이 몇 가지 나와 있습니다. 예를 들어 Sqlime — SQLite 플레이그라운드를 사용하면 하드 디스크에서 SQLite 데이터베이스 파일을 열고 데이터베이스에서 쿼리를 실행할 수 있습니다. 아래 스크린샷에서 볼 수 있듯이, 폭풍우 테이블을 SQLite로 올바르게 가져왔습니다.

Sqlime SQLite 플레이그라운드 도구에서 mydatabase.db 파일 살펴보기 레인스톰 제한 10에서 SQL 쿼리 선택 별표가 실행되어 웹 SQL의 초기 샘플 데이터에서 행 3개가 실행되는 앱이 표시됩니다.

Web SQL 스토리지 해제 중

놀랍게도 Web SQL 데이터베이스를 삭제하는 것은 불가능하지만 데이터를 SQLite Wasm으로 이전한 후 더 이상 사용되지 않는 Web SQL 테이블을 삭제하여 일부 스토리지를 확보해야 합니다. 웹 SQL 데이터베이스의 모든 테이블을 나열하고 JavaScript를 사용하여 삭제하려면 다음 스니펫과 같은 코드를 사용합니다.

const dropAllTables = () => {
  try {
    db.transaction(function (tx) {
      tx.executeSql(
        "SELECT name FROM sqlite_master WHERE type='table' AND name !='__WebKitDatabaseInfoTable__'",
        [],
        function (tx, result) {
          const len = result.rows.length;
          const tableNames = [];
          for (let i = 0; i < len; i++) {
            const tableName = result.rows.item(i).name;
            tableNames.push(`'${tableName}'`);
            db.transaction(function (tx) {
              tx.executeSql('DROP TABLE ' + tableName);
            });
          }
          console.log(`Dropped table${tableNames.length > 1 ? 's' : ''}: ${tableNames.join(', ')}.`);
        }
      );
    });
  } catch (err) {
    console.error(err.name, err.message);
  }
};

이전 후 데이터 작업

데이터를 이전한 후에는 이 시작하기 코드 샘플에 설명된 대로 데이터를 사용합니다. 자세한 내용은 SQLite Wasm API 참조를 참고하세요. 다시 한번 말씀드리지만 원본 비공개 파일 시스템을 스토리지 백엔드로 사용하는 경우 작업자에서 SQLite Wasm에 액세스해야 합니다.

테스트하기

이 데모를 사용하면 웹 SQL 데이터베이스를 샘플 데이터로 채운 다음 웹 SQL 데이터를 SQL 문으로 덤프합니다. 그러면 이 데이터를 원본 비공개 파일 시스템에서 지원하는 SQLite Wasm으로 가져올 수 있습니다. 마지막으로 사용되지 않는 웹 SQL 데이터를 삭제하여 스토리지를 확보합니다. 패치된 mywebsqldump.js 파일을 포함한 전체 구현은 소스 코드를 확인하세요.

web-sql-to-sqlite-wasm.glitch.me의 데모 앱

결론

사용자에게 투명한 방식으로 원본 비공개 파일 시스템에서 지원하는 SQLite Wasm으로 Web SQL 데이터베이스를 이전할 수 있습니다. 이제 데이터가 SQLite 데이터베이스의 원본 비공개 파일 시스템에서 호스팅되고 더 이상 웹 SQL에 상주하지 않는다는 사실을 눈치채지 못합니다. 전반적으로 Web SQL에서 SQLite로 이전하는 것은 애플리케이션의 장기적인 안정성과 확장성을 보장하고자 하는 웹 개발자에게 필요한 단계입니다. 이 프로세스에는 초기 작업이 필요할 수 있지만, 보다 강력하고 유연하며 무엇보다 미래에 대비한 데이터베이스 솔루션의 이점은 투자할 가치가 충분합니다.