자바스크립트를 공부하기 시작했다. 재미 있다. 재미를 나누고 싶어 내용을 요약한다.
자바스크립트는 모든 브라우저에서 실행되는 현실적인 '대세'다. 강한 놈이 살아남는게 아니라 살아남는 놈이 강한거다 (어랏? 어디서 많이...). 자바스크립트는 웹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
,
Device API와 HTML5 사이의 관계
("미래 웹 기술에 관한 이야기/ HTML5 표준 범위와 W3C HTML WG 표준화 현황", 2010-06 기사 중에서...)
HTML WG 의장 중 한명인 마이크로소프트의 폴 코튼(Paul Cotton)이 생각하는 HTML5 표준의 범주는 HTML WG에서 개발되고 있는 HTML 표준, Web Applications WG에서 개발하고 있는 API 표준, Device APIs and Policy WG에서 개발하는 표준, 그리고 마지막으로 우리가 자바스크립트로 알고 있는 ECMAScript-262에 대한 표준도 포함하는 것이다.

Device API 표준화 현황
("미래 웹 기술에 관한 이야기/ HTML5, Device API 표준화 현황", 2010-07 기사 중에서...)
W3C에서 API에 대한 표준은 주로 Web Applications WG에서 개발하는 것으로 되어 있었으나 개발해야할 스펙이 많아 디바이스의 자원을 접근하는 API 개발은 DAP WG을 새롭게 만들어 진행하게 되었다. Privacy 이슈가 상대적으로 적은 Read 기능에 대한 표준들이 빠르게 표준화가 이루어질 것이며, 그후 Write 기능에 대한 표준들이 개발될 예정이다.

DAP (Device APIs and Policy Working Group, 줄여서 Device APIs Working Group) 활동 현황
("http://www.w3.org/2009/dap/" 중에서...)
* 2011년 10월현재, 대부분 분야에서 Public WD 공표함 (표준 공표 5단계중 2번째 단계)
* DAP이 다루는 API 분야는 다음과 같다 (상황에 따라 추가되거나 제외되고 있다)
    - Battery status
    - Contacts (reading from addressbook)
    - HTML Media Capture (camera/microphone interactions through HTML forms)
    - Messaging (SMS, MMS, emails)...
* 2011년 10월현재, contact, calendar, network info 등 API가 아직까지 read-only method 만 정의하고 있음

주요 브라우저들의 Device API 수용 현황
* 모질라 (파이어폭스) : 향후 3~4 개월 내에 phone에서 HTML5 기본 기능을 위한 Device API를 제공할 것이다
("Mozilla Wiki/ WebAPI", 2011-10 기사 중에서...)
* 안드로이드 3.0 내장 브라우저가 Media Capture API를 지원하기 시작했다
("Android 3.0 Honeycomb is first to implement the Device API", 2011-02 기사 중에서...)
* 2011-05 부터 WebKit이 navigator.getUserMedia()를 지원하기 시작했다
("What web browser supports <device> tag HTML5?" 기사 중에서...)
* 2011-08 부터 Opera Mobile이 navigator.getUserMedia()을 지원하기 시작했다
(출처 상동)

의견
* 정의된 Device API 표준 자체가 완결되어 있지 않다; read-only method 들만 정의 되어 있다; 앞으로 할 일이 더 많이 남아 있다 (표준화 기구 영감님들의 활동이 의외로 게으르다)
* 대부분의 브라우저가 현재까지 정의된 Device API를 지원하고 있거나, 지원을 약속하고 있다 (브라우저 개발자들은 역시나 부지런하다)

(이상)
 
Posted by ingeeC
,
웹킷 어디까지 왔나?
(GPU 가속 feature를 중심으로...)


웹킷 뉴스 그룹에서의 주요 안건들 요약
* HTML5 Microdata 지원 공지 (2011/9/22 : New feature announcement - Implement HTML5 Microdata in WebKit)
* HTML5 WebWorker 관련 기능 구현 논의 (2011/9/23 : starting implementation of postMessage tranferables)
* HTML5 Canvas 관련 기능 구현 논의 (2011/9/13 : Mouse Lock API)
* HTML5 time element 관련 기능 구현 논의 (2011/9/16 : Implementing HTML5 time element)
==> 요약: 현재 WebKit 진영에서는 CSS3와 HTML5에 관한 구현 논의가 주요 이슈임


GPU 가속 관련 현황 요약
* GPU는 CPU와 달리 데이터 병렬성이 풍부해 대용량 데이터 처리에 효율적임
* HTML5 Video를 이용 브라우저에서 HD 영상을 표시하기 위해서는 GPU 가속 기능 활용이 필수적임
* WebKit은 화면 처리를 위해 software rendering path와 hardware accelerated path를 제공함
* GPU 가속 feature는 WebKit 차원에서는 종료된 문제임; GPU 가속 기능 제공 여부는 브라우저 port의 문제임
* 애플의 사파리 브라우저는 오래전부터 hardware accelerated path를 심도 깊게 활용함; GPU 가속 기능 제공함
* 애플의 모바일 사파리 브라우저도 아이폰을 처음 출시할 때부터 GPU 가속 기능을 제공함
* 구글의 크롬 브라우저는 2010년 9월 (크롬7) 부터 GPU 가속 기능을 제공하기 시작함
* 구글의 폰용 안드로이드 브라우저는 아직 GPU 가속 기능을 제공하지 않음 (2011/10/19 현재)
* 구글의 패드용 안드로이드는 (안드로이드 3.0 허니콤은) GPU 가속 기능을 제공하나 아직 최적화 되지 않음; 간혹 화면이 깨지는 문제, 성능 문제 등이 보임 (2011/10/19 현재)
* 구글이 곧 발표할 아이스크림 샌드위치는 스마트 폰에서도 GPU 가속 기능을 제공하리라 전망함. 하지만 아직(2011/10/19)까지 구글의 명시적인 발표는 없음; 오늘(2011/10/21) 아이스크림 샌드위치 발표함. GPU 가속 지원 현황에 대해 좀 더 조사가 필요함 (젠장...)
==> 이제 Android 4.0을 (아이스크림 샌드위치를) 사용하는 모든 단말은 GPU 가속 기능을 제공해야 한다. 이로 인해 모든 안드로이드 App (웹 브라우저도 포함하겠지?..)은 GPU 가속 기능의 혜택을 누릴 수 있게 됐다. (2011.10.24. 내용 추가함. GPU 가속 기능이 OS 차원에서 지원된다는 얘기)
http://developer.android.com/sdk/android-4.0-highlights.html#DeveloperApis
(
Hardware-accelerated 2D drawing
All Android-powered devices running Android 4.0 are required to support hardware-accelerated 2D drawing. Developers can take advantage of this to add great UI effects while maintaining optimal performance on high-resolution screens, even on phones. For example, developers can rely on accelerated scaling, rotation, and other 2D operations, as well as accelerated UI components such as TextureView and compositing modes such as filtering, blending, and opacity.)
 
 

Reference
* 브라우저에서 그래픽 가속하기 (from WebKit mailing-group)
Accelerated 2D Tesselation Implementation (from WebKit mailing-group)
Chromium "GPU" LayoutTests (from WebKit mailing-group)
GPU Accelerated Compositing in Chrome (from Chrome 개발자 사이트)
Google Activates Chrome GPU Acceleration
Guess who is WebKit’s new best friend
Issue 6914: Make android use the GPU (if available) for UI and browsing (안드로이드 이슈 페이지)
 
(이상)
 
Posted by ingeeC
,
HTML5 일정 현황 및 계획
lynda.com Tutorial | HTML5 First Look—HTML5 timeline (
http://www.youtube.com/watch?v=tJurCyWJW9k) 에서 발췌

  • 2004: WHATWG 발족, "Web Application and Compound Documents" 워크샵
  • 2005: Web Application 1.0 초안 (Working Draft) 발표
  • 2007: W3C가 WHATWG의 작업내용을 수용, HTML5 초안 (Working Draft)을 발표함
  • 2009: HTML5 초안 (Working Draft)에 대한 Last Call 시작됨
  • 2012: HTML5 스펙을 Candidate 상태로 레벨 업 (예정)
  • 2022: HTML5 스펙을 Recommendation(최종안) 상태로 레벨 업 (예정)
  • 그리고...
  • 2009: HTML5 에 대한 대중의 관심이 급격히 커짐
  • 2010: 초안 (Working Draft)에 대한 Last Call 과정이 진행중
     * 초안의 일부 항목들은 무척 성숙한 단계에 있음
     * 점점 더 많은 기기와 브라우저들이 HTML5의 일부 항목들을 지원하고 있음
     * 따라서 HTML5의 일부 기술은 2022년 최종 스펙 발표까지 기다릴 필요 없이 지금 당장(!) 사용할 수 있음

W3C 산하 HTML5 표준화 워킹그룹과 표준화 기술 분야
2011년, W3C HTML5 표준화 동향 및 전망 (
http://www.wonsuk73.com/category/HTML5%20%ED%91%9C%EC%A4%80%20%EA%B8%B0%EC%88%A0) 에서 발췌

WG 

표준개발 범위

개발 표준 현황

HTML WG

HTML5 마크업 관련 표준 개발

-   HTML5

-   HTML+RDFa

-   HTML Microdata

-   HTML Canvas 2D Context

Web Application WG

웹 애플리케이션 개발에 필요한 웹소켓, 웹워커, IndexedDB, FileAPI 등을 포함하여 HTML5와 관련된 주요 API 표준 개발

-   Web Sockets API

-   Web Storage

-   Web Workers

-   Indexed Database API

-   Server-Sent Events

-   Cross-Origin Resource Sharing (CORS)

-   HTML5 Web Messaging

-   Clipboard Operations

-   File API

-   File API: Directories and System

-   File API: Writer

-   Programmable HTTP Caching and Serving

Device APIs and Policy WG

데스크탑, 랩탑, 모바일 인터넷 단말(MID), 핸드폰 등 다양한 기기의 웹 브라우저에서 일정, 업무, 연락처, 카메라, 메시지, 시스템 정보, 이벤트 등의 다양한 단말 기능을 사용할 수 있도록 하는 API 표준

-   Contacts API

-   The Calendar API

-   The Media Capture API

-   The Messaging API

-   The System Information API

Geolocation WG

Geolocation API를 포함하여 가속센서, 방향센서 등 센서에 관련된 표준 개발

-   Geolocation API

-   DeviceOrientation Event

Web Notification WG

사용자에게 알려주기 위해 필요한 Notification과 관련된 API 표준으로, Notification과 관련하여 사용자 인터액션(Interaction) 관리에 필요한 이벤트에 대한 표준도 포함

-   Web Notifications

Web Performance WG

웹 브라우저의 특징들과 API들에 대한 애플리케이션 성능 측정에 대한 표준 개발

-   Navigation Timing

Web Event WG

모든 디바이스의 멀티터치,-테블릿 입력 등의 사용을 가능하게 하는 방법에 대한  표준 개발

-   Web Events

Web Real-Time Communications WG

웹 브라우저에서 P2P(Peer to Peer) 오디오, 비디오 등 실시간 통신을 위한 클라이언트 API 표준 개발

-   WG Charter 검토 중



(끝)

Posted by ingeeC
,