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

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

Thomas Steiner

필수 배경

Web SQL 지원 중단 및 삭제 게시물에서 Web SQL 데이터베이스 기술의 지원 중단을 발표했습니다. 기술 자체는 지원 중단될 수 있지만 기술에서 다루는 사용 사례는 그렇지 않습니다. 따라서 후속 게시물인 출처 비공개 파일 시스템에 의해 지원되는 브라우저의 SQLite Wasm에서는 SQLite 데이터베이스를 기반으로 하며 WebAssembly (Wasm)로 컴파일되고 출처 비공개 파일 시스템에 의해 지원되는 대체 기술 세트를 설명합니다. 마지막으로 이 도움말에서는 데이터베이스를 웹 SQL에서 SQLite Wasm으로 마이그레이션하는 방법을 보여줍니다.

데이터베이스 이전

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

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

이 이전 가이드의 기본 가정은 앱과 관련된 데이터를 보유한 기존 웹 SQL 데이터베이스가 하나 이상 있다는 것입니다. 아래 스크린샷에는 mydatabase라는 데이터베이스 예시와 함께 분위기를 심각도에 매핑하는 rainstorms 테이블이 있습니다. Chrome DevTools를 사용하면 다음 스크린샷과 같이 디버깅을 위해 Web SQL 데이터베이스를 볼 수 있습니다.

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

Web 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 헤더가 올바르게 설정된 상태에서 라이브러리가 자동으로 만드는 Worker에서 실행되어야 합니다. 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 Explorer 확장 프로그램을 사용하여 확인해야 합니다.

OPFS Explorer Chrome DevTools로 출처 비공개 파일 시스템 검사 mydatabase.db와 mydatabase.db-journal이라는 두 파일이 있습니다.

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

Sqlime SQLite 플레이그라운드 도구에서 mydatabase.db 파일을 살펴봅니다. 앱에 실행 중인 SQL 쿼리 select star from rainstorms limit 10이 표시되어 있으며, 이로 인해 Web SQL의 초기 샘플 데이터에서 세 행이 표시됩니다.

Web SQL 스토리지 해제

놀랍게도 웹 SQL 데이터베이스를 삭제할 수 없지만 데이터를 SQLite Wasm으로 이전한 후에는 더 이상 사용되지 않는 웹 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 참조를 참고하세요. 출처 비공개 파일 시스템을 저장소 백엔드로 사용하는 경우 Worker에서 SQLite Wasm에 액세스해야 합니다.

테스트하기

이 데모를 사용하면 샘플 데이터로 웹 SQL 데이터베이스를 채운 다음 웹 SQL 데이터를 SQL 문으로 덤프할 수 있습니다. 이 SQL 문은 출처 비공개 파일 시스템을 기반으로 SQLite Wasm으로 가져옵니다. 마지막으로 사용하지 않는 웹 SQL 데이터를 삭제하여 저장용량을 확보합니다. 패치된 mywebsqldump.js 파일을 포함하여 전체 구현에 관한 소스 코드를 확인합니다.

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

결론

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