html5
CHAPTER 26 / 33
읽기 약 2분
FUNCTION
브라우저 데이터베이스: IndexedDB
핵심 개념
로컬 스토리지보다 훨씬 많은 양의 복잡한 데이터를 저장할 수 있는 브라우저 안의 작은 도서관이에요.
코드 분석
<button onclick='openDB()'>DB 연결 및 데이터 생성</button>
<div id='result'></div>
<script>
function openDB() {
const request = indexedDB.open('DemoDB', 1);
request.onsuccess = (e) => {
document.getElementById('result').innerHTML = '성공적으로 DB를 열었습니다.';
};
request.onerror = (e) => {
document.getElementById('result').innerHTML = 'DB 오픈 실패.';
};
}
</script>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 IndexedDB 코드의 트랜잭션 처리, version upgrade, 에러 핸들링 허점을 찾아 Dexie.js 없이도 안전한 패턴으로 리팩토링해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
IndexedDB로 오프라인 노트앱, 이미지 캐시, 검색 인덱스를 실전 코드 3개로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 IndexedDB 사용을 분석해서 쿼리 성능, 인덱스 설계, 마이그레이션 전략, 용량 한계를 종합 정리해줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
2026년 클라이언트 DB 시장에서 IndexedDB vs Dexie.js vs RxDB vs SQLite WASM이 각각 어디에 적합한지 솔직히 알려줘.
⭐ 이것만 기억하세요
브라우저 데이터베이스: IndexedDB는 이 3가지만 확실히 잡으세요
1.localStorage는 문자열만 저장 가능하고 5MB 제한이 있어서 복잡한 데이터 구조를 다루기 어렵습니다
2.IndexedDB는 객체 저장소 기반 비동기 DB로, 인덱스 검색과 트랜잭션을 지원하며 수백 MB까지 저장 가능합니다
3.다음 챕터에서 브라우저 주소 표시줄을 JS로 제어하는 History API를 배웁니다
공유하기
진행도 26 / 33