[아꿈사/111105] html5 9장 클라이언트측 데이터로 작업하기

3,382 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,382
On SlideShare
0
From Embeds
0
Number of Embeds
613
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

[아꿈사/111105] html5 9장 클라이언트측 데이터로 작업하기

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

×