Your SlideShare is downloading. ×
  • Like
[아꿈사/111105] html5 9장 클라이언트측 데이터로 작업하기
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 2,576 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,576
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 StorageTip 21. 클라이언트 측 관계형 데이터베이스 • Web SQL DatabaseTip 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 CacheIndexedDB와 LevelDB가 언급되고 나면 다시 헷갈리기 시작한다.9장의 내용을 살펴본 후, 기술들의 명칭이 헷갈리지 않도록 잘 정리하자.
  • 8. Local StorageTip 20.Local Storage로 Web Storage사용자 설정 저장하기 Session StorageTip 21. Web SQL Database클라이언트 측관계형 데이터베이스 IndexedDB LevelDBTip 22.오프라인으로 작업하기 Application Cache...이렇게 정리되면 만점 입니다.
  • 9. Tip 20. Local StorageLocal Storage로 Web Storage사용자 설정 저장하기 Session StorageTip 21. Web SQL Database클라이언트 측관계형 데이터베이스 IndexedDB LevelDBTip 22.오프라인으로 작업하기 Application Cache
  • 10. Web Storage -키/값쌍쿠키처럼 사용자 로컬 공갂에 데이터를 저장하는 기법이지만더 방대한 양의 데이터를 다룰 수 있다. (쿠키는 최대 4Kb)localStorage : 브라우저 세션이 끝나도 값이 사라지지 않는다.sessionStorage : 브라우저 세션이 끝나면 값이 사라진다. http://caniuse.com/#search=web storage
  • 11. localStorage 인터페이스.localStorage.setItem( 키, 값 );var retVal = localStorage.getItem( 키 );sessionStorage는localStorage 객체 대신 sessionStorage 객체 쓰면 됨.
  • 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 StorageTip 20.Local Storage로 Web Storage사용자 설정 저장하기 Session StorageTip 21. Web SQL Database클라이언트 측관계형 데이터베이스 IndexedDB LevelDBTip 22.오프라인으로 작업하기 Application Cache
  • 19. http://dev.w3.org/html5/webdatabase/
  • 20. 책 227 페이지이 책에서 웹 SQL을 다루는 이유는다수의 브라우저가 현재 이 명세를 지원하기 때문.IndexedDB 지원 브라우저는 젂혀 없지만웹 SQL DB는 지금 당장 프로젝트에 쓸 수 있다. 책 210 페이지.
  • 21. unofficial 인 듯.발표자료 작성 시점 기준(11-10-30) 브라우저별 지원 상황
  • 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
  • 24. 짜식이날로 먹고 있어.. -_-+
  • 25. 예제 : 내용을 클라이언트에 저장하는 노트 애플리케이션 http://beyondhtml5andcss3.com/code/html5sql/
  • 26. id=“new_button” id=“save_button” id=“delete_button” id=“title” <ul id=“notes”> id=“note” http://beyondhtml5andcss3.com/code/html5sql/
  • 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
  • 30. 폴백 방안 – 딱히 대안이 없습니다! (-_-;)..1. ‘구글 크롬을 사용하세요’라고 제안한다.2. 크롬 프레임 플러그인을 사용한다. http://code.google.com/intl/ko-KR/chrome/chromeframe/
  • 31. Local StorageTip 20.Local Storage로 Web Storage사용자 설정 저장하기 Session StorageTip 21. Web SQL Database클라이언트 측관계형 데이터베이스 IndexedDB LevelDBTip 22.오프라인으로 작업하기 Application Cache
  • 32. Offline Web Applicationscache 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 StorageTip 20.Local Storage로 Web Storage사용자 설정 저장하기 Session StorageTip 21. Web SQL Database클라이언트 측관계형 데이터베이스 IndexedDB LevelDBTip 22.오프라인으로 작업하기 Application CachePT 내용은 끝입니다.용어가 혼동되지 않도록 주의합시다.