HTML5의 가장 특징적인 API(Application Programming Interface)에 대해 알아보자
특정기능에 대한 API가 정의되어 있어
정의되어 있는 API 기반으로 프로그래밍 하면된다
대표적으로 드래그 앤 드롭(Drag&Drop), 지오로케이션(Geolocation), 웹 스토리지(Web Storage) , 웹 캐시(Web cache),웹 워커(Web Worker)가 있다
드래그 앤 드롭(Drag&Drop)
'끌어다 놓기'이다 윈도우 이전 도스(DOS)환경에서는 모든 기능을 키보드를 이용해서 파일을 복사, 이동 ,
삭제를 했지만 윈도우 출현 이후 파일의 복사,이동,삭제등이 아이콘 클릭 후 끌어다 놓는 방식이 가능해 졌다
웬만한 브라우저에서 다 HTML5의 드래그 앤 드롭이 사용되는 것은 아니다
하지만 크롬을 포함하여 모바일 브라우저에서는 HTML5 API가 완벽하게 동작되기 때문에 모바일 개발에서는 사용해도 된다
<div class="box"> 박스 1</div>
<div class="box" draggable="true"> 박스 2</div> //드래그가 가능한 오브젝트가 된다
<div class="box" draggable="true"> 박스 3</div> //
7개의 이벤트
| 이벤트 | 발생 조건 |
| dragstart | 드래그가 시작될 때 발생-드래그 요소에서 정의 |
| drag | 드래그 중 드롭 요소에서 정의 |
| dragenter | 이동할 요소를 마우스로 끌어서 드롭하는 요소에 들어오는 순간 발생-드롭요소에서 정의 |
| dragover | 이동할 요소를 마우스로 끌어서 드롭하는 요소에 올려 놓는 동안에 발생(드롭 요소에서 정의) |
| dragleave | 이동할 요소를 마우스로 끌어서 드롭하는 요소에서 나갈 때 발생 (드롭 요소에서 정의) |
| drop | 마우스로 끌어서 놓는 순간 발생하는 이벤트(드롭 요소에서 정의) |
| dragend | 드롭이 성공 또는 실패 시 발생(드래그 요소에서 정의) |
4개의 메소드
| 메소드 | 매개변수 | 설명 |
| setData | type : text/plain 또는 text/html과 같은 일반적인 데이터 타입 data: data sent |
dragstart가 시작될 때 데이터를 전송 준비 |
| getData | type: data type | drop 이벤트가 시작될 때 사용 |
| clearData | type : data type | 특정한 데이터 타입이 있을 경우 데이터 삭제 |
| setDragImage | 요소 : a <img> element x : x-value of a point y : y-value of point |
마우스 포인터 위치 기준으로 지정된 <img> 요소를 x,y 축상에 썸네일로 표시 |
지오로케이션(Geolocation)
현재 자기가 있는 위치를 GPS를 이용하여 표시해 준다 따라서 현재 사용되고 있는 지도 서비스 (구글 맵, 다음 지도, 네이버 지도)와 연동하게 되면 현재 위치를 지도상에 간단히 나타 낼 수 있다
물론 사용자의 현재 위치를 표시하기 위해서 사용자 동의가 필요하다 민감한 개인정보가 될 수도 있다
<script> 내에서
getCurrentPosition()으로 간단하게 사용자 위치 알 수 있다
웹 스토리지
사용자의 브라우저를 이용해서 웹에서 작업한 내용을 현재 사용하고 있는 PC에 저장하는 것이다
HTML5가 지원하지 않는 브라우저에서도 쿠키(Cookie)를 이용하면 웹 스토리지와 같은 일을 처리하게 된다
웹스토리지는 쿠키에 비해 상대적으로 크기가 크다. 또한 저장된 데이터는 기본적으로 서버로 보내지 않는다 그리고 쿠키와 달리 웹 스토리지는 유효기간이 없다
세션 스토리지(session storage)와 로컬 스토리지(local storage)로 나눌 수 있다
세션 스토리지는 브라우저당 하나의 세션에 대해서만 저장하므로 브라우저를 껐다 키면 새로운 세션에 데이터가 저장된다 로컬 스토리지는 데이터가 영구적으로 보존되기 때문에 브라우저를 껐다 켜도 데이터는 만료되지 않는다
사용법
스토리지 사용하기 전에 브라우전에서 로컬 스토리지 또는 세션 스토리지가 작동되는지 확인해야 한다
if (typeof (Storage) == undefined) {
// 현재 브라우저에서는 web storage가 작동하지 않는다
} else {
// 여기에 local storage or session
}
sText라는 키값에 sample text값 저장
localStorage.setItem("sText", "sample text");
↑↓ 둘다 같은거
localStorage.sText = "Sample text";
localStorage["sText"] = "sample text";
해당키의 아이템을 가지고 오는 방법
localStorage.getItem("sText");
같음
var sText = localStorage.sText;
var sText = localStorage["sText"];
해당 키의 아이템을 삭제
localStorage.romoveItem("sText");
같음
delete localStorage.sText;
delete localStorage["sText"];
(5MB 크기를 넘었을 때 발생) 에러 예외 처리
try{
localStorage.setItem('userid', 'admin');
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('저장 공간이 초과됨');
}
}
앱 캐시
웹 어플리케이션이 캐시로 저장되어 오프라인 상태에서 온라인 상태와 똑같이 애플리케이션을 사용하게끔 하는 것이다
오프라인 브라우징이 가능하여 인터넷 속도가 빨라지게 되고 서버의 부하를 줄일 수 있다
예전에는 캐시를 사용했는데 캐시 서버는 인터넷망과 캐시 서버가 연결되고, 캐시 서버와 사용자 PC가 연결된다 사용자 A에서 특정 웹 사이트를 호출하면 해당 데이터는 캐시 서버에 저장되고 사용자 B가 동일한 웹사이트를 호출하면 캐시 서버에서는 저장되있던 데이터를 사용자 B에게 보여준다 이렇게 되면 사용자 B는 인터넷망에서 데이터를 가져오는 것이 아니라 캐시 서버에서 데이터를 가져오기 때문에 인터넷이 빠르게 느껴진다
앱 캐시도 유사하다
CSS를 외부에서 호출 할 때 .css 파일을 만들어서 호출하는 것과 동일하게 외부에 manifest라는 파일을 만들어 호출하면 된다
manifest파일은 어떤확장자를 써도 된다 만들어진 확장자는 웹 서버에서 MIME TYPE을 설정해 줘야 한다
예를 들어 manifest.appcache라는 파일로 확장자를 만들려면 아파치 서버인 경우 .htaccess 파일에 다음과 같이 MIME TYPE을 설정해 줘야 한다
AddType text /cache-manifest .appcache // .appcache
즉 앱캐시 확장자는 마음데로 설정 할 수 있다 단순한 텍스트 파일이다
manifest 파일 내용
CACHE MANIFEST
CACHE : //
/css/screen.css
/css/offine.css
/js/screen.js
/img/logo.png
http://example.com/css/styles.css
NETWORK: //
joain.php
FALBACK: //
imgs/logo.png
imgs/backup_logo.png＊CHCHE : 지정된 파일들이 브라우저에 로딩된 후 캐시에 저장된다 -> 오프라인전환 되더라도 파일사용 가능
＊NETWORK : 무조건 네트워크에서만 불러온다 ->오프라인에서는 사용 할 수 없다
＊FALLBACK : 해당 파일 로딩에 실패할 경우 백업 파일 보여준다 -> 로딩에 실패하면 지정된 파일들이 보여진다
웹 워커
브라우저를 이용해서 멀티 스레드를 가능하게 해준다 단순히 웹 문서 표현 뿐만아니라 응용 프로그램 처리까지 할 수 있다
웹워커가 도입됨에 따라 응용 프로그램은 백그라운드에서 처리하고 사용자는 브라우저를 이용해 다른 작업도 할 수있다
멀티스레드를 위해 만들어 졌으며 자바스크립트의 모든 기능을 사용 할 수 있는건 아니다
＊navigator 객체
＊location 객체(읽기 전용)
＊XMLHttpRequest
＊setTimeout() / clearTimeout() 및 setInterval() / clearInterval()
＊응용 프로그램 캐시
＊importScripts() 메소드를 사용하여 외부 스크립트 가져오기
＊다른 웹 작업자의 생성
웹 다음 기능은 엑세스 할 수 없다
＊DOM
＊window 객체
＊document 개체
＊parent 개체
별도의 스레드에서 실행되기때문에
.js파일을 호출해서 사용한다 .js 파일을 정의하자
var worker = new Worker('sample.js');
sample.js파일이 작업이 이루어지며 postMessage()를 이용해 HTML문서와 통신한다
onMessage()를 사용해 이벤트를 전달 받는다
web worker가없다면 자바스크립트를 동시에 실행 할 수 없고 한가지 동작이 끝날때까지 기다려야
할 것이다
HTML5 의 API들에 대해서 간단하게 알아 봤다
단순히 디자인을 위해서만 존재하는 애가 아니였다
참조: '백견불여일타HTML5$CSS3'
