jQuery Mobile 도서 관리 앱 — multi-page + WebSQL 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 도서 관리 앱 —
multi-page + WebSQL 완전 정리

5개 page를 한 HTML에, CRUD 4가지 동작을 모바일 앱처럼

시작 오늘 분석할 코드

이번 코드는 지금까지 배운 jQM 위젯의 종합편이다. 한 HTML 안에 5개 page(메뉴, 입력, 수정, 삭제, 검색)를 두고 WebSQL DB에 도서 정보를 CRUD 한다.

전체 구조 — 5개 page

page0

홈 메뉴
4개 작업으로 이동하는 listview

page1

도서 추가
장르·도서명 입력 → INSERT

page2

도서 수정
검색 → 변경 → UPDATE

page3

도서 삭제
검색 → DELETE

page4

전체 조회
처음/이전/다음/마지막 + 검색

---

용어 핵심 키워드

multi-page한 HTML에 여러 data-role="page"

openDB / createTableWebSQL 초기화 — dbHandle.js

insertBook / update / deleteCRUD 4가지 함수 — JS 측에서 정의

listBook전체 조회 + 페이지 이동

selectmenu('refresh')jQM select 위젯 강제 갱신

data-direction="reverse"Back 버튼 — 슬라이드 역방향

---

1 $(document).ready — 모든 핸들러를 한 번에

코드 시작 부분은 모든 버튼 클릭 핸들러를 한꺼번에 등록한다. DOM이 준비된 후 한 번만 실행된다.

$(document).ready(function() { openDB(); // DB 열기 createTable(); // 테이블 생성 (이미 있으면 무시) $('#submit1').click(insertBook); $('#submit2').click(updateBook); $('#submit3').click(deleteBook); $('#search4').click(function() { var name = $('#sBookName4').val(); selectBook4(name); }); … });

---

2 multi-page 패턴

지금까지는 한 HTML에 한 page였다. jQM의 강점은 여러 page를 한 파일에 두고 href="#page1"로 자유롭게 이동할 수 있다는 점이다.

• 처음 로드 시 첫 번째 page만 표시, 나머지는 숨김
• 페이지 전환 시 jQM이 자동으로 슬라이드 애니메이션
• 실제 페이지 이동(서버 요청)이 아닌 클라이언트 측 전환 — 빠름
• Back/Home 버튼은 슬라이드 방향만 다르게

---

3 모든 페이지에 공통된 navbar

page1~4는 같은 navbar(입력/수정/삭제/전체검색)를 가진다. 어느 페이지에서든 다른 작업으로 한 클릭에 갈 수 있다.

<div data-role="navbar"> <ul> <li><a href="#page1">입력</a></li> <li><a href="#page2">수정</a></li> <li><a href="#page3">삭제</a></li> <li><a href="#page4">전체검색</a></li> </ul> </div>

⚙ 중복 코드 주의 — 같은 navbar가 4번 반복된다. 실무에선 JS로 한 번 그려 모든 page에 동적 삽입하거나, jQM의 external panel을 사용한다.

---

4 CRUD 4가지 동작

화면	동작	SQL
page1 추가	insertBook()	INSERT INTO books ...
page2 수정	selectBook2 → updateBook()	SELECT → UPDATE
page3 삭제	selectBook3 → deleteBook()	SELECT → DELETE
page4 조회	selectBook4 / listBook	SELECT (페이징)

⚠ WebSQL은 deprecated — 본 코드의 openDB·createTable은 브라우저의 WebSQL API를 쓴다. 표준이 아니라 폐기됐다. 신규 프로젝트에선 IndexedDB나 서버 API + REST를 사용해야 한다.

---

반응형

5 selectmenu('refresh') — 위젯 갱신

JS로 select의 값을 바꾸면 jQM 위젯이 자동으로 갱신되지 않는다. 사용자에게 보이는 모양이 데이터와 어긋난다.

$('#bookType1').val('미정').attr('selected', 'selected'); $('#bookType1').selectmenu('refresh'); // ⭐ 화면 강제 갱신

refresh를 호출하면 jQM이 새 데이터로 위젯을 다시 그린다. 모든 jQM 위젯에 같은 패턴이 있다 — checkboxradio('refresh'), slider('refresh') 등.

---

6 페이징 (first/prev/next/last)

page4는 전체 조회 + 페이지 이동이 가능하다. 4개 버튼이 같은 listBook()을 부르되 전역 변수 position의 값만 바꾼다.

$('#first').click(function() { position = 'first'; listBook(); }); $('#prev').click(function() { position = 'prev'; listBook(); }); $('#next').click(function() { position = 'next'; listBook(); }); $('#last').click(function() { position = 'last'; listBook(); });

listBook()은 position을 보고 적절한 SQL OFFSET을 계산해 SELECT를 날린다.

---

7 ui-grid-a/b/c — 버튼 가로 정렬

본 코드의 fieldset 안에 ui-grid-a, ui-grid-b가 있다. 이건 버튼들을 가로로 균등 분할하는 jQM 클래스.

• ui-grid-a — 2열 (50% / 50%)
• ui-grid-b — 3열 (33% / 33% / 33%)
• ui-grid-c — 4열
• 안에 ui-block-a, ui-block-b 식으로 각 셀 정의

---

8 본 코드의 오타와 개선점

• 오타: vlaue="미정" 두 곳에 (value의 오타)
• label for 매칭 일부 누락 (BookName1 대신 bookName1이어야)
• 중복 코드: navbar/header가 4페이지에 같음
• WebSQL 의존 — 현대 브라우저에서 더 이상 작동 X

---

9 자주 하는 실수

실수	증상	해결
핸들러를 ready() 밖에서	요소 못 찾음	ready 안에서 등록
JS로 select 값 바꿨는데 화면 그대로	위젯이 옛 값 표시	.selectmenu('refresh')
page id 충돌	전환 시 잘못된 페이지 표시	id 유일하게
Back 버튼에 직접 page id	전환 방향 어색	data-rel="back"
WebSQL 사용	모던 Chrome에서 작동 X	IndexedDB 또는 서버 API

---

10 현대식 대안

오늘날 같은 앱을 만든다면:

• SPA 프레임워크 — React, Vue, Svelte로 multi-page 라우팅
• 저장소 — IndexedDB(브라우저 only) 또는 서버 REST API
• UI 라이브러리 — Bootstrap, Material UI, Tailwind
• 상태 관리 — Redux, Zustand, Pinia
• 모바일 앱 — React Native, Flutter, Capacitor

---

핵심 한 줄 요약

multi-page한 HTML에 5개 page — 빠른 전환

$(document).ready 일괄모든 핸들러 한 번에 등록

CRUDinsert / update / delete / select 4동작

selectmenu('refresh')JS로 값 바꾼 후 위젯 강제 갱신

ui-grid-a/b/c2/3/4열 버튼 가로 정렬

WebSQLdeprecated — IndexedDB 권장

data-rel="back"Back 버튼 — 슬라이드 역방향