1. HTML5 & css3
오늘 구현하는 내일의 웹 표준
9장 : 클라이언트측 데이터로 작업하기
아꿈사
http://cafe.naver.com/architect1
최성기
florist.sk@gmail.com
2. 웹 스토리지, 웹 SQL 데이터베이스, 웹 소켓 같은 몇 가지 기능은
HTML5 명세에서 분리되었습니다.
지오로케이션 같은 기능은 명세에 포함됐던 적도 없었습니다.
3부에서 다루는 내용들은 엄밀히 말하면 HTML5가 아닙니다.
표준 명세 확정 과정과 브라우저들의 경쟁으로 인한 혼띾의 기점.
최싞의 브라우저가 지원하게 될 차세대 기술임은 분명.
3. 9장.
클라이언트 측 데이터로 작업하기.
한 번이라도 쿠키가 훌륭한 기능이라고
생각했던 적이 있나요? 책 197 페이지 中
4. Tip 20. Local Storage로 사용자 설정 저장하기
Tip 21. 클라이언트 측 관계형 데이터베이스
Tip 22. 오프라인으로 작업하기
5. Tip 20. Local Storage로 사용자 설정 저장하기
• Local Storage
Web Storage
• Session Storage
Tip 21. 클라이언트 측 관계형 데이터베이스
• Web SQL Database
Tip 22. 오프라인으로 작업하기
• Application Cache
각 단락에서 이야기하는 기술들의 이름이 위와 같은데,
6. Local Storage
Web Storage
Session Storage
클라이언트 데이터
(??)
Web SQL Database
Application Cache
단어의 의미들이 다 비슷비슷해서
9장 내용을 처음 보고 나면 용어들이 헷갈릴 수 있다.
Web SQL Database도 그 자체로는 혼동이 적지만,
7. Local Storage
Web Storage
Session Storage
클라이언트 데이터
(??)
LevelDB
Web SQL Database
IndexedDB
Application Cache
IndexedDB와 LevelDB가 언급되고 나면 다시 헷갈리기 시작한다.
9장의 내용을 살펴본 후, 기술들의 명칭이 헷갈리지 않도록 잘 정리하자.
8. Local Storage
Tip 20.
Local Storage로 Web Storage
사용자 설정 저장하기 Session Storage
Tip 21. Web SQL Database
클라이언트 측
관계형 데이터베이스
IndexedDB LevelDB
Tip 22.
오프라인으로 작업하기 Application Cache
...이렇게 정리되면 만점 입니다.
9. Tip 20. Local Storage
Local Storage로 Web Storage
사용자 설정 저장하기 Session Storage
Tip 21. Web SQL Database
클라이언트 측
관계형 데이터베이스
IndexedDB LevelDB
Tip 22.
오프라인으로 작업하기 Application Cache
10. Web Storage -키/값쌍
쿠키처럼 사용자 로컬 공갂에 데이터를 저장하는 기법이지만
더 방대한 양의 데이터를 다룰 수 있다. (쿠키는 최대 4Kb)
localStorage : 브라우저 세션이 끝나도 값이 사라지지 않는다.
sessionStorage : 브라우저 세션이 끝나면 값이 사라진다.
http://caniuse.com/#search=web storage
12. 저장된 값은 Chrome의 개발자 도구에서 확인 가능.
값은 도메인 단위로 저장되고, 해당 도메인에 종속된다.
다른 사이트에서 데이터에 접근할 수 없음
13. 예제 : 사용자가 설정한 옵션을 localStorage에 저장하기
http://goo.gl/xllJ3
14. 접근할 컨트롤에
적당한 id를 할당.
id=“background_color”
id=“text_color”
id=“text_size”
http://goo.gl/xllJ3
15. function save_settings()
{
localStorage.setItem(“background_color”,
$(“#background_color”).val());
localStorage.setItem(“text_color”, $(“#text_color”).val());
localStorage.setItem(“text_size”, $(“#text_size”).val());
apply_preferences_to_page();
}
function load_settings()
{
var bgcolor = localStorage.getItem(“background_color”);
var text_color = localStorage.getItem(“text_color”);
var text_size = localStorage.getItem(“text_size”);
$(“#background_color”).val(bgColor);
$(“#text_color”).val(text_color);
$(“#text_size”).val(text_size);
apply_preferences_to_page();
}
16. 나머지 세세한 코드 설명은 생략.
돌아가는 예제를 보자.
예제 링크 : http://goo.gl/xllJ3
1. 값을 저장하고 개발자 도구에서 실제 저장된 것을 확인.
2. 브라우저 종료 후 다시 접속했을 때 유지됨을 확인.
17. 브라우저 지원여부 확인
window 객체의 localStorage 메서드 존재여부를 검사.
if (!window.localStorage)
{
// 지원하지 않는 브라우저
}
else
{
// 지원하는 브라우저
}
폴백 방안
1. 서버에 보관 : 자바 스크립트를 껐을 때, 4Kb가 넘을 때.
2. 쿠키를 이용 : Quirksdmode 라이브러리 추천.
18. Local Storage
Tip 20.
Local Storage로 Web Storage
사용자 설정 저장하기 Session Storage
Tip 21. Web SQL Database
클라이언트 측
관계형 데이터베이스
IndexedDB LevelDB
Tip 22.
오프라인으로 작업하기 Application Cache
22. Web SQL Database
클라이언트 사이드에 테이블 형식 데이터를 저장하기 위한 기법.
데이터에 접근하고 다루기 위해 sqlite DB 스타일 쿼리를 허용한다.
데이터의 CRUD(Create,Read,Update,Delete)가 가능.
웹 SQL은 SQLite 데이터베이스에 기초한 것이며, 이러한 점은 명세의
독립성에 영향을 끼칠 수 있습니다. 또한 MS에서 indexedDB에 관심을
보이고 있으므로, IE에서 웹 SQL을 지원할 가능성도 매우 낮습니다.
IndexedDB
클라이언트 사이드에 키/값 쌍 데이터를 저장하기 위한 기법.
데이터에 접근하고 다루기 위해 색인된 DB(IndexedDB) 스타일 쿼리를
이용한다. WebSimpleDB API라고도 부름.
23. 잠시 예젂에 공부했던 내용을 복습해 보아요 ~
http://www.slideshare.net/ohyecloudy/leveldb
27. DB 연결(or 생성)
db = window.openDatabase(
db이름, 버전, 설명, 사이즈, 콜백 );
트랜잭션 실행
db.transaction( function (tx) {
// tx 객체에 트랜잭션의 SQL문을 추가.
} );
SQL문 실행
tx.executeSql(
SQL문, 인자 배열, 성공콜백, 실패콜백 );
책에 소개된 수준의 설명임. 자세한 인터페이스는 W3C 표준문서 참고.
28. 테이블 생성 – 한 개의 SQL문이 포함된 트랜잭션을 실행.
db.trnsaction( function (tx) {
tx.executeSql( “CREATE TABLE notes SQL문
(id INTEGER PRIMARY KEY, title TEXT, note TEXT)”,
[], 인자
function () {
alert( “노트 테이블이 잘 만들어졌습니다!” ); 성공
},
function (tx, error) {
alert( error.message ); 실패
}
);
});
29. 나머지는 그냥 SQL문만 보겠습니다.
작업 명령어
새 노트 만들기 INSERT INTO notes (title, notes)
VALUES( “Test”, “This is a note” );
모든 노트 보기 SELECT id, title, note FROM notes;
특정 노트 보기 SELECT id, title, note FROM notes WHERE id = 1;
노트 수정하기 UPDATE notes SET title = “…”, note = “…” WHERE id = 1;
노트 삭제하기 DELETE FROM notes WHERE id = 1;
참고. 생성된 DB를 지우려면 : 파일 생성 위치에 가서 삭제.
http://www.martinsikora.com/how-to-delete-web-sql-database-in-google-chrome
31. Local Storage
Tip 20.
Local Storage로 Web Storage
사용자 설정 저장하기 Session Storage
Tip 21. Web SQL Database
클라이언트 측
관계형 데이터베이스
IndexedDB LevelDB
Tip 22.
오프라인으로 작업하기 Application Cache
32. Offline Web Applications
cache manifest 파일을 이용해 캐싱할 리소스를 지정하여
오프라인일 때도 페이지를 방문했을 때와 동일하게 동작하도록 하는 기능.
http://caniuse.com/#search=cache
33. 매니페스트로 캐시 정의하기
매니페스트 파일 :
애플리케이션이 오프라인으로 동작하기 위해
브라우저 캐시에 들어있어야 하는 파일의 목록을 적어주는 파일.
브라우저는
1. 매니페스트 파일에 적힌 파일 리스트들과
2. 매니페스트 파일 자체
..를 캐싱한다.
CACHE MANIFEST 이 문자열로 파일이 시작해야 함.
# v = 1.0.0 ‘#’로 시작하면 주석처리.
/style.css
/javascripts/notes.js 캐싱할 파일 리스트
/javascripts/jquery.min.js
34. 매니페스트 파일을 html 문서에 연결
<html manifest=“notes.manifest”>
…
</html>
캐싱된 파일들은 크롬 개발자 도구에서 확인할 수 있다.
35. 웹서버가 매니페스트 파일을 인식하도록 MIME 타입 설정
아파치 서버인 경우, .htaccess 파일에 타입 추가
AddType text/cache-manifest .manifest
기타 책에 언급되지 않은 .manifest 작성 규칙
출처 : HTML5 & API 입문 - 프리렉
1. UTF-8 인코딩
2. 줄바꿈 코드 – ‘nr’, ‘n’, ‘r’
3. 상대 경로를 이용할 때는 manifest를 기준으로 URL 표시
4. 모든 메인 페이지와 같은 도메인에 소속 되어야 함
• JQuery를 사용하는 경우, 외부 호스팅 경로를 쓰지 말고
자체 서버에 사본을 유지해야 캐싱할 수 있다.
36. Local Storage
Tip 20.
Local Storage로 Web Storage
사용자 설정 저장하기 Session Storage
Tip 21. Web SQL Database
클라이언트 측
관계형 데이터베이스
IndexedDB LevelDB
Tip 22.
오프라인으로 작업하기 Application Cache
PT 내용은 끝입니다.
용어가 혼동되지 않도록 주의합시다.
