jQuery Mobile 요약

Dev 2012. 1. 16. 16:59
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 ingeeC
,
자바스크립트(이후 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 객체 사이의 관계)
 


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

 
위 파일을 크롬, 사파리 등의 웹킷계열 브라우저 또는 파이어폭스 브라우저로 로드하면 다음과 같은 결과를 얻을 수 있다. 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 ingeeC
,
자바스크립트를 공부하기 시작했다. 재미 있다. 재미를 나누고 싶어 내용을 요약한다.
자바스크립트는 모든 브라우저에서 실행되는 현실적인 '대세'다. 강한 놈이 살아남는게 아니라 살아남는 놈이 강한거다 (어랏? 어디서 많이...). 자바스크립트는 웹OS, 크롬OS 같은 놈들이 확산되면 더욱 강한 놈이 될거다. 분명하다.


자바스크립트(이하 JS)의 특징
* JS 자체를 몰라도 프로그래밍을 시작할 수 있는 언어 : c, c++, java와 닮았다. 장점이자 단점이다.
* object 기반 객체지향 언어 : class 기반 객체지향 언어와 다르다.
* functional programming language : JS는 function을 특별하게 다룬다.


JS 특징들에 대한 부연설명
조금 더 설명을 덧붙이면 다음과 같다.

*  JS 자체를 몰라도 프로그래밍을 시작할 수 있는 언어 
JS는 c, c++, java로부터 많은 키워드를 차용했기 때문에 c, c++, java를 알고 있는 개발자는 별 부담 없이 JS를 이용해서 프로그래밍을 시작할 수 있다. 장점이다.
하지만 곧 언급하겠지만 JS는 c, c++, java 등과는 본질적으로 다른 특징을 갖고 있다. 기존 언어와 닮았다는 점 때문에 JS 랭귀지를 제대로 이해하고 작성한 코드가 드물다. 이건 단점이다.

* object 기반 객체지향 언어 : class 기반 객체지향 언어와 다른 언어
JS는 c, c++, java 같은 class 기반 객체지향 언어가 아니다.
JS는 객체의 족보(hierarchy)를 (class에 기반한 type이 아니라) real object 사이의 prototype-chain으로 구현한다.

* functional programming language의 특징을 갖고 있는 언어
functional programming language는,
- c, c++, java 같은 imperative programming language와 다른 개념이다.
- 가장 대중적인 최초의 functional  programming language는 LISP이다.
- state와 mutable data를 회피한다.
- 어떤 function의 결과값은 인자에 의해서만 결정된다. 따라서 같은 인자로 같은 함수를 호출하면 언제나 같은 결과를 얻는다.
- multi-CPU, multi-process, multi-thread 환경이 부각되면서 중요도가 커지고 있다.

반면 imperative programming language는,
- fortran, cobol, basic, c, c++, java 등이 있다 (OO Language를 포함)
- 명령에 의해 시스템의 state를 변화시키는 방식으로 동작한다. state 변화를 중시한다.
- 같은 인자로 같은 함수를 호출하더라도 호출하는 시점의 state에 따라 다른 결과를 얻는다 ("referential transparency가 부족하다"고 표현한다).

functional programming language 세계의 주요 개념은 다음과 같다.
- higher order function: 다른 함수를 인자로 받거나 리턴할 수 있다.
- 1st class function: 함수를 다른 intrinsic type (number, string, ...)과 동일하게 취급한다.


JS function의 특징들

함수 정의 방식
아래 두 함수 정의 방식은 완전히 동일하다.
아래 두 함수 정의 방식은 (동작 방식은 다르지만) 동작 결과는 완전히 동일하다 (댓글 주신 @지돌스타님 감사합니다).

1. 변수에 익명함수(anonymous function)를 assign
var myFunc = function(a, b, c) {
    return a+ b+ c;
}

2. Named function을 정의
function myFunc(a, b, c) {
    return a+ b+ c;
}

자바스크립트는 변수의 타입을 느슨하게 규정한다. 따라서,
- 함수 인자를 정의할 때 타입을 지정할 필요가 없다.
- 함수의 리턴 타입을 지정할 필요가 없다.

함수 취급 방식 (1st class function)
함수 및 함수 코드 블럭을 객체처럼 (객체와 동일하게) 취급한다. 즉, 함수를 인자나 리턴으로 사용할 수 있다
/* 함수를 배열 item 데이터로 사용 */
var operators = {
    add:    function(x, y) { return x+ y; },
    sub:    function(x, y) { return x- y; }
};
alert( operators['add'](1, 3) ); //'4' 팝업
alert( operators['sub'](3, 1) ); //'2' 팝업

/* 함수를 다른 함수의 인자로 사용 */
var add;
function setAdd(code) {
    add = code;
}
setAdd(function(x, y) { return x+ y; }); //함수 코드 블럭을 다른 함수의 인자로 전달
alert( add(1, 2) ); //'3' 팝업

/* 함수를 리턴 값으로 사용 */ 
function getAddFunc() {
    return function(x, y) { return x+ y; }
}
var add = getAddFunc();
alert( add(1, 2) ); //'3' 팝업

/* 함수를 선언과 함께 호출 */
alert ( (function(x, y) { return x+ y; })(1, 2) ); //'3'을 팝업

변수 Scope
변수의 참조 Scope는 블럭 ({...}) 단위가 아니라 함수 단위로 결정된다.

function outerFunc() {
    var a = 'hello';
    function innerFunc() {
        alert(a); //innerFunc()이 호출되면 outerFunc()의 a 변수를 참조하여 'hello' 팝업
    }
    innerFunc();
}
outerFunc();

(이상)
PS. 글을 긁어갈 때는 출처를 밝혀 주면 좋겠다. 인터넷 검색중에 출처에 대한 언급 없이 내 글이 걸려 있는 것을 보면 기분이 안좋다. 출처를 명시하고, 원본을 수정하지 않고, 상업적 용도로 사용하지 않는 이상, 본 블로그의 글은 자유롭게 사용할 수 있다.


Posted by ingeeC
,
모바일 자바스크립트 프레임워크의 주요 의제
- 모바일 UI 부품(widget? component? 이걸 뭐라 해야 해???) 제공
- 모바일 터치 이벤트 처리 기능 제공
=> 즉, 스크린 크기에 구애받지 않는 UI 구현터치 이벤트 처리에 관한 부품 및 API 제공
 
모바일 자바스크립트 프레임워크 평가 기준
- 자유롭게 가져다 쓸 수 있는가? (라이선스 모델?)
- 얼마나 많은 단말을 지원하는가? (지원하는 단말 및 OS?)
- 얼마나 빨리 로드되고 실행될 수 있는가? (얼마나 크기가 작은가?)
- 얼마나 많은 지지를 얻고 있는가?
- 얼마나 활발하게 개발이 진행되고 있는가?

모바일 자바스크립트 프레임워크의 종류 및 특징 요약
(http://www.markus-falk.com/mobile-frameworks-comparison-chart/ 에서 발췌)
=> (한줄요약) 모바일 자바스크립트 프레임워크는 모바일에 최적화된 UI 기능 제공을 목표로 하고 있다.
 
모바일 자바스크립트 프레임워크 인기도 설문
(https://spreadsheets.google.com/spreadsheet/viewanalytics?formkey=dEdOZVZRVUszSU8wVG4tZmtYNUdZdWc6MQ 에서 발췌)
=> (한줄요약) jQuery Mobile이 가장 인기 높다.

주요 모바일 자바스크립트 프레임워크 비교
 프레임워크  라이선스 모델  지원 단말 및 OS  footprint  버전 현황  기타
 jQuery Mobile  dual license (GPL or MIT)  iOS, Android, WinMobile 등의 모바일 브라우저 A급 지원  19 KB  현재 1.0RC2, 2011년내 1.0 정식 릴리즈 예상  jQuery 원저자가 참여하는 프로젝트; 개발자들의 기대가 높다
 Sencha Touch  dual license (GPL or proprietary)  WebKit 기반 브라우저 A급 지원 (iOS, Android); WebKit 이외의 브라우저는 다소 지원 미흡  370 KB  2011.3월 1.1.0 릴리즈  WebApp 개발을 위한 용도로는 free; SDK 개발을 위한 용도로는 paid
 zepto.js  MIT license  WebKit 기반 브라우저만 지원 (프레임워크 사이즈를 줄이자는 철학에 따른 선택)  ~ 2 KB (목표)  2011년 11월 현재 0.8 릴리즈  jQuery 호환 문법
 NS Basic/ App Studio  Proprietary license  WebKit 기반 브라우저 지원 (iOS, Android)    2011년 10월 1.3.1 릴리즈  Visual Basic으로 모바일 Web App을 만들자는 개념의 상용 상품


요약 및 의견
- 개인적으로 작고 빠른 프레임워크를 지향하는 zepto.js의 철학에 공감하나 프로젝트 진도가 활발하지 않다.
- 현재 개발자들로부터 가장 높은 기대를 받고 있는 프레임워크는 jQuery Mobile 이다. 프로젝트 진행 역시 활발하다.
- 현재 가장 높은 품질의 기능을 제공하는 프레임워크는 Sencha Touch이다. 하지만 개인적으로 무겁다고 (로딩 속도와 실행 속도가 느리다고) 생각한다.
- 지금은 One Source Multi Device를 위한 모바일 자바스크립트 프레임워크에 대한 요구가 매우 높으나 관련 프로젝트들이 성숙하지 못한 단계이다.

(이상)
 
Posted by ingeeC
,