티스토리 툴바

Daum
Tistory
로그인

jQuery Mobile 요약

HTML5 2012/01/16 16:59
크리에이티브 커먼즈 라이선스
Creative Commons License
jQuery Mobile(이후 JQM)의 개요에 대해 간단히 요약한다.

JQM (jQuery와 JQM의 관계)?
- JQM은 jQuery의 확장팩 (jQuery의 light-weight 버전이 아니다)
- JQM은 jQuery를 기반으로 모바일 Web App 개발을 지원하기 위한 코드(HTML/CSS/Javascript)를 추가한 일종의 플러그인(plulg-in)

JQM은 무엇을 제공하나?
- Touch 인터페이스 처리
- 다양한 모바일 OS/Device에 대한 지원
- Theme(UI 테마) 체계

jQuery Plug-in?
- jQuery의 기능을 확장하기 위해 widget 또는 코드 모듈을 추가할 수 있도록 jQuery 팀이 제공하는 아키텍처
- 전세계 jQuery 개발자들에 의해 다양한 plug-in들이 개발/발표되고 있음

jQuery Mobile을 쓰려면 어떻게 하나?
- Web App 소스에 다음 3줄을 추가하면 준비 끝!
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

(이상)
 
저작자 표시 비영리 변경 금지
Posted by ingee
TAG HTML5, JavaScript, jquery mobile, 모바일 자바스크립트 프레임워크
트랙백 0개, 댓글 2개가 달렸습니다

트랙백 주소 : http://ingeec.tistory.com/trackback/47 관련글 쓰기

댓글을 달아 주세요

  1. 하늘빠 2012/01/19 16:09  댓글주소  수정/삭제  댓글쓰기

    간략하고도 명쾌한 설명, 잘 보았습니다. ~.~

Javascript 스터디 노트 2 (Prototype Chaining에 대하여...)

HTML5 2012/01/03 13:17
크리에이티브 커먼즈 라이선스
Creative Commons License
자바스크립트(이후 JS)는 객체지향 언어다. 하지만 c++이나 Java처럼 타입(class)에 기반한 객체지향 언어가 아니라 객체(object: 실제 인스턴스)에 기반한 객체지향 언어다. JS는 prototype chain을 통해서 객체지향적 특징을 구현한다. 이에 대해 요약한다.

Function & Constructor
- JS는 함수를 intrinsic한 객체로 취급한다. 즉, 함수를 Number나 String, Date 등과 동등한 객체로 취급한다.
- JS의 함수 중 객체를 리턴하는 함수를 Constructor (생성자 함수 객체)라고 한다.
- JS의 Constructor는 객체를 생성하기 위해 new 연산자와 함께 사용된다.
- JS의 Function 객체는 prototype 속성과 constructor 속성을 갖는다 (이 글에서 소문자로 시작하는 constructor는 Function 객체가 갖고 있는 속성의 이름이며, 대문자로 시작하는 Constructor는 생성자 함수 객체를 말한다).
- Constructor의 constructor 속성은 자기 자신을 가리킨다 (생성자 함수 객체 자신을 가리킨다).
- Constructor의 prototype 속성은 Constructor가 생성하는 객체의 [[prototype]] 객체를 가리킨다 (이 글에서 prototype은 Function 객체가 갖고 있는 속성의 이름이며, [[prototype]]은 JS가 객체지향적 특성을 구현하기 위해 사용하는 프로토타입 객체를 말한다. JS의 원본 스펙인 ECMA-262 스펙에서 [[prototype]] 표기법을 빌려왔다).

Prototype Chaining
- 모든 JS 객체는 ECMA-262 스펙에 따라 자신의 [[prototype]] 객체를 알고있다. 하지만 이를 구현하는 방식은 제각각이다. WebKit 계열의 JS 엔진은 모든 객체에 __proto__ 라는 이름의 속성을 부여하여 [[prototype]] 객체를 노출한다. 반면 IE는 [[prototype]] 객체를 외부에 노출하지 않는다 (__proto__라는 이름의 속성이 없다). 그렇더라도 IE 역시 ECMA-262 스펙을 만족시키는 JS 엔진이다.
- 어떤 JS 객체가 외부로부터 메소드나 속성을 요구받으면, 자기가 갖고 있는 메소드나 속성 리스트를 먼저 확인하고, 없을 경우 [[prototype]] 객체에 요구된 메소드나 속성이 있는지 확인한다. 이런 확인 작업을 [[prototype]] 객체의 [[prototype]] 객체를 거쳐 최상위 [[prototype]] 객체까지 계속한다. 이를 prototype chaining이라고 한다.

JS 객체 구현의 실제
다음과 같은 객체 hierarchy를 JS로 구현한다고 가정해보자.

(만들고자 하는 객체 hierarchy와 이를 구현한 생성자 함수)


- Rect 객체는 w(폭)과 h(높이)를 속성으로 갖는다
- PosRect 객체는 Rect 객체로부터 w, h 속성을 계승하고, x(시작점의 x좌표)와 y(시작점의 y좌표)를 추가 속성으로 갖는다

Rect() 생성자 함수와 PosRect() 생성자 함수를 위와 같이 정의하면 JS 엔진은 아래와 같은 관계의 객체들을 만들어낸다. 실체가 없는 타입이 아니라 메모리 상에 실제로 존재하는 객체가 만들어지는 것이다.

(생성자 함수와 prototype 객체 사이의 관계)


- PosRect : 생성자 함수 객체
- PosRect.prototype : PosRect 생성자 함수를 통해 생성하는 객체의 [[prototype]] 객체 
- Rect : 생성자 함수 객체
- Rect.prototype : Rect 생성자 함수를 통해 생성하는 객체의 [[prototype]] 객체
- Object : JS 엔진에 내장된 생성자 함수 객체
 
이 상태에서 다음 코드를 통해 PosRect 타입의 객체 pr을 생성하면... 
pr = new PosRect(1, 2, 3, 4);

JS 엔진의 메모리에는 다음과 같은 관계를 갖는 pr 객체가 만들어진다.

(생성자 함수를 통해 만들어낸 객체와 prototype 객체 사이의 관계)
 

샘플코드 (부록?)
이상의 관계를 파악할 수 있는 샘플 코드를 첨부한다.

test_prototype-chain.html

 
위 파일을 크롬, 사파리 등의 웹킷계열 브라우저 또는 파이어폭스 브라우저로 로드하면 다음과 같은 결과를 얻을 수 있다. IE는 __proto__ 속성을 지원하지 않기 때문에 원하는 결과를 얻을 수 없다 (ECMA-262 스펙이 __proto__ 속성의 존재를 강제하지 않기 때문에 __proto__ 속성을 지원하지 않더라도 IE가 잘못한 것은 아니다). 아래 결과를 통해 JS의 prototype chain 구성 방식을 확인할 수 있다.

var o= pr;
(0) o = PosRect( x=1, y=2, w=3, h=4 )
(0) o.isCustomizedObject = true
(0) o.prototype = undefined
(0) o.__proto__ = PosRect( x=undefined, y=undefined, w=undefined, h=undefined )
--- o= o.__proto__;
(1) o = PosRect( x=undefined, y=undefined, w=undefined, h=undefined )
(1) o.isCustomizedObject = true
(1) o.prototype = undefined
(1) o.__proto__ = Rect( w=undefined, h=undefined )
--- o= o.__proto__;
(2) o = Rect( w=undefined, h=undefined )
(2) o.isCustomizedObject = true
(2) o.prototype = undefined
(2) o.__proto__ = [object Object]
--- o= o.__proto__;
(3) o = [object Object]
(3) o.isCustomizedObject = undefined
(3) o.prototype = undefined
(3) o.__proto__ = null
   
결론
JS가 Class라는 개념을 지원하지 않기 때문에 객체들 사이의 관계를 간편하고 멋진 StarUML을 통해 클래스 다이어그램으로 그려낼 수 없었다. Class들 사이의 관계가 아니라 Object instance들 사이의 관계를 그려야 했는데, StarUML이 이를 지원하지 않아 손으로 그려야 했다. 그만큼 JS의 객체 hierarchy 구현 방식은 일반적인 객체지향 언어와 다르며 독특하다. JS는 객체들 사이의 계승관계를 런타임에 만들고 변경할 수 있는 유연한 언어다. 

(이상)
 
저작자 표시 비영리 변경 금지
Posted by ingee
TAG JavaScript, prototype chaining
트랙백 0개, 댓글 0개가 달렸습니다.

트랙백 주소 : http://ingeec.tistory.com/trackback/46 관련글 쓰기

댓글을 달아 주세요

HTML5 프레임 애니메이션 저작 환경 현황 (2011년 12월 기준)

HTML5 2011/12/29 16:39
크리에이티브 커먼즈 라이선스
Creative Commons License
프레임 애니메이션이란 영화처럼 한 프레임 한 프레임의 움직임으로 표현하는 애니메이션이다 (한땀 한땀...). 쉽게 말해 플래시 애니메이션을 말한다. "Flash 대 HTML5" 논쟁에서 시작, HTML5가 대중의 관심을 듬뿍 흡입한 상황이지만, 과연 현실이 HTML5로 플래시를 대체할 수 있는 상황인지 궁금했다.

요약
* HTML5의 SVG와 CSS3 기술로 프레임 애니메이션을 구현할 수 있음
    - SVG : Scalable Vector Graphic. 진작부터 존재했던 플래시의 대안 기술. HTML5의 일부로 포함됨.
    - HTML + CSS3 : CSS3에 frame 단위 애니메이션 효과에 대한 정의가 포함됨.
* Sencha Animator라는 CSS3 기반 공개 컨텐츠 저작툴이 존재함
* Adobe에서 Edge라는 CSS3 기반 상용 컨텐츠 저작툴을 발표함 (현재 preview 상태. '12년 정식 버전 출시 예정)
* 프레임 애니메이션을 구현할 수 있는 요소 기술은 존재하나, 본격적인 컨텐츠를 저작할 수 있는 상용 저작툴이 미흡한 상황임
* SVG와 CSS3 Animation 기능에 대한 브라우저의 지원이 미흡함 (특히 안드로이드 모바일 브라우저) 
(출처:  http://caniuse.com )


Reference
* [HTML5 강좌] 19. SVG
    - SVG로 프레임 애니메이션 저작이 가능하다
* Sencha Animator - HTML5, CSS3 애니메이션 저작 도구
    - CSS3로 프레임 애니메이션 저작이 가능하다
* Adobe, HTML5 저작 도구 Edge 공개 (2011-08)
    - Adobe Edge가 HTML/CSS 기반 애니메이션 저작 기능을 제공한다
* Why has Edge gone with div-based animation over canvas SVG? (2011-08)
    - Edge 개발시 Canvas와 SVG 사용을 고려했으나 성능상의 문제로 채택하지 않았다
    - iOS4에서 Canvas와 SVG 성능이 미흡했다 (약간 자의적 판단...)
    - Edge는 현재 preview 버전이다. 정식 버전 출시시 달라질 수 있다
* [RIA] 스마트한 RIA 구현을 위한 몇 가지 팁 (2011-11)
    - Adobe Edge는 내년('12) 정식 버전 출시 예정이다

(이상) 
 
저작자 표시 비영리 변경 금지
Posted by ingee
TAG frame animation, HTML5
트랙백 0개, 댓글 0개가 달렸습니다.

트랙백 주소 : http://ingeec.tistory.com/trackback/45 관련글 쓰기

댓글을 달아 주세요