IndexedDB 응용 프로그램 디버깅

IndexedDB는 JavaScript 개발자들이 인터넷을 연결하지 않은 상태에서도 사용자의 로컬 클라이언트에서 데이터를 저장, 검색 및 처리할 수 있는 W3C 작업 초안입니다. 이 블로그 포스트에서는 IndexedDB 응용 프로그램을 디버그하기 위해 내부적으로 사용하는 도구인 IDBExplorer를 설명합니다. IDBExplorer로 데이터베이스 스키마, 개체 저장소 내용, 인덱스 정보를 볼 수 있습니다.

예시 IndexedDB 앱을 통해 도구 살펴보기

설명을 위해 IndexedDB로 제 신년 계획을 추적하는 응용 프로그램을 만들어 보았습니다. 이 프로그램은 로컬(웹 페이지를 탐색하는 시스템)에서 계획을 저장 및 액세스하고 추가 또는 편집할 수 있도록 합니다. "Done That(목표 달성)!" 버튼은 선택한 계획을 목록에서 제거하며 데이터베이스에서 관련한 내부 정보도 함께 제거합니다.

IndexedDB는 데이터베이스를 정보 컨테이너로 정의합니다. 각 데이터베이스에는 JavaScript 개체를 저장하는 개체 저장소가 포함되어 있습니다. 각 개체에는 API를 사용하여 쿼리할 수 있는 특성이 포함되어 있습니다. 관계형 데이터베이스로 설명하자면 개체 저장소는 테이블에 해당하며 개체 저장소의 각 JavaScript는 레코드를 나타낸다고 할 수 있습니다. 하지만 IndexedDB 개체 저장소에 저장된 개체는 불투명 엔터티로 취급됩니다. 또한 이러한 개체들은 동일한 속성을 가지고 있지 않습니다.

JavaScript 개체가 관계형 데이터베이스 레코드와 비슷하다면 해당 개체의 속성은 테이블의 열(또는 필드)로 간주할 수 있습니다. 결론적으로 IndexedDB로 개체 저장소에서 레코드를 검색하는데 사용할 수 있는 개체 속성을 식별하는 인덱스를 정의할 수 있는 것입니다. 따라서 인덱스로 트래버스가 가능해지며 JavaScript 개체의 특성 값을 사용하여 IndexedDB 데이터를 검색할 수 있게 됩니다.

IndexedDB로 각 도메인이 여러 데이터베이스를 포함할 수 있습니다. 이 예시는 "NewYear"라는 데이터베이스 하나만을 사용합니다. 앱은 계획을 NewYear 데이터베이스 안의 개체 저장소 "Resolutions"에 저장합니다. 각 계획은 다음과 같은 속성을 가진 JavaScript 개체입니다.

• priorityId: 계획을 중요도별로 분리
• name: 계획 이름
• occurrenceId: 계획을 얼마나 자주 실천해야 하는지 추적
• dueDate: 계획 완료 일자
• createdDate: 계획이 개체 저장소에 추가된 내부 날짜
• categoryId: 계획 활동의 유형 정의

모든 속성이 응용 프로그램의 UI에 표시되는 것은 아닙니다. 어떤 경우에는 속성이 내부에서만 사용되기도 합니다(예:createdDate).

IDBExplorer 도구가 개체 저장소 "Resolutions"의 내용을 표시하는 방법은 다음과 같습니다.

또한 개체 저장소 "Resolutions"에는 앱이 priorityId 속성을 사용하여 개체를 쿼리할 수 있도록 하는 "priorityId"라는 priorityId 속성에 대한 인덱스가 포함되어 있습니다. 각 priorityId 값에 대한 설명은 개체 저장소 "Priorities"에서 찾을 수 있으며 occurrenceId 값에 대한 설명은 개체 저장소 "Occurrences"에서 찾을 수 있습니다. 또한 categoryId 값의 설명은 개체 저장소 "Categories"에서 찾을 수 있습니다.

이 도구는 이러한 관계를 설명하기 위해 트리 계층 구조를 사용합니다.

IDBExplorer 도구가 제 데이터베이스에 5개의 계획이 있는 것을 보여줍니다(높은 중요도 작업 둘, 중간 중요도 둘, 낮은 중요도 하나).

응용 프로그램을 사용하여 새 계획을 추가할 수 있습니다.

응용 프로그램이 각각의 개체 저장소에서 Occurrence, Priority, Category 필드의 값을 커서를 사용하여 검색하고 사용자에게 보여줍니다. IDBExplorer 도구로 개체 저장소에 이러한 값이 어떻게 존재하고 있는지 볼 수 있습니다. 예를 들어 개체 저장소 Categories를 선택하면 사용 가능한 카테고리 및 설명이 표시됩니다.

"WorkOn" 화면에서 계획을 선택하고 "Edit(편집)"를 선택하면 계획을 업데이트할 수 있습니다. 계획을 수정한 후 "Update(업데이트)" 버튼을 선택하면 변경 사항이 적용되며 개체 저장소 "Resolutions"에서 값이 업데이트됩니다.

내 응용 프로그램에서 IDBExplorer 사용

메트로 스타일 앱 또는 웹 사이트에 IDBExplorer 도구를 포함할 수 있습니다. 하지만 이 도구를 응용 프로그램과 함께 배포하지 않을 것을 권장합니다.

사이트에 도구를 추가하려면 IDBExplorer 패키지의 내용을 복사하고 압축 해제하십시오. 응용 프로그램은 iframe 요소 또는 새 창을 사용하는 IDBExplorer 폴더 안의 IDBExplorer.html 파일에 연결되어 있어야 합니다.

이 예시에서는 IDBExplorer를 iframe 요소 안에 호스트하기로 했습니다. . 하지만 일반적인 개발을 위해서는 이 URI를 새 창에 호스트하는 것을 권장합니다. 이는 사이트의 사용자 인터페이스에 영향을 미치지 않으면서 데이터베이스와 응용 프로그램을 디버깅할 수 있는 동일한 경험을 제공합니다.

IDBExplorer를 호스팅하는 경우 쿼리 문자열을 사용하여 데이터베이스를 전달해야 합니다. 이 예시에서는 iframe 요소의 src 속성을 사용하였습니다.

<iframe id="debuggerId" class="debuggerContainer" src="IDBExplorer/IDBExplorer.html?name=NewYear"></iframe>

이 기능을 메트로 스타일 앱에서 호스팅할 계획이라면 메트로 스타일 앱이 전체 화면에서 실행된다는 점을 기억하시기 바랍니다. 따라서 새 창을 여는 것보다 이 URL을 탐색하는 것이 좋습니다(응용 프로그램으로 돌아갈 수 있게 하려면 IDBExplorer.html 파일에 Back(뒤로 가기) 버튼을 추가해야 합니다.). 대신 iframe 요소를 추가하여 도구가 그 안에 나타나도록 할 수도 있습니다.

이 도구를 사용해 본 소감을 알려 주시면 감사하겠습니다.

- Internet Explorer 수석 프로그램 관리자, Israel Hilerio 박사