HTML - IndexedDB: 브라우저 내 개인 데이터베이스

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 IndexedDB라는 흥미로운 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 여러분이 코드를 한 줄도 적지 않았더라도 이 여정을 안내해 드릴 거예요. 그러니 가상의 안전帽을 쓰고, 시작해 보세요!

HTML - IndexedDB

IndexedDB는 무엇인가요?

IndexedDB는 여러분의 웹 브라우저에 살아있는 작은 데이터베이스입니다. 컴퓨터 안에 작은 파일장을 가지고 있어서, 여러분의 웹 애플리케이션을 위한 다양한 정보를 저장하고 정리할 수 있다고 상상해 보세요. 멋지죠?

IndexedDB를 사용하는 이유는 무엇인가요?

여러분은 "데이터를 저장하는 또 다른 방법이 필요한 이유가 뭐야?"라고 궁금해할 수도 있습니다. 그럼 작은 이야기를 들려드릴게요. 예전에는 브라우저 내 데이터를 저장하기 위해 쿠키와 로컬 스토리지를 사용했어요. 하지만 그것은 코딩 상자에 코끼리를 넣는 것처럼 제한적이고 유연하지 않았습니다.

IndexedDB가 브라우저 스토리지의 슈퍼 헴은 이유는 다음과 같습니다:

기능	설명
저장 용량	쿠키나 로컬 스토리지보다 훨씬 더 많은 데이터를 저장할 수 있습니다
데이터 타입	파일과 블롭을 포함한 다양한 데이터 타입을 지원합니다
인덱싱	데이터를 빠르게 검색할 수 있습니다
트랜잭션	트랜잭션 기반 연산으로 데이터 무결성을 보장합니다
비동기	데이터를 처리할 때 애플리케이션이 동결되지 않습니다

IndexedDB 시작하기

이제 손을 dirt고 실제 코드로 시작해 보겠습니다. 처음에는 어렵게 보일 수 있지만, 단계별로 설명해 드릴게요.

let db;
const request = indexedDB.open("MyFirstDatabase", 1);

request.onerror = function(event) {
console.error("데이터베이스 오류: " + event.target.error);
};

request.onsuccess = function(event) {
db = event.target.result;
console.log("데이터베이스 성공적으로 열렸습니다");
};

request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore("students", { keyPath: "id" });
console.log("오브젝트 스토어 생성");
};

와우! 이것은 많이 받아들이기 어려울 수 있습니다. 이제 설명해 보겠습니다:

db 변수를 선언하여 데이터베이스 연결을 저장합니다.
indexedDB.open()을 사용하여 "MyFirstDatabase"라는 데이터베이스를 엽니다.
세 가지 이벤트 처리기를 설정합니다:

onerror: 문제가 발생했을 때 실행됩니다.
onsuccess: 데이터베이스가 성공적으로 열렸을 때 실행됩니다.
onupgradeneeded: 데이터베이스가 생성되거나 업그레이드되었을 때 실행됩니다.

onupgradeneeded는 데이터베이스 설계자라고 생각해 보세요. 여기서 우리는 데이터베이스 구조를 설계합니다.

IndexedDB에 데이터 추가하기

이제 데이터베이스를 설정했으니, 데이터를 추가해 보겠습니다. 학생 관리 시스템을 만들어 보겠습니다.

function addStudent(student) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.add(student);

request.onerror = function(event) {
console.log("학생 추가 오류: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("학생 성공적으로 추가됨");
};
}

// 사용 예시
addStudent({ id: 1, name: "Alice", grade: "A" });
addStudent({ id: 2, name: "Bob", grade: "B" });

이제 무엇이 일어나고 있는지 설명해 보겠습니다:

트랜잭션을 생성합니다 - 데이터를 안전하게 처리하는 터널이라고 생각해 보세요.
오브젝트 스토어를 가져옵니다 (전통적인 데이터베이스의 테이블과 같습니다).
add()를 사용하여 학생 데이터를 삽입합니다.
성공과 오류 처리기를 설정하여 작업이 잘되었는지 확인합니다.

IndexedDB에서 데이터 가져오기

저장된 데이터가 없으면 무슨 소용이 있을까요? 학생 데이터를 가져오겠습니다:

function getStudent(id) {
const transaction = db.transaction(["students"]);
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("학생 가져오기 오류: " + event.target.error);
};

request.onsuccess = function(event) {
if (request.result) {
console.log("학생 찾음:", request.result);
} else {
console.log("학생 찾지 못함");
}
};
}

// 사용 예시
getStudent(1);

이 함수는 도서관에서 책을 찾아주는 도서관사원과 같습니다:

읽기 전용 트랜잭션을 시작합니다 (데이터를 변경하지 않습니다).
get()을 사용하여 학생의 ID로 데이터를 검색합니다.
학생을 찾으면 자세히 로그를 남기고, 찾지 못하면 학생이 없다고 말합니다.

IndexedDB에서 데이터 업데이트하기

학생들은 성적이 향상되고, 학점이 바뀝니다. 우리는 기록을 업데이트해 보겠습니다:

function updateStudent(id, newGrade) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("학생 업데이트를 위해 학생 가져오기 오류: " + event.target.error);
};

request.onsuccess = function(event) {
const data = event.target.result;
data.grade = newGrade;

const updateRequest = objectStore.put(data);

updateRequest.onerror = function(event) {
console.log("학생 업데이트 오류: " + event.target.error);
};

updateRequest.onsuccess = function(event) {
console.log("학생 성공적으로 업데이트됨");
};
};
}

// 사용 예시
updateStudent(1, "A+");

이 함수는 교사가 성적부를 업데이트하는 것과 같습니다:

학생의 현재 데이터를 가져옵니다.
학점을 수정합니다.
put()을 사용하여 업데이트된 데이터를 데이터베이스로 저장합니다.

IndexedDB에서 데이터 삭제하기

때로는 데이터를 제거해야 합니다. 학생을 제거하는 함수를 추가해 보겠습니다:

function deleteStudent(id) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.delete(id);

request.onerror = function(event) {
console.log("학생 삭제 오류: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("학생 성공적으로 삭제됨");
};
}

// 사용 예시
deleteStudent(2);

이것은 우리의 학생 기록에서 항목을 지우는 것과 같습니다:

"readwrite" 트랜잭션을 시작합니다 (데이터를 변경합니다).
delete() 메서드를 사용하여 학생의 ID로 데이터를 제거합니다.
성공과 오류 처리기를 설정하여 작업이 잘되었는지 확인합니다.

결론

축하합니다! 여러분은 IndexedDB의 세계로 첫 걸음을 내딛었습니다. 우리는 데이터베이스 생성, 추가, 가져오기, 업데이트, 삭제에 대한 기본적인 연산을 다루었습니다. 이러한 연산은 IndexedDB를 사용할 때 반복적으로 사용할 것입니다.

기억하시오, 연습이 완성을 이루는 길입니다. IndexedDB를 사용한 자신만의 작은 프로젝트를 만들어 보세요. 아마도 할 일 목록 앱이나 개인 일기장이 될 수 있습니다. 자주 놀아보면 점점 더 편안해질 것입니다.

IndexedDB는처음에는 복잡해 보일 수 있지만, 웹 애플리케이션을 다음 단계로 이끄는 강력한 도구입니다. 브라우저 내에서 대량의 데이터를 저장하고 관리할 수 있는 초능력 같은 것입니다.

계속 코딩하시고, 호기심을 유지하시고, 과정에서 즐거움을 느끼세요! 누구 knows? 다음 큰 웹 앱이 여러분의 손에 있을지도 모릅니다.

Credits: Image by storyset