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

SQLite Wasm이 오리진 비공개 파일 시스템에서 지원되는 덕분에, 지원 중단된 웹 SQL 데이터베이스 기술을 다목적으로 대체할 수 있습니다. 이 도움말에서는 웹 SQL에서 SQLite Wasm으로 데이터를 이전하는 방법을 안내합니다.

배경(필수)

웹 SQL 지원 중단 및 삭제 게시물에서 웹 SQL 데이터베이스 기술 지원 중단을 발표했습니다. 기술 자체는 지원 중단될 수 있지만 이 기술로 다뤄지는 사용 사례는 대부분 그렇지 않습니다. 따라서 후속 게시물인 원본 비공개 파일 시스템으로 지원되는 브라우저에서 SQLite Wasm이 작성된 후속 게시물에서는 SQLite 데이터베이스를 기반으로 웹 어셈블리에 컴파일 (Wasm)하고 원본 비공개 파일 시스템으로 뒷받침되는 대체 기술 세트를 설명합니다. 마지막으로 이 도움말에서는 데이터베이스를 웹 SQL에서 SQLite Wasm으로 이전하는 방법을 설명합니다.

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

다음 4단계에서는 SQLite 데이터베이스를 원본 비공개 파일 시스템으로 지원하는 SQLite Wasm으로 웹 SQL 데이터베이스를 이전하는 개념의 개념을 보여줍니다. 이는 웹 SQL 이전 요구사항에 따라 맞춤설정된 자체 코드의 기반이 될 수 있습니다.

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

이 이전 가이드에서는 앱과 관련된 데이터를 보관하는 기존 웹 SQL 데이터베이스가 하나 (또는 여러 개) 있다고 가정합니다. 아래 스크린샷에는 기분을 심각도에 매핑하는 폭풍우 표가 있는 mydatabase라는 데이터베이스 예를 확인할 수 있습니다. Chrome DevTools를 사용하면 다음 스크린샷과 같이 디버깅용 웹 SQL 데이터베이스를 확인할 수 있습니다.

웹 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 Explorer 확장 프로그램을 사용해야 볼 수 있습니다.

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

웹 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 문으로 덤프합니다. 그런 다음 이 데이터를 원본 비공개 파일 시스템이 지원하는 SQLite Wasm으로 가져올 수 있습니다. 마지막으로 사용되지 않는 웹 SQL 데이터를 삭제하여 스토리지를 확보합니다. 소스 코드에서 패치된 mywebsqldump.js 파일을 포함하여 전체 구현을 확인합니다.

결론

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