Web SQL은 사용자의 브라우저에서 웹 애플리케이션을 위한 클라이언트 측 데이터베이스를 구현하는 데 사용됩니다. Web SQL 데이터베이스에 데이터를 추가, 조회, 수정, 삭제하는 등의 작업을 수행하기 위해 SQL 쿼리를 사용해야 합니다.

이 포스트에서는 Web SQL 데이터베이스에서의 쿼리 작성 방법에 대해 살펴보겠습니다.

Web SQL 데이터베이스 열기

Web SQL 데이터베이스를 열기 위해 다음과 같은 코드를 사용할 수 있습니다.

var db = openDatabase('mydb', '1.0', 'My first database', 2 * 1024 * 1024);

위 코드는 ‘mydb’라는 이름의 데이터베이스를 버전 ‘1.0’으로 열고, 2MB의 크기로 생성합니다.

쿼리 실행

다음은 Web SQL 데이터베이스에서의 쿼리를 실행하는 예제입니다.

db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS user (id unique, name)');
});

위 코드는 ‘user’라는 테이블이 존재하지 않을 경우에만 해당 테이블을 생성합니다.

데이터 추가

새로운 데이터를 추가하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

db.transaction(function(tx) {
  tx.executeSql('INSERT INTO user (id, name) VALUES (1, "Alice")');
});

위 코드는 ‘user’ 테이블에 새로운 사용자를 추가합니다.

데이터 조회

데이터베이스에서 데이터를 조회하기 위해서는 다음과 같이 코드를 작성할 수 있습니다.

db.transaction(function(tx) {
  tx.executeSql('SELECT * FROM user', [], function(tx, result) {
    for (var i = 0; i < result.rows.length; i++) {
      console.log('Id: ' + result.rows.item(i).id + ', Name: ' + result.rows.item(i).name);
    }
  });
});

위 코드는 ‘user’ 테이블에서 모든 데이터를 조회하고, 각 데이터의 id와 name을 콘솔에 출력합니다.

데이터 수정

데이터를 수정하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

db.transaction(function(tx) {
  tx.executeSql('UPDATE user SET name = "Bob" WHERE id = 1');
});

위 코드는 ‘user’ 테이블에서 id가 1인 데이터의 이름을 “Bob”으로 수정합니다.

데이터 삭제

데이터를 삭제하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

db.transaction(function(tx) {
  tx.executeSql('DELETE FROM user WHERE id = 1');
});

위 코드는 ‘user’ 테이블에서 id가 1인 데이터를 삭제합니다.

마치며

이제 Web SQL 데이터베이스에서의 쿼리 작성 방법에 대해 알아보았습니다. 데이터베이스를 열고, 쿼리를 실행하고, 데이터를 추가, 조회, 수정, 삭제하는 등의 작업을 수행하기 위해 위의 예제 코드를 참고하시기 바랍니다.

더 많은 정보가 필요하다면, MDN web docs에서 자세한 내용을 확인할 수 있습니다.