HTML5 웹 데이터베이스를 사용하는 간단한 할 일 목록

Paul Kinlan

소개

웹 데이터베이스는 HTML5의 새로운 기능입니다. 웹 데이터베이스는 사용자의 브라우저 내에서 호스팅되고 유지됩니다. 개발자가 풍부한 쿼리 기능을 갖춘 애플리케이션을 만들 수 있게 되면 온라인과 오프라인에서 작동하는 새로운 유형의 웹 애플리케이션이 등장할 것으로 예상됩니다.

이 도움말의 예시 코드는 매우 간단한 할 일 목록 관리자를 만드는 방법을 보여줍니다. HTML5에서 사용할 수 있는 일부 기능을 대략적으로 살펴봅니다.

자격 요건

이 샘플에서는 네임스페이스를 사용하여 데이터베이스 로직을 캡슐화합니다.

var html5rocks = {};
html5rocks.webdb = {};

비동기 및 트랜잭션

웹 데이터베이스 지원을 사용하는 대부분의 경우 비동기식 API를 사용합니다. 비동기식 API는 비차단 시스템이므로 반환 값을 통해 데이터를 가져오지 않고 정의된 콜백 함수에 전송된 데이터를 가져옵니다.

HTML을 통한 웹 데이터베이스 지원은 트랜잭션 기반입니다. 트랜잭션 외부에서는 SQL 문을 실행할 수 없습니다. 트랜잭션에는 읽기/쓰기 트랜잭션 (transaction())과 읽기 전용 트랜잭션 (readTransaction())의 두 가지 유형이 있습니다. 읽기/쓰기는 전체 데이터베이스를 잠급니다.

1단계: 데이터베이스 열기

데이터베이스에 액세스하려면 먼저 데이터베이스를 열어야 합니다.
데이터베이스의 이름, 버전, 설명, 크기를 정의해야 합니다.

html5rocks.webdb.db = null;

html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
}

html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}

html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
// loadTodoItems is defined in Step 4a
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

2단계: 테이블 만들기

트랜잭션 내에서 CREATE TABLE SQL 문을 실행하여만 테이블을 만들 수 있습니다.

본문 onload 이벤트에서 테이블을 만드는 함수를 정의했습니다. 테이블이 아직 존재하지 않으면 테이블이 생성됩니다.

테이블 이름은 todo이며 열이 3개 있습니다.

  • ID - 순차적으로 증가하는 ID 열
  • todo - 항목의 본문인 텍스트 열
  • added_on: 할 일 항목이 생성된 시간입니다.
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS " +
                "todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}

3단계: 테이블에 데이터 추가

할 일 목록 관리자를 빌드하고 있으므로 데이터베이스에 할 일 항목을 추가할 수 있어야 합니다.

트랜잭션이 생성되고 트랜잭션 내에서 할 일 테이블에 INSERT가 실행됩니다.

executeSql은 실행할 SQL, 쿼리를 바인딩할 매개변수 값 등 여러 매개변수를 사용합니다.

html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
    [todoText, addedOn],
    html5rocks.webdb.onSuccess,
    html5rocks.webdb.onError);
});
}

4단계: 테이블에서 데이터 선택

이제 데이터가 데이터베이스에 있으므로 데이터를 다시 가져오는 함수가 필요합니다. Chrome에서 웹 데이터베이스는 표준 SQLite SELECT 쿼리를 사용합니다.

html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
    html5rocks.webdb.onError);
});
}

이 샘플에서 사용되는 이러한 모든 명령어는 비동기식이며, 따라서 데이터가 트랜잭션 또는 executeSql 호출에서 반환되지 않습니다. 결과는 성공 콜백에 전달됩니다.

4a단계. 테이블에서 데이터 렌더링

테이블에서 데이터를 가져오면 loadTodoItems 메서드가 호출됩니다.

onSuccess 콜백은 두 개의 매개변수를 사용합니다. 첫 번째는 쿼리의 트랜잭션이고 두 번째는 결과 집합입니다. 데이터를 반복하는 것은 매우 간단합니다.

function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}

todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>" + row.todo + 
        " [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" + 
        row.ID +");\'>Delete</a>]</li>";
}

이 메서드 호출의 효과는 할 일 목록이 'todoItems'라는 DOM 요소로 렌더링된다는 것입니다.

5단계: 테이블에서 데이터 삭제

html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
    html5rocks.webdb.onSuccess,
    html5rocks.webdb.onError);
});
}

6단계: 모든 항목 연결

페이지가 로드되면 데이터베이스를 열고 필요한 경우 테이블을 만들고 데이터베이스에 이미 있을 수 있는 할 일 항목을 렌더링합니다.

....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>

<body onload="init();">

DOM에서 데이터를 가져오는 함수가 필요하므로 html5rocks.webdb.addTodo 메서드를 호출합니다.

function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}