[html] Web SQL과의 데이터 연동

22 Dec 2023

html

웹 개발에서 데이터베이스 연동은 중요한 부분입니다. 사용자의 정보 저장, 검색, 수정 등을 위해 데이터베이스를 사용하게 됩니다. 이번 글에서는 Web SQL 데이터베이스를 사용하여 웹 애플리케이션에 데이터를 저장하고 관리하는 방법에 대해 알아보겠습니다.

Web SQL 데이터베이스란?

Web SQL 데이터베이스는 클라이언트 측에서 관계형 데이터를 저장하고 쿼리할 수 있는 임베디드 데이터베이스입니다. 이는 HTML5 명세의 일부로서, 웹 브라우저 내에서 SQL 쿼리를 실행할 수 있는 기능을 제공합니다.

Web SQL 데이터베이스 연동하기

Web SQL 데이터베이스를 사용하기 위해서는 먼저 데이터베이스를 생성하고 연결해야 합니다. 아래는 간단한 예제 코드입니다.

// 데이터베이스 연결
var db = openDatabase('mydb', '1.0', 'My database', 2 * 1024 * 1024);

// 데이터베이스 생성
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, name, age)');
});

위 코드에서 openDatabase 함수를 사용하여 데이터베이스를 열고, transaction 함수를 사용하여 데이터베이스 트랜잭션을 시작합니다. 그 후 executeSql 함수를 사용하여 SQL 쿼리를 실행하여 테이블을 생성합니다.

Web SQL 데이터베이스를 사용한 데이터 조작

데이터베이스에 데이터를 추가, 수정, 삭제하고 조회하는 방법은 SQL 쿼리를 사용하여 수행할 수 있습니다. 아래는 데이터를 추가하고 조회하는 예제 코드입니다.

// 데이터 추가
db.transaction(function (tx) {
  tx.executeSql('INSERT INTO users (id, name, age) VALUES (1, "John Doe", 30)');
});

// 데이터 조회
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM users', [], function (tx, results) {
    var len = results.rows.length, i;
    for (i = 0; i < len; i++) {
      console.log(results.rows.item(i).name + ' (' + results.rows.item(i).age + ')');
    }
  });
});

위 코드에서 INSERT INTO 구문을 사용하여 데이터를 추가하고, SELECT * FROM 구문을 사용하여 모든 사용자를 조회합니다.

결론

Web SQL 데이터베이스는 클라이언트 측에서 간단한 데이터베이스 기능을 제공하여 웹 애플리케이션에서 데이터를 저장하고 관리하는 데 유용합니다. 하지만 Web SQL 데이터베이스는 HTML5 명세에서는 더 이상 권장하지 않는 기술이므로, IndexedDB나 Web Storage와 같은 대안 기술을 고려하는 것이 좋습니다.

참고 자료

이상으로 Web SQL 데이터베이스와의 데이터 연동에 관한 내용을 살펴보았습니다. 감사합니다.