티스토리 뷰

Software Story

New JS APIs of HTML5

gofly 2010. 7. 29. 05:05
우선 이 글은 HTML5 소개 프레젠테이션 을보고 하나하나 정리해 나가는 것입니다.

1.New Selector
일단 첫 번째 변화한 부분은 Selector인 것 같습니다. 기존의 document.getElementById()와 document.getElementByTagName()은 그대로 존재합니다.

이번에 DOM API로 새로 추가 된 것은, document.getElementsByClassName()가 새로 추가 된 듯 합니다.
스타일시트(CSS)의 Class를 적용한 Tag를 찾아내어 배열(Array)반환 합니다.[배열로 반환하기 때문에,
어떤 값을 얻어 내려면 배열에 접근을 해야겠죠?]

또, CSS Syntax를 이용하는 Selector API가 추가 되었는데, 기존에 CSS를 작성 할 때, 다양한 방법으로
Element를 선택하여 스타일을 적용했었는데, 이 기능을 API화해서 HTML5의 Selector에 추가하였습니다.

document.querySelectorAll("ul li:nth-child(odd)");
document.querySelectorAll("table.test > tr > td");

이와 같은 Selector API는 Jquery에서난 가능했던 부분인데, 이제는 기본 API의 기능으로 제공하네요.
참 반가운 기능입니다.

2.Web Storage
일전에 Web에서는 페이지가 Load될 때마다 데이터를 새로 불러왔습니다. 물론 Tag들도 다시 parsing했었죠.
이 경우에 한 가지 않좋은 점은 기존에 글을 쓰고 있다거나 할 경우 모든 것이 없어 질 수도 있다는 것이었습니다.

이번 HTML5에는 이 부분에 대한 API가 새로 추가 되었는데 다음과 같다.

textarea.addEventListener('keyup', function () { window.localStorage['value'] = area.value; window.localStorage['timestamp'] = (new Date()).getTime();
}, false);textarea.value = window.localStorage['value'];

여기에서 눈 여겨 보아야 할 부분이 바로 localStorage와 sessionStorage API입니다.
localStorage는 반영구적으로 데이터를 가지고 있습니다. 심지어 브라우저를 껐다고 해도 남아있습니다.
sessionStorage는 브라우저가 살아있는 동안에는 계속 데이터를 가지고 있습니다.
유효기간만 지정하지 않는 것만 빼면, 쿠키(Cookie)와 같다고 보시면 됩니다.

위 예문의 localStorage는 그대로 sessionStorage로 바꿔서 사용하실 수 있습니다.

여기서 표현은 못하지만 실제로 해보니 신기하더군요. 2틀 후에 와서 예제 사이트 열었는데 textarea안에 있는
글씨가 여전히 남아 있더군요;;;;

잘만 활용 한다면 Ajax나 js plugin(예:jquery)을 써서 동적 웹을 구현하던것을, 이제는 이 HTML5 API를 써서
간단히 구현할 수 있을것 같습니다.

3.Web SQL Database
HTML5는 참으로 다양한 API를 지원합니다. 그 중에 JS부분에 새로 추가되었으며, 눈에 띄는 것은 Database를
처리할 수 있는 API라 할 수 있습니다. 한국 표준 웹 커뮤니티의 "HTML5 표준 가이드"에 보면 WHATWG에서
처음으로 HTML5를 만들고 규격화 할 때 W3C의 방법과 다르게 기존의 웹 개발자들을 표준안을 정하는데, 의견을
낼 수 있게했다고 합니다. 그 이유인 즉, HTML5는 기존에 표준을 만들었던 대 기업(MS, Mozilla)등과는 다르게
웹개발자들이 실질적으로 필요로 하는 기능을 모아서 표준을 만들려고 했다는 겁니다.

그래서 그런지 참, JS에서 Transaction까지 지원하면서 로컬 DB에 Insert, Update, Delete, Select까지
지원한다고 하니 놀랍네요. 물론 기존에 JS로도 DB와 연결을 맺고 데이터 처리(Data Munipulation)할 수
있었지만, 보안문제가 문제가 되었던게 사실인데, 이번 API로 사실상 공직적으로 지원한다는 것은 Sandbox에
대한 믿을 수 있는 보안부분이 생겼다고 볼 수 있지 않나 하고 생각해 봅니다.

사용법은 다음과 같습니다.
 
var db = window.openDatabase("Database Name", "Database Version");
db.transaction(fucntion(tx) {
tx.excuteSql("SELECT * FROM test", [], succesCallback, errorCallback);
});

//CREATE TABLE Table1Test (id Real Unique, text TEXT)
//INSERT INTO Table1Test (id, TEXT) VALUES (? ,?)
//DELETE FROM Table1Test WHERE id = ?

4.Web Application Cache API
이 부분은 앞서 설명한 Web Storage부분과 비슷한 부분입니다.
HTML5 표준 가이드 에서는 이렇게 이야기 합니다. "오프라인 상대에서도 웹 어플리케이션의 접근을 가능케 하는
매우 중요한 기능이다."

이 캐싱 메카니즘은 기존의 웹브라우저와 차이가 있다고 합니다. 오프라인 상태에서 개발자의 예상대로 작동하고
신뢰할 수 있는 새로운 인터페이스 인 것입니다.

이것은 3가지 이점을 갖는다고 합니다.

1.오프라인 브라우징 - 오프라인 상태에서도 사용자가 사이트에 접근할 수 있다.
2.속도 향상 - 로컬 영역에 저장된 리소스들은 매우빠른 로드 속도로 호출된다.
3.서버 부하 감소 - 브라우저는 오직 리소스가 변경된 경우에만 다운로드를 시도한다.

캬캬 제공자나, 제공 받는자나 속도나 여러가지 면에서 장점이 많을 듯 하네요. 다음은 활용 태그 입니다.

<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);

첫번째 줄은 무조건 "CACHE MANIFEST" 라는 문자열을 포함해야합니다. 각 라인은 캐시할 리소스의
URL 또는 주석을 포합니다.

manifest 파일의 내용만으로 Refresh 여부를 판단.

각 파일의 내용이 바뀌었는지는 판단하지 않음. text/cache-manifest MIME 타입으로 전송되어야 함.

javascript event 를 통해 caching 진행여부를 알수 있음.

Window.applicationCache.update(); 및 swapCache(); 함수로 캐시를 강제로 업데이트 가능.

이제 이 기능으로 오프라인에서도 사이트에 접근할 수 있음을 기억하자!!!!

5.Web Workers
Web Workers는 두가지 장점이 있다고 합니다.
첫 째는 스피드고, 둘 째는 브라우저에 부담을 주지 않고 백그라운드에서 스크립트 연산을 할 수 있다는 것이다.
이것이 가능한 이유는 브라우저가 OS단위의 쓰레드를 생성하기 때문이며, 동시적으로 사용되는 경우
정말 흥미로운 결과를 기대 할 수 있다는 것입니다.

기존읜 Javascript는 단일 쓰레드만 지원 했던 것과는 달리, Web Workers에는 다중 쓰레드를 지원한다.
단 주의할 점은 DOM에 접근이 안됨으로 단순계산 업무에만 사용해야 한다는 것입니다.

main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function (event) { alert(event.data); }; 

extra_work.js:
  // 작업을 진행하고, 작업이 끝나면 postMessage 호출.
  postMessage(some_data);

6.Web Socket
Web Socket을 간단히 설명하자면 한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할
수 있는 별도 프로토콜을 정의할 수 있는 API라고 합니다.

기존의 Javascript는 다른 도메인의 내용을 가지고 올 수 없었던 것에 비해서(하부 도메인도 별도의 Sandbox처리
-인증-를 해줘야 데이터를 가지고 올 수 있었음) 이 Web Socket은 다른 도메인과의 통신을 안전하게 지원한다는
것이다.

var socket = new WebSocket(location); socket.onopen = function(event) {
socket.postMessage(“Hello, WebSocket”);
}




socket.onmessage = function(event) {
  alert(event.data); } socket.onclose = function(event) { alert(“closed”);
}

이 기능으로 서버에서 브라우저로 데이터 푸쉬가 가능해 졌다. 기존에 사용자는 웹서버에서 데이터의 변화를
체크하기 위해서 새로고침이나 내부적으로 XMLHttpRequest와 같은 Ajax기술(좀 복잡함)을 이용해야 했던 것과
달리 이 기술은 한 번 연결되면 헤더교환이 필요없기때문에 구현이 간단하고 네트웍 트래픽이 효율적입니다.



Web Socket Protocol : ws:// , wss:// - HTTP를 이용하여 업그레이드.




서버측은 따로 구현해야 하므로, 기존 웹서버가 확장지원하거나 새로운 서비스들이 등장하고 있음.
( Node.js , phpwebsocket ) 기존에 플래스/플렉스/실버라이트가 제공하던 장점중의 하나인 소켓연결이
가능해짐. HTML5 Quake II 의 경우 - Web Sockets 를 사용하여 멀티플레이 구현된다고 합니다.

사실상 이 기능은 TCP for the Web 즉 웹 어플리 케이션을 위한 쌍방향 통신 기술인 것 입니다.

WebSocket to support online Multiplayer
WebGL & Canvas ,
HTML Audio ,
Web Storage - Local Storage API Jake2 (Java port of Quake2) is compiled to Javascript using GWT

위의 동영상에서 주의 깊게 봐야 할 것은 웹 브라우저에서 Quake III가 동작하고 있다는 것입니다.
눈에 확 들어 오는건 WebGL이라는 기술 입니다.

6.Drag and drop
이 API가 흥미로운 점은 기존에 Drag and drop기능을 Javascript에서는 드래그 하려는 대상에 이벤트를
발생시켜 대상이 클릭되었을 때와 그래그할 때, 또 x,y 좌표값을 얻어내서 여러가지 처리를 해야 했던 것과는
달리 태그에 draggable 라는 Attribute만 추가하면 대상이 될 수 있다는 것이다.

document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('text', 'Customized text');
   event.dataTransfer.effectAllowed = 'copy';
}, false);

드래그 가능하게 만들려면 - draggable 이라는 속성만 추가하면 됩니다. <img src='aa' draggable />
drag , drop , dragstart , dragend , dragenter , dragleave , dragover 이벤트등의 이벤트를 지원합니다.
아이폰은 touchStart,touchEnd,touchMove,touchCancel 등의 이벤트도 따로있음 (멀티터치 지원)
( 아이폰으로 sizac.kr 접속후 아이콘 수정화면 참고 )
gestureStart , gestureEnd , gestureChange 형태로 제스쳐도 지원합니다.

7.Geolocation
JS API의 마지막 은 Geolocation기능입니다. 예전에 수치로 하던 위치기반 기능과는 달리 API로 간단하게 자신의
위치를 알 수 있는 기능들이 지원된다.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    map.setCenter(new GLatLng(lat, lng), 13);
    map.addOverlay(new GMarker(new GLatLng(lat, lng)));    
  });
} 

8.마무리
참 맘에 드는 것은 이번 HTML5의 표준들이 웹개발자들이 바라던 부분을 많이 반영했다는 것이다. 그 이유는
HTML5표준을 정할 때, 웹 개발자들이 대거 참여했기 때문이다. W3C에서 표준을 만들었다면 형식에 있어서 이렇게
파격적인 변화가 있었을까 하고 의심해봅니다. 현제 HTML5는 기능이 모두 구현이 된 것이 아니라고 합니다.
W3C W/G(Working Group), WHATWG, WebApp W/G에서 각각 구현중이 라고 합니다.
앞으로 어떤 기능들이 더 추가 될 지 궁굼해 지는 군요.

또, 당부해 놔야 할 점은 XHTML로 구현된 웹들에 대해서 XHTML 2.0은 사실상 W3C에서 더이상 표준 진행을 하지
않음을 걱정 하시는 분들이 있을 듯 한데, Brad Colbow라는 사람이 그린
"마크업의 오해"(Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip) 만화에서 이 부분에 대해서
다음과 같이 비교해 놨습니다.

HTML4와 XHTML1.0,1.1은 우유와 치즈 처럼 같은 유제품 이지만 XHTML 2.0인 두유(Soy Milk)라는 것입니다.
즉 아무런 연관성이 없다는 것이죠. 즉 XHTML2.0은 새롭게 시도되는 표준이었고,
그 수준이 굉장히 방대했다고 합니다.

걍 XML이라고 하는 것도 과언은 아닌듯 하더군요(저의 생각) 종전의 웹 개발자들은 걱정할 필요가 없는 것이
HTML5는 과거의 태그 즉 HTML4개열과 XHTML1.0,1.1을 지원하면서, 미래 지향적으로 HTML5를 지원한다고
합니다.

뭐 그게 가능한 이유는 앞으로 HTML5를 지원하는 웹브라우저는 문서 선언으로 태그를 읽고 렌더링 하는 것을 결정
하고 과거의 XHTML1.0,1.1로 파싱한 태그를 렌더링 할지, HTML5로 렌더링 할지를 결정한다고 하네요.

그러니 기존의 웹 개발자는 과거에 개발해 놓았지만, HTML5에서 지원하지 않는 태그(현제 HTML5는 단계적으로 
기능을 축소하고 있습니다. 그 이유는 CSS기능과 태그의 기능이 겹치기 때문이죠 b 태그처럼요)를 사용했다고 해서
걱정할 필요는 없다는 것입니다. 물론 문서 선언을 잘했다는 가정에서 말이죠....^^

다음은 HTML 부분을 살펴 보겠습니다. HTML5표준 가이드를 보니까 아주 흥미롭더군요. 웹 표준 가이드에 "삽질"
단어를 써가며 이제는 그럴 필요가 없어졌다는 이야기를 하더군요...다음 포스팅에 살펴보겠습니다.




'Software Story' 카테고리의 다른 글

The Windows NT Command Shell  (0) 2011.03.06
Windows CMD 정릴  (0) 2011.03.06
HTML 5 Guide(PDF)  (0) 2010.07.21
iOS 4의 키보드 부분 Review  (2) 2010.06.25
아이폰 도난 걱정 뚝! 어플로 ‘도난방지’  (0) 2010.06.17