'JavaScript'에 해당되는 글 140건

  1. 2011.11.15 웹 소프트웨어 시장의 새로운 Role 모델, 자바스크립트 (6)
  2. 2011.10.23 JavaScript. 실행 컨텍스트 이해(Execution Contexts) (2)
  3. 2011.10.12 JavaScript. The Core (3)
  4. 2011.06.24 JavaScript History 정리 자료
  5. 2011.05.29 자바스크립트 닌자에 의미를 부여해 본다. (2)
  6. 2011.05.08 자바스크립트. 그 다음 구글 Traceur (2)
  7. 2011.02.26 2011년은 자바스크립트 개발자 전성시대 (9)
  8. 2010.04.17 Ext JS 3.2 API Documentation Desktop App release! (2)
  9. 2010.03.19 RIA 시장에 오픈웹 기술 "Ext JS" 재 조명 (9)
  10. 2010.03.06 @kangax의 JavaScript Quiz 풀이 (8)
  11. 2010.03.06 작지만 빠른 ListView 클래스
  12. 2010.03.03 작지만 강한 DataView 클래스 (2)
  13. 2010.03.02 What's xtype in Ext JS?
  14. 2010.03.01 Ext JS 를 이용한 고급 웹 애플리케이션 UI 설계 – Grid, Store 편 (8)
  15. 2010.02.21 Ext JS 를 이용한 고급 웹 애플리케이션 UI 설계 - Viewport 편 (2)
  16. 2010.02.11 모질라 Jetpack - GPU를 활용한 JavaScript 가속화 시도 (2)
  17. 2010.01.30 JavaScript 필수 프로그래밍 언어로 !! (6)
  18. 2010.01.27 VCL(Visual Component Library) in Ext JS (2)
  19. 2010.01.02 JavaScript in 2009 and 2010 (6)
  20. 2009.12.21 Ext JS 3.1 Designed Class Diagram RC0 (8)
  21. 2009.12.09 (예정) Ext JS 3.0.3 Designed Class Diagram
  22. 2009.08.31 TestSwarm Alpha 버젼 공개. (4)
  23. 2009.08.27 JavaScript 디버거 “JSDT” (4)
  24. 2009.04.15 JSARToolkit 테스트 영상 (2)
  25. 2009.04.07 Ext Core 3.0 Beta 릴리즈
이번 kth 에서 진행하는 H3 컨퍼런스에서 어떤 이야기로 풀어나갈까...

지난 5년 자바스크립트와 함께 지내오며 많은 경험들을 토해내려고 무척 고민중입니다.
하지만 짧은 시간에 디테일을 모두 보여드릴 수가 없는게 실정입니다.

그래도 다행인건 제가 우주로 나간다거나 IT 를 떠날 것은 아니기 때문에
이번 컨퍼런스가 끝이라고 생각하지는 않습니다. :-) 


웹 소프트웨어 시장의 새로운 롤 모델, 자바스크립트



이번 '자바스크립트의 새로운 롤 모델'이라는 주제에 포함된 내용들입니다.

큼직큼직한 내용들이 꾀 많네요. 

- JavaScript History and Standard trend  이야기만 하더라도 벌써 40여 페이지가 넘어가네요.

물론 다른 내용들도 그만큼 되거나 더 많겠죠.  책을 써도 될 분량입니다.
몇가지 내용을 먼저 소개하려 합니다.

네스케이프의 짐 클락과 마크 앤드리슨



이번 제 발표에는 자바스크립트 계에 유명인사들이 총 출동됩니다.  물론 나오지 않는 분들도 계시죠. '스티브 사우더스' 를 꼭 모셔오고 싶었으나 워낙에 기술적인 곳에 치우치다보니 이런 자료에 나오고 싶지 않다는 의사를 표하셨습니다. ;-)

ECMA-262 4th 가 중단된 이유가 무엇일까?



왜!!!!! 자바스크립트 4번째 에디션은 중단에 이르게 되었을까요?
표준화 워킹 그룹에서 무슨일들이 있었을까? 
그리고 크락포드는 왜 열을 내고 있을지....

Next JavaScript 를 위한 Ruby 와 Python 그리고 Haskell 영향을 받은 CoffeeScript



자바스크립트의 어머니이자 모질라의 CTO 인 브랜든 아이크가 전하는 자바스크립트 소식들도 있습니다.

Node.js 창시자가 말하는 Node.js 는 무엇일까?



인터넷 서버 시장의 4번째 아키텍쳐의 변화에 대한 기대치를 공유하고 그에 큰 영향을 미친 Node.js 를 개발한 라이언도 모셨네요.  Node.js 와 관련해 서버측 자바스크립트를 살펴보는 시간도 갖을 예정입니다.

그외에도 여기에 다 소개드리지 못한 내용들이 굉장히 많습니다. 
이 포스팅으로 소개드리지 못한 내용들은 오셔서 함께 들어보세요. 

 - 플랫폼화가 되기 위해 준비해왔던 지난 Web 2.0
 - 모바일 시장을 삼켜버린 웹
 - 브라우저의 신기술 구현 전쟁과 성능 경쟁
 - 웹 소프트웨어 개발 체계화를 위한 발전


행사일은 11월 30일 / 사전 등록은 11월 21일 부터입니다.
그리고 가장 중요한 세션의 크기를 결정하는 관심 세션 투표입니다.  
투표 : http://h3.paran.com/vote/

신고
Posted by Rhio.kim
TAG H3, JavaScript, KTH
이전 번역 문서인 JavaScript. The Core 에 이은 Chapter 1. Execution Contexts 를 번역하였습니다.

자바스크립트에서 실행 컨텍스트에 대한 이해는 매우 중요합니다.  모든 코드의 흐름(Stack) 을 이해하고 this, scope chain, closure 를 이해하는데 있어 꼭 알아야 할 개념중의 하나입니다.

원본 : http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/
번역 : http://frends.kr/post/javascript-the-core/


신고

'JavaScript > Core' 카테고리의 다른 글

JavaScript. 실행 컨텍스트 이해(Execution Contexts)  (2) 2011.10.23
JavaScript. The Core  (3) 2011.10.12
JavaScript History 정리 자료  (0) 2011.06.24
jQuery의 현재 그리고 미래  (0) 2008.10.07
Posted by Rhio.kim
블로그 포스팅 정말 오랜만이네요. 
그런데 쓸 내용도 없지만 막상 쓰려니 문체를 어떻게 해야할지 애매해지네요. ㅋㅋㅋ

러시아 자바스크립트 에반젤리스트 Dmitry A. Soshnikov 가 작성한 JavaScript. The Core 를 번역하였습니다.

원본 : http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
번역 : http://frends.kr/topics/javascript-core/

시간이 된다면 한번쯤 읽어 보면 좋겠네요.
추가적으로 위의 내용을 좀더 요약 정리한 내용은 Function works in JavaScript 에서 참고하세요. 


 
신고

'JavaScript > Core' 카테고리의 다른 글

JavaScript. 실행 컨텍스트 이해(Execution Contexts)  (2) 2011.10.23
JavaScript. The Core  (3) 2011.10.12
JavaScript History 정리 자료  (0) 2011.06.24
jQuery의 현재 그리고 미래  (0) 2008.10.07
Posted by Rhio.kim
엊그제 Brendan Eich 가 자바스크립트 히스토리에 대해서 이야기를 해서 정리차 자료를 찾아 정리했봤습니다.

고급 스킬로 가기전에 자바스크립트의 역사에 대해서 알아 두시는 것도 좋지 않을까 해서 정리해 보았습니다. :)
원문 : http://www.slideshare.net/badatmath/js-shistory
신고

'JavaScript > Core' 카테고리의 다른 글

JavaScript. 실행 컨텍스트 이해(Execution Contexts)  (2) 2011.10.23
JavaScript. The Core  (3) 2011.10.12
JavaScript History 정리 자료  (0) 2011.06.24
jQuery의 현재 그리고 미래  (0) 2008.10.07
Posted by Rhio.kim

자바스크립트 개발자들은 왜? 닌자라고 할까?

물론 외국 자바스크립트 개발자들의 문화에서 나온 이야기이다.


어떤 뜻을 가지고 생겨난 호칭이겠지만 나는 이렇게 정의해 본다. 





본디 닌자라 함은?



닌자는 일명 시노비노모노로 탐정, 첩자, 자객, 도둑 등으로 활동한다.

특히 이 닌자는 변장과 은신을 기본으로 암살, 교란, 추리 등의 달인으로 자신의 모습을 숨기기 위해 얼굴에 가면, 복면, 안면피구 등을 쓰거나 옷으로만 바꿀 수도 있다.  


http://ko.wikipedia.org/wiki/%EB%8B%8C%EC%9E%90


위키의 내용을 통해서 닌자의 특징을 간단히 알 수 있다.

바로 자신의 모습을 숨기기 위해 변장과 은신을 잘하는 자객이라 할 수 있다.


그런데 과연 자바스크립트와 무슨 연관이 있기에 이 자객을 가져다 붙였냐라는 의문을 갖는다.



자바스크립트를 곰곰히 생각해보면...!


이 글을 읽기 전에 '나는 자바스크립트 다' 라고 가정하고 읽으면 좀더 빠르게 이해할 수 있을지 모르겠다.


브라우저에서 동작하는 웹 스크립팅 언어이다. 

브라우저에서 다 냅두고 자바스크립트만 때어내보면 약간 정리가 된다.


자 우리가 흔히 자바스크립트 기술이라고 생각하는 것들을 나열해보면 다음과 같다.


1. DOM

2. DOM Event Model

3. XMLHttpRequest

4. Window

5. Web API(WebSocket, WebGL, WebDataBase ... )
... 


우리는 위의 기능을 자바스크립트 구문으로 자유롭게 다루고 프로그래밍을 통해 조작한다.


지만 자바스크립트 본연의 것은 아니다.  자신의 모습을 숨기기 위해 검은 옷과 복면을 쓴 닌자처럼...


바로 자바스크립트는 ECMAScript 라 하여 ECMA International 에서 명세화한 자바스크립트 표준이고 그것을 브라우저가 구현한 것이다.


여기에는 위에 언급한 5가지의 내용은 단 한가지도 정의되어 있지 않다. 이것들은 W3C 에서 모두 표준화하였고 브라우저 벤더들이 브라우저에 그 기능들을 구현해 놓은 것이다.


위의 기술을 좀더 상세히 살펴보며 DOM은 HTML로 작성된 문서를 브라우저내에서 판독하기 위한 '문서 객체 모델' 이다.

DOM Event Model 은 이 문서 객체 모델에서 각각의 요소(엘리먼트)들이 갖을 수 있는 "DOM 이벤트 모델" 이다.

다른것들도 살펴보면 유사하다. 흔히 Ajax 라고 알고 있는 XMLHttpRequest 객체는 브라우저에서 비동기 통신을 하기 위해 각 운영체제에서 제공하는 HTTP API 의 일부분을 랩핑하여 만들어 놓은 객체이다. 


또한 자주 사용하는 시스템 타이머에 의존적인 setTimeout, setInterval 그리고 브라우저의 정보와 

브라우징 컨텍스트 제어를 위한 self, opener, top 등 그리고 브라우저 URI 정보를 담고 있는 location 객체들은 바로 window 객체에서 구현되어 있다. 기타 등등...


위에서 언급한 기술들은 자바스크립트로 프로그래밍 되지만 엄밀히 말하면 자바스크립트의 기술은 아닌 것이다. 브라우저의 기술을 자바스크립트는 자기것인 마냥 플레이 하고 있을 뿐이다. 일종의 분장술로 말이다.




자바스크립트 닌자.


자바스크립트 닌자라고 할 수 있는 것은 이렇다.


자바스크립트는 브라우저의 다양한 기술(DOM, DOM Event Model, XMLHttpRequest 등)로 변장을 하고 브라우저 내에서 자객의 역할을 한다는 것이다. 실제로 그 자객의 역할은 자바스크립트를 다루는 개발자들인 것이다.


매칭을 해보면 다음과 같이 정리할 수 있다.


 자바스크립트 : ECMAScript

 분장, 은닉, 가면, 분신 : DOM, DOM Event Model, XMLHttpRequest, Window, Web APIs


또한 앞으로 웹 기술을 좀더 다양해질 것이고 그런 기술들은 브라우저에서 구현되어질 것이고 그것들을 제어하기 위한 프로그래밍 언어는 자바스크립트가 유일하다.


거기에 더하여 닌자는 공간의 제약이 없이 어디든 날아다닐 수 있다.  과거에는 브라우저 위에서 은닉과 분장술을 이용해 웹 공간을 날아다녔다면 이제 서버시스템과 긴밀하게 날아다닐 수 있게 되어지고 있다. 물론 모바일 디바이스에서도 마찬가지다.




그 의미를 좀더 새기면...


물론 자바스크립트를 다룬다고 하여 닌자라는 호칭을 모두 말할 수 있는 것은 아니다.


진정한 닌자라면 단순히 변장과 은신의 기술만 뛰어나거나 칼만 잘 휘두르는게 아닌 브라우저 기술에 전반적으로 잘 이해를 하고 잘 다루며 그 기술들을 자바스크립트로 잘 융화시키는 자바스크립트 개발자이다.




정리


개발자를 어떻게 칭하던 사실... 그건 중요한건 아니다.

단지 닌자의 의미와 자바스크립트 개발자의 특징에 공통점이 있고 일종의 개발자 문화일 뿐이다.


누구는 이런 정리 시시콜콜하게 들릴지 모르고 닌자라는 단어 자체의 거부감이 있을지 모르고 그 누군가는 재미있는 발상이구나 라고 할 수도 있겠다.


굳이 이런 의미를 시간내어 정리하는 것이 과연 무슨 의미와 필요가 있겠는가 하는 생각도 해보지만 



시노비 최고의 기술인 분신술



단지 나는 자바스크립트 개발자로써 앞으로의 소프트웨어 시장에서 닌자로 살고 싶을 뿐이다.


사실 이 글을 2011.05.23 일 오전 1시 40분 경에 완료했지만 언제 올릴지는 잘 모르겠다.

신고

'JavaScript' 카테고리의 다른 글

자바스크립트 닌자에 의미를 부여해 본다.  (2) 2011.05.29
Posted by Rhio.kim

구글과 자바스크립트


차세대 자바스크립트라는 글을 쓰기에 앞서 구글에 대해서 간략히 정리가 필요하다.

구글은 ECMA-262 4th 스펙 표준화에 참여하였고 다른 브라우저 벤더들도 참가하였다.


이때의 ECMA Technical Committe 39(TC39)가 진행한 ECMA-262 4 번째 스펙

(이때의 ECMA Technical Committe 39(TC39) 가 진행한 프로젝트 명은  Harmony!)


브라우저 벤더들이 대부분이였고 Adobe도 참여하였었다.  많은 이야기가 메일링으로 오갔으며 스펙의 분량은 점점 넓어지고 많은 부분의 사양을 재 작성하는 상황에 이르렀고 결국 실패로 돌아가게 되었습니다.  하지만 어느 정도의 뼈대가 갖춰졌었는지 Adobe 는 최종 권고가 나지 않는 스펙의 일부를 ActionScript 에 적용하였고. ActionScript 3.0 으로 2.x 이하 버젼보다 좀더 객체 지향적인 언어로 탈바뀜하게 되었습니다.


이때 즈음 구글은 ECMA 활동뿐 아니라 HTML5 의 주도적인 표준화에 참여하였고 JavaScript 의 표준 사양인 ECMA-262 표준에도 공헌하였다.
 

물론 이는 앞으로의 웹 시장에 굉장히 중요한 역할을 할것이라는 것을 충분히 알았고 자사의 다양한 플랫폼 유지, 개발을 위한 Go, Python 과 같이 기본 언어가 될 것이기에 나름 철학을 담아 노력을 해왔던 것이다.


(비록 실패로 돌아갔던 Harmony 프로젝트이지만 구글은 변화의 필요성을 알고 있고, 그때의 불 필요한 기업간의 의견 마찰을 피하고 좀더 나은 방식을 택한 것이라 보여진다. ) 
비록 실패로 돌아갔던 4번째 표준안은 stritc mode, native JSON 이 추가되어 ECMA-262 5th 로 발표하게 되었고 4번째 표준안에서 나온 이야기는 harmony 라는 프로젝트로 최근까지 논의되어 왔다.   


구글도 다음 세대의 자바스크립트 표준안을 위해 개발자 커뮤니티의 의견을 수렴하기 위해 오늘 소개하려는 Traceur프로젝트는 진행하고 있다.


자바스크립트는 오픈 웹 기술의 일부이고 이젠 커뮤니티의 힘으로도 충분히 표준안을 정립해 갈 수 있다고 생각한 것이다. 


사실 개인적인 잡담이고 더글러스 크록포드도 이와같이 이야기 했지만 ECMA 표준 재단은 정신을 차리고 열의를 보였으면 한다는 말을 하고 싶다.
 

그래야 나같은 자바스크립트를 주로 하는 프론트앤드 기술자들이 플레이 그라운드를 좀 누빌것 아닌가?





다음 세대의 자바스크립트


이번 JSConf 2011 에서는 차세대 자바스크립트에 대한 제안하는 세션들이 몇가지 선보였다. 그중에 CoffeeScript 에 대한 이야기와 구글의 Traceur 를 제안하었다. 

그리고 몇일전 구글은 트레이서 컴파일러 프로젝트를 발표했다. 물론 google code 를 통해 오픈 소스 기반으로 진행된다.  


내용을 살펴보니 차세대 자바스크립트라는 명목하에 ECMA-262 4th 표준 마련이 실패로 돌아가 그때 협의된 결과를 가지고 커뮤니티의 힘을 빌어 새롭게 진행하고자 하는 것이 살짝 엿보인다.


일단 목표는 자바스크립트 언어의 새로운 기능들이 추가되고 좀더 향상시켜 브라우저에서 직접적으로 컴파일 될 수 있고 또한 이로써 속도를 향상 시키는데 있다.


그럼 Traceur를 약간 살펴볼까 한다.
 


Getting Started


간단히 hello world 를 특정 엘리먼트에 표시하는 데모는 다음과 같다.


<html>

  ...

  <body>

    <script type="text/traceur">

      class Greeter {

        new(message) {

          this.message = message;

        }


        greet() {

          let element = document.querySelector('#message');

          element.innerHTML = this.message;

        }

      };


      let greeter = new Greeter('Hello, world!');

      greeter.greet();

    </script>

    ...

  </body>

</html>


위의 코드에서 평범하지 않는 ECMAScript 가 두군데 있다. 그것은 class 정의와 let 변수 설정 부분이다. 또 하나 특별한게 있다면 script 태그의 type 이 text/traceur 이라는 것이다.


Compiling


<html>

  <head>

    ...

    <script src="http://traceur-compiler.googlecode.com/svn/branches/v0.10/src/traceur.js"

        type="text/javascript"></script>

  </head>

  ...

</html>


컴파일을 해보고자 한다면 위와 같이 traceur.js 를 text/javascript 형태로 추가를 해주어야 하며 traceur.js 는 트레이서 자바스크립트 컴파일러 의 진입점이고 이 라이브러리 자체만으로는 아무것도 할 수 없고 bootstrap.js 를 함께 추가해야 traceur 코드를 컴파일할 수 있게 된다.


<html>

  <head>

    ...

    <script src="http://traceur-compiler.googlecode.com/svn/branches/v0.10/src/traceur.js"

        type="text/javascript"></script>

    <script src="http://traceur-compiler.googlecode.com/svn/branches/v0.10/src/bootstrap.js"

        type="text/javascript"></script>

  </head>

  ...

</html>



Language Features


트레이서에서 제공하는 모든 분법은 ECMA-262 4th 스펙에서 모두 논의되었던 내용을 기반으로 하고 있다.

부연 설명은 없고 제공하는 스펙 문서를 통해 습득하기를 권장한다.


Traceur Language Feature : http://code.google.com/p/traceur-compiler/wiki/LanguageFeatures

ECMA-262 4th proposal : http://wiki.ecmascript.org/doku.php?id=harmony:proposals



앞으로


국외 커뮤니티에서는 자바스크립트의 새로운 이름이 필요하지 않겠냐는 이야기(JavaScript needs a new name. What should it be?)도 오가기도 하고 있고 구글의 이런 실험은 다음 자바스크립트에 어떤 변화를 가져다 줄지 기대되고 개인적으로는 단순히 실험에서 끝나지 않고 많은 공헌자에 의해서 발전되고 개발자들에게 친근한 언어로 많이 갖춘 언어로 발전하였으면 한다.


가장 중요한건 표준 사양이 되어야 하고 스펙 문서도 좀 발전되었으면 한다는 것. ^-^/



Reference
 

 - http://code.google.com/p/traceur-compiler/ 

 - JSConf 2011 : http://traceur-compiler.googlecode.com/svn/branches/v0.10/presentation/index.html#1

 - Traceur Demo : http://traceur-compiler.googlecode.com/svn/branches/v0.10/demo/repl.html



See More


글을 올려는 시점에서 국외에서도 포스팅이 있어 함께 읽어보면 좋을 것 같다. http://www.i-programmer.info/news/98-languages/2395-javascript-creator-talks-about-the-future.html

이 친구 이번 JSConf 2011에서 차세대 자바스크립트(CoffeeScript)에 대한 제안을 했다.

그리고 차세대 표준화에서 실패를 번복해서는 안된다고 글의 마지막에 제안하고 있다. 동감하는 바이다.


이런 변화를 보니 ECMAScript 3번째 스펙에서 5번째 스펙이 나오기까지의 기간보다 더 빠르게 6번째 사양의 표준화는 빠르게 진행되리라 예상되어진다.

2011.5.10 추가.

The Future of JavaScript is in Your Hands : http://www.readwriteweb.com/hack/2011/05/developers-the-future-of-javas.php 

신고
Posted by Rhio.kim
오랜만에 포스팅이네요.

지난 포스팅이 뜸한 시간동안 개인적으로 오프라인 활동과 대외활동을 하는데 많은 시간을 소비했네요.
또한 이직과 함께 새로운 문화에 적응하는 시간으로 많은 시간을 보냈습니다.

바로 어제 삼성동 섬유센터 이벤트홀에서 웹 앱스 퓨처 컨퍼런스가 개최되었는데요.
그중 JavaScript 분야의 하나의 세션을 맡게 되어 '2011 자바스크립트 개발자 전성시대' 라는 주제로 발표하였습니다.

몇몇 분들께서 자료 공유 요청을 해주셔서 공유합니다.

1. 웹 앱스 퓨처 컨퍼런스 2011 발표자료.
2. 베틀 테트리스 데모 영상
    : iOS 4.2 부터 지원되기 시작한 아이폰의 모션 이벤트와 HTML5 WebSocket 그리고 서버사이드 자바스크립트인 
      Node.js 를 이용한 소켓 서버로 구성된 베틀 테트리스 데모입니다.
3. 웹 기술과 Arduino 를 이용한 LED 컨트롤 데모 영상
    : 특히 발표에서 가장 많은 관심을 갖어주었던 데모인데요.  
      아두이노(Arduino) 라는 오픈 하드웨어 플랫폼의 마이크로 컨트롤러입니다.
4. 극히 개발자적이고 돈 안되는 결과물 ^-^/
    : 네이버 맵 API와 트위터 API 그리고 3번의 기술을 조합한 트위터 클라이언트 입니다.


웹 앱스 퓨처 컨퍼런스 2011 에 발표한 내용과 관련하여 ZDNet Korea에 기사가 개제되었습니다.

http://www.zdnet.co.kr/ArticleView.asp?artice_id=20110301074637


2011 JavaScript Developer Generation
신고
Posted by Rhio.kim

Titanium 으로 몇가지 테스트 겸 Ext JS 오프라인 API documentation과 Example를 오프라인 형태로 만들어 보았습니다.
Ext JS 를 자주 사용하시는 분들께는 작은 도움이 되리라 생각하면서...

요번주는 Titanium과 함께 즐거운 한주였던것 같습니다.
매우 흥미롭고 재미있습니다. 

특히 Ext JS는 알다시피 데스크탑 형태의 성숙한 UI를 제공하기 때문에 Titanium과 연계되어 그 강력함이 배가될 수 있는 가능성을 느끼게 되었던것 같습니다. :)

이 앱의 기본 동작은 링크를 클릭하여도 되고 API 나 Example 의 이동은 컨텍스트 메뉴를 통해서 쉽게 이동할 수 있습니다.  API 참조나 예제 참조를 유연하게 연결하기 위해서입니다. (사실 제가 필요한 부분을 컨텍스트 메뉴에 담은 것입니다.)

두가지 외에는 대부분 온라인으로 연결되어지게 해 두었습니다.




OSX 10.5 Intel Download Application
Linux Intel 32-bit Download Application
Linux Intel 64-bit Download Application
Windows 32-bit Download Application


ScreenShot


신고
Posted by Rhio.kim

Titanium 으로 몇가지 테스트 겸 Ext JS 오프라인 API documentation과 Example를 오프라인 형태로 만들어 보았습니다.
Ext JS 를 자주 사용하시는 분들께는 작은 도움이 되리라 생각하면서...

요번주는 Titanium과 함께 즐거운 한주였던것 같습니다.
매우 흥미롭고 재미있습니다. 

특히 Ext JS는 알다시피 데스크탑 형태의 성숙한 UI를 제공하기 때문에 Titanium과 연계되어 그 강력함이 배가될 수 있는 가능성을 느끼게 되었던것 같습니다. :)

이 앱의 기본 동작은 링크를 클릭하여도 되고 API 나 Example 의 이동은 컨텍스트 메뉴를 통해서 쉽게 이동할 수 있습니다.  API 참조나 예제 참조를 유연하게 연결하기 위해서입니다. (사실 제가 필요한 부분을 컨텍스트 메뉴에 담은 것입니다.)

두가지 외에는 대부분 온라인으로 연결되어지게 해 두었습니다.




OSX 10.5 Intel Download Application
Linux Intel 32-bit Download Application
Linux Intel 64-bit Download Application
Windows 32-bit Download Application


ScreenShot


신고
Posted by Rhio.kim

Flash와 Flex에 와 함께 찾아온 RIA 기술에 발전은 MS의 실버라이트와 Oracle의 JavaFX 과 함께 시장에서의 기대치를 극대화 했었다. 하지만 현재에 이르러는 RIA 기술 전반에 걸쳐 주춤하고 있는듯 해 보인다. 

Technology Radar 2010 소개글인 "JavaScript 필수 프로그래밍 언어로!!" 에서도 발표 하였지만 RIA 기술은 채택(adopt) 에서 접근(access) 단계로 무관심해도 될 단계로 다가가고 있다.  

최근 국외 indeed.com에서 RIA 기술 Job Trend 검색결과의 추이를 살펴 보니 Adobe의 Flex의 기술보다 보다 뒤늦게 2007년에 시작된 오픈 웹 기술인 JavaScript로 개발된 Ext JS 프레임워크가 Adobe Flex를 뛰어 넘었을 뿐 아니라 시장에서의 개발자 수요가 급격히 상승하고 있다.



http://www.indeed.com/jobtrends?q=javafx,+extjs,+adobe+flex&l=&relative=1

도대체 뭐길레 뜬금없이 JavaScript 프레임워크와 Flex와 JavaFX와 비교 할까?


Ext JS의 특징
Ext JS는 오직 JavaScript와 CSS로만 이루어진 JavaScript 프레임워크로 Flex가 갖는 대부분의 기술을 구현하고 있을 뿐 아니라 Google Web Toolkit인 Ext-GWT 버전으로 Java 개발자도 웹을 통해 성숙한 UI(Tab, Toolbar, Menu, Grid, Drag & Drop,Tree, Panel, Chart 등)를 손쉽게 구현할 수 있다는 장점도 있습니다.
















뿐만 아니라 최근에 Ext Designer라는 Ext JS 전용 RAD(Rapid Application Development)를 발표하였습니다.  이 도구는 웹 상에서 데스크탑 애플리케이션과 동일한 GUI를 웹 환경으로 빠르고 손쉽게 옮길 수 있도록 지원할 뿐 아니라 일반적으로 웹에서 이러한 GUI를 구축하기 위해서는 하나의 기능만 구현함에 있어서도 상당한 양의 JavaScript나 CSS, HTML 코드가 필요하지만 예를 들어 델파이나 비주얼 베이직, C++빌더에서 처럼 Ext JS도 원시코드를 개발자가 직접 작성하지 않고 간단한 설정 만으로도 웹에서 다양한 GUI를 구축할 수 있도록 합니다.




Ext JS 2010 Roadmap
이미 예상했던 데로 Ext JS는 올해에 목표로 mobile용으로 가벼운 UI 엔진을 Ext JS 프레임워크에 탑재할 계획을 가지고 있습니다.(개인적인 추측이 였습니다.) 댜양한 컴포넌트를 추가적으로 개발하고 Ext JS 4.0에서는 HTML5 WebSocket, Offline 지원을 계획을 가지고 있고 HTML5의 가시화와 함께 HTML5에 대한 지원도 이어질 것으로 보입니다.

Appcelerator사의 Titanium 이나 nitobi.com에서 후원중인 PhoneGap과 같은 솔루션은 플랫폼(Andorid, iPhone, Symbian)에 상관없이 JavaScript만으로 Device API에 접근하여 내장(Native) 애플리케이션을 개발할 수 있도록 지원하고 있습니다.  

더욱이 이런 오픈 웹 기술은 플러그인 기술인 Flash나 Silverlight 에 비해 가볍기 때문에 데스크탑에 비해 부족한 디바이스에서도 높은 성능을 통해 사용자에게 좋은 경험을 제공할 수 있을 것입니다.


단점이 있다면
Ext JS에는 한가지 뼈 아픈 추억을 가지고 있는데 바로 초창기 유명한 라이브러리인 prototype, YUI, jQuery의 Adapter로 동작을 해왔었으나 독립적인 플랫폼으로 파생되면서 회사와 개발을 유지하기 위해서 유료화로 전환 되었습니다.

이로 인해 국내 시장에서는 단순한 JavaScript 라이브러리의 경쟁에 있어서 비교 우위를 선정하기 위한 대상 이였을 뿐 이였고 거기에 더해 유료 라이브러리라는 딱지가 붙어서인지 그간 관심 밖의 이야기였던게 사실입니다.
이로 인해 레퍼런스가 필요한 개발자들에게는 찾아보기 힘든 국내 이용 사례, 한글 레퍼런스 덕분에 전전 긍긍 Ext JS 포럼을 쥐 잡듯이 뒤져야 했습니다.


하지만 희망이 있다면...
국내의 시장에서 실상 RIA의 기술이 얼마나 요구되어질 지 알 수는 없으나 오픈 웹 기술은 날로 발전하고 기대치는 HTML5로 인해 연일 증폭되고 있습니다.  거기에 더불어 모바일도 뜨거운 감자로 그 니즈는 어디로 튀어 오를지 모른는 것입니다. 

이렇듯 웹은 링크를 기반으로한 웹 서핑과 정보의 유통이였다면 현재와 미래에는 플랫폼으로 발전되고 그 위에 오픈 웹 기술을 통한 응용 애플리케이션의 수요가 증가할 것이라는 것은 현재의 흐름인 것은 분명해 보입니다.

여기에 Adobe의 Flash, Flex의 기술보다 아직 가야 할 길이 많이 남은 MS의 Silverlight와 까마득한 JavaFX와 오픈 웹 기술인 Ext JS. 과연 그 흐름은 어떻게 될까?



신고
Posted by Rhio.kim
짧은 코드의 문제였지만 꾀 오랜 시간을 들여서 풀이을 해봤습니다. 
@kangax가 블로그에 기재한 14개의 문제를 풀기 위해서 이해해야 할 부분 이외에 더 많은 내용을 알 수 있는 좋은 기회가 된 것 같습니다.  

 간편하게 프린트해서 볼 수 있도록 따로 PDF를 올려봅니다.



문제

( function( ) {
return typeof arguments;
) )( );


설명
일반적으로 arguments는 코드 블록 내에서 사용할 때에는 함수에 전달된 인자를 배열처럼 접근하게 되지만 arguments는 Array가 아닌 length와 index(0, 1 … n-1, n)를 속성으로 갖는 개체입니다.

function() { 
alert( arguments instanceof Array); //false
} )( );


사양
1. ECMA-262 5th 
A. 10.6 Arguments Object
B. 11.1.6 The Grouping Operator

정답
“object”





문제

var f = function g( ) { return 23; };
typeof g( );


설명
Function 생성자, 함수선언(FunctionDeclaration), 함수표현식(FunctionExpression), 함수 호출에 대한 정확한 이해가 선행되어야 한다.  아래의 4가지에 대한 구별하기 위한 문제이기도 하다.

1. Function 생성자에 정의된 sum변수에 할당함수
var sum = new Function( “x”, “y”, “return x + y;”);
2. sum으로 명명된 함수의 함수선언
function sum( x, y ) { return x + y; }
3. sum 변수에 할당된 익명함수 함수 표현식
var sum = function( x, y ) { return x + y; }
4. sum변수에 함수 표현식 plus이 할당되었다라고 명명
var sum = function plus( x, y ) { return x + y; }

위의 4가지는 거의 같은 역할을 하지만 아주 조금씩 다른점이 있다.

함수선언은 선언과 동시에 함수의 이름과 동일한 이름의 변수를 VariableEnvironment의 Environment Record에 생성한다.  따라서 함수 표현식으로 정의된 것과는 달리 함수 선언에 정의된 함수는 정의된 범위 내에서 이름을 사용할 수 있게 된다.
(MDC 와 ECMA-262 인용)

즉 아래의 코드는 함수의 선언으로 자동으로 g라는 변수가 생성되고 이 변수는 g 함수를 가리키게 된다.  (ECMAS-262spec 59p – 10.5 Declaration Binding Instantiation )

function g( ) { … }

하지만 문제에는 함수의 선언이 아닌 var 구문을 이용해 f 라는 변수를 선언하고 변수에 ‘함수표현식’ 즉 함수 리터럴을 할당한 것으로 함수 선언이 없다.  그래서 g 함수를 가리키는 변수는 존재하지 않게 된다.

var f = function g( ) { return 23; }

그런데 g 함수를 호출을 시도하기 때문에 undefined 인 g를 함수로서 호출하려고 하기 때문에 ReferenceError: g is not defined 이 발생하게 된다.


사양
1. MDC

2. ECMA-262 5th 
A. 10.5 Declaration Binding Instantiation
B. 11.2.5 Function Expressions
C. 13. Function Defintion


정답
Error





문제

function ( x ) {
delete x;
return x;
) ) ( 1 );


설명
이것은 delete 연산자(Operator)와 변수 구체화(Variable Instantiation)에 대한 이해를 묻는 문제이다.  
JavaScript의 delete 연산자는 특정 속성이 주어질 때 그 속성이 있는 개체에서 속성을 삭제한다.  하지만 이것은 모든 속성을 삭제할 수 있는 것은 아니다.  대상이 되는 객체 자신이 가진 속성이 아닌 것은 삭제할 수 없다.  

JavaScript의 모든 객체에는 prototype 체인에 의해서 외부 객체의 속성을 자신의 속성처럼 취하게 되지만 delete 연산 시에 이러한 속성을 발견하게 되더라도 제거되지 않는다.

function foo( ) { this.x = 21; }
foo.prototype.x = 12;
var o = new foo( );
alert( o.x );  //21
delete o.x;
alert( o.x ); //12

또한 개체의 속성은 ReadOnly와 DontDelete의 속성을 가질 수 있고 아래의 예시처럼 내장개체에 처음부터 존재하는 속성 중 DontDelete 속성들은 삭제되지 않는다.  하지만 내장 개체라 할 지라도 새롭게 지정하는 경우에는 DontDelete 속성이 아니기 때문에 삭제된다.

var arr = new Array(1,2,3);
delete arr.length;
alert(arr.length); //3
arr.newProperty = 21;
alert(arr.newProperty); //21
delete arr.newProperty;
alert(arr.newProperty; //undefined

이 문제를 이해하기 위해서는 delete 연산자뿐만 아니라 변수(variable)의 특징도 이해하고 있어야 한다.  var문을 사용하여 만들어지는 속성은 DontDelete 특성을 가진다.  즉 var 구문을 통해 선언된 변수는 삭제할 수 없고 함수 선언에 의해 생성되는 속성들도 같다.  함수 선언에 의해 생성되는 속성들은 함수가 실행될 때 생성되어지고 자동으로 소멸한다.  

<script>
var x = 21;
delete x;
alert( x ); // 21

function foo( ) {
var z = 12;
delete z;
alert( z );
}
foo( ); // 12
</script>

하지만 한가지 예외가 있는 것이 eval 함수를 사용하여 실행되는 코드에서 var 구문으로 변수를 생성하는 경우에는 DontDelete 특성이 없다. (만약 위의 코드를 firebug나 webinspector 에서 실행할 경우에는 DontDelete 습성이 없는 채로 생성됨)

결론적으로 인자로 넘어온 x 변수는 함수의 런타임에 x 라는 변수가 함수블록 내에 DontDelete 습성을 갖으며 생성되고 1의 값이 할당된다.  그래서 x는 삭제되지 않고 delete x; 구문은 false를 반환한다. (DontDelete 습성인 경우 false를 반환)


참고
1. MDC
2. Blog


사양
1. ECMA-262 5th
A. 11.4.1 The delete Operator
B. 11.1.6 The Grouping Operator
2. ECMA-262 3rd
A. 10.1.3 Variable Instantiation 
B. 10.2.2 Eval Code

정답
1





문제

var y = 1, x = y = typeof x;
x;


설명
이 것은 Comma( , ) 연산자와 Assignment( = ) 연산자의 조합에 있어서 연산자 우선순위에 대한 이해를 묻는 문제이다.  
MDC의 내용을 보면 다음과 같다.

Assignment( = ) 연산자는 오른쪽에서 왼쪽 (RightHandSideExpression)
Comma( , ) 연산자는 왼쪽에서 오른쪽 (LeftHandSideExpression)

Comma 연산자에 의해서 y = 1 가 코드가 선행 평가가 이루어지고 나서 x = y = typeof x; 가 평가되어진다.  그 다음 Assignment 연산자에 의해서 y = typeof x; 가 평가되고 x = y 가 순차적(right to left)으로 평가된다.  이때 y = typeof x; 는 x의 값은 정의되지 않았으므로 “undefined” 이다.  

결론적으로 ( x = ( y = “undefined” ) ) 처럼 되며 x, y는 “undefined”가 할당된다.


참고
1. MDC 


사양
1. ECMA-262 5th 
A. 11.1.6 Left-Hand-Side Expressions
B. 11.13.1 Simple Assignment
C. 11.13 Comma Operator ( , )


정답
“undefined”





문제

function f( f ) { 
return typeof f( ); 
} ) ( function ( ) { return 1; } ) );


설명
이 것은 코드를 상당히 난해하게 해놓았지만 의외로 간단한 문제이다.
함수 이름과 지역변수 이름이 같은 경우 어느 것이 우선하는 지에 대한 이해를 묻고 있다.  변수의 우선순위는 기본적으로 지역변수가 우선한다. 

x = 21;
function foo( x ) {
alert( x );
}
alert( x ); // 21
foo( 22 ); // 22

문제에서 제시한 코드는 외부 f 함수 호출과 함께 1을 반환하는 함수 리터럴이 인자로 넘어가고 이 인자는 외부 f 함수 블록 내에서 인자 f가 우선시 되어 typeof f( )는 함수 리터럴을 호출하고 1을 반환 받는다.

결국 return typeof 1; 이 된다.


사양
1. ECMA-262 5th 
A. 11.1.6 The Grouping Operator


정답
“number”





문제

var foo = {
bar: function( ) { return this.baz; },
baz: 1
};
function( ) {
return typeof arguments[0]();
} ) ( foo.bar );


설명
이 것은 처음 JavaScript 접할 때 난해한 것 중에 하나인 this에 대한 이해를 묻는 문제이다.  this 키워드는 일반적으로 다음의 세가지 형태일 때 사용되어 진다.

1. 인스턴스화 된 객체 내에서 메소드 호출(인스턴스화 된 객체가 암묵적으로 this 에 바인딩)
2. Function.call( scope, … ) 처럼 call 메소드를 통한 명시적 scope 지정
3. Function.apply(scope, …) 처럼 apply 메소드를 통한 명시적 scope 지정

위의 foo 객체의 경우에도 Object 리터럴도 변수에 할당될 때 new Object( ) 동일하게 평가된다.  그렇기 때문에 foo 는 인스턴스화 된 객체로 foo 객체가 this로 바인딩 되어 bar 메소드 호출 시 foo.baz 에 할당된 1값을 반환하게 된다.

익명함수로 foo.bar 의 함수 리터럴을 익명함수의 첫번째 인자로 넘겨 arguments[0] 에는 foo.bar의 함수 리터럴이 할당되어지고 arguments[0]( ) 는 foo.bar 함수를 실행하게 된다.

단 여기에서 주의해 할 것은 함수 리터럴의 scope(유효범위 즉 this)의 변화이다.  foo.bar( )를 호출하는 것과 arguments[0]에 담긴 함수 리터럴 즉 function() { return this.baz; } 를 호출하는 arguments[0]( ) 는 scope가 arguments로 변경됨을 알 수 있다.

결론적으로 arguments[0]( ) 는 arguments.function() { return this.baz; } 로 평가되어지고 arguments 에는 baz 속성은 존재하지 않아 할당된 값이 존재하지 않으므로 “undefined”가 반환된다.


사양
1. ECMA-262 5th
A. 11.1.1 The this Keyword
B. 11.1.5 Object Initialiser


정답
“undefined”





문제

var foo = {
bar: function( ) { return this.baz; }
baz: 1
}
typeof ( f = foo.bar )( );


설명
이것은 6번의 문제를 정확히 이해하고 있다면 쉽게 해결할 수 있는 문제이다.

먼저 f = foo.bar 를 보면 f 에 foo.bar 의 함수 리터럴이 할당된다.  그러면 ( f )( ); 로 축약된다. 이것은 다시 풀어보면 ( function( ) { return this.baz; } )( ) 와도 같고 이 함수 리터럴이 수행되는 scope는 즉 this는 window가 된다.
window 객체에도 baz가 존재하지 않기 때문에 6번 문제와 동일하게 “undefined”가 된다.


사양
6문항과 동일


정답
“undefined”





문제

var f = ( function f( ) { return 1; }, function g( ) { return 2; } )( );
typeof f;


설명
4번 문항에서도 언급했지만 Comma 연산자에 의해서 왼쪽요소에서 우측요소로 코드 평가가 진행된다.  

var x = ( 1, 2, 3 ); 
alert( x ); // 3;
var y = ( alert( 4 ), 5, function z( ) { return 6; } )( ); // 4
alert( y ); // 5

위의 예시로 알 수 있듯이 Comma 에 의해서 코드 평가가 좌에서 우측으로 진행되면서 alert( 4 ) 가 수행되는 것을 알 수 있다.  문제에 제시된 코드 역시 g 함수를 취하게 되면서 2를 반환하게 된다.


사양
4번 문항과 동일


정답
“number”





문제

var x = 1;
if ( function f( ) { } ) {
x += typeof f;
}
x;


설명
이 것은 2번 문항의 ‘함수선언(FunctionDeclaration)’ 과 ‘함수표현식(FunctionExpression)’에 대한 문항과 같다.  조건문에 함수표현식이 들어가 있기 때문에 true가 된다.  true가 되는 이유는 함수표현식의 경우에도 클로저(closure)를 반환하게 된다. (ECMA-262 5th 98p 참조)

그러므로 if( closure ) 는 만족하게 된다.  다만 함수 표현식은 함수의 선언과는 다르게 자동으로 동일한 이름의 변수가 생성되지 않는다.  그래서 x 는 숫자형 1 과 typeof f 의 문자열 “undefined” 의 += 연산자에 의해 x 값은 “1undefined”


사양
2번 문항과 유사


정답
“1undefined”





문제

var x = [typeof x, typeof y][1];
typeof typeof x;


설명
이 것은 이전 문제에 이어서 혼동을 유발하기 위해서 ( ) 에서 [ ]로 변경하였고 Comma 연산자 처럼 느끼도록 했다. ( 개인적인 느낌일 수도 있음 -.-a ) 이것은 Array 리터럴로 x 값에는 배열의 1 위치에 있는 typeof y 가 할당되게 된다.  y는 아무런 값이 할당되지 않았기 때문에 결국 x 는 “undefined” 가 된다.  

관건은 typeof 인데 typeof 의 경우 오른쪽에서 왼쪽 코드(right to left) 평가를 수행한다.  type of value  즉 “값 의 형태” 라고 해석하듯이 생각하면 쉽다.

결론은 typeof typeof x; 는 x는 문자열의 “undefined” 가 할당되어 있음으로 다음과 같이 풀어 쓸 수 있다.

typeof typeof “undefined”;
//typeof “undefined” == “string”
typeof “string”;
//typeof “string” == “string”


참고
1. MDC


사양
1. ECMA-262 5th 
A. 11.1.4 Array Initialiser
B. 11.4.3 The typeof Operator


정답
“string”





문제

function( foo ) {
return typeof foo.bar;
} )( { foo : { bar : 1 } } );


설명
이 것은 Object 리터럴에 접근을 묻는 문제로 함수 표현식을 호출할 때 넘기는 Object 리터럴 { foo : { bar : 1 } } 는 foo 인자값으로 지정되었기 때문에 foo.foo.bar 로 접근해야 한다.

문제에서는 foo.bar 로 접근하였기 때문에 “undefined”가 반환된다.


사양
1. ECMA-262 5th 
A. 11.2.1 Property Accessors


정답
“undefined”





문제

function f ( ) {
function f( ) { return 1; }
return f( );
function f( ) { return 2; }
} )( );


설명
이 것은 JavaScript 함수선언(FunctionDeclaration)에 오류가 아닌 함정이 숨어있다.  

TIP 컴파일 타임과 런타임
인터프리터에 의해서 해석되는 언어의 특징은 소스코드를 직접 실행하는 것인데 이 과정에서 코드의 해독단계와 실행단계로 나뉜다.  이것은 구문들의 표현식 검증, 소스 코드를 효율적인 중간 코드로 변환하거나 일부 시스템에서 이미 정의된 저장 코드를 수행하기 위해서이다. 

그렇기 때문에 중간에 코드상의 오류가 있는 경우 선행 코드조차 실행되지 않는다.  예를 들어 아래의 코드처럼 function 구문 자체(즉 함수표현식)가 잘못되었을 때 alert(‘12’) 조차도 수행되지 않는다.

<script>
var x = 12;
var y = 21;
alert( x );
function ( ) { 
alert( y ); 
</script>

즉 코드를 분석단계를 일컬어 컴파일 타임이라 하고 코드 분석이 완료되고 실제 코드를 실행하는 단계를 런타임 이라고 한다. 이것은 또한 ECMA-262 사양에 정의된 구문 수행을 위한 환경을 미리 만드는 과정이라고 할 수도 있다.

더불어 이런 특징 때문에 브라우저에서 JIT(Just In Time Compilation)을 통해 JavaScript의 속도 향상을 도모하고 있다.

함수 표현식과는 달리 함수 선언에서는 컴파일 타임에 함수명과 같은 이름으로 변수가 생성되기 때문에 다음과 같이 foo 함수가 호출된다.

<script>
foo( );
function foo( ) { alert( 21 ); }
</script>

하지만 다음의 코드는 에러가 발생한다.  왜냐하면 함수 표현식은 호출할 때 비로소 함수가 정의되기 때문이다.

<script>
foo( );
var foo = function( ) { alert( 21 ); }
</script>

여기서 알 수 있는 특징은 함수선언과 함수 표현식의 할당은 함수의 생성 시기가 다르다는 것이다.  즉 위의 코드에서는 컴파일 타임에 f 함수가 호출되고 f 함수 내에서 반환값이 다른 f 충첩 함수가 f 함수내의 지역함수로 선언된다.  하지만 동일한 이름(Identifier)이기 때문에 2를 반환하는 나중에 선언된 f 중첩함수가 덮어 씌여지게 되어 return f( )에서 f는 function f( ) { return 2; } 가 할당되어져 있다.

참고
1. The Definitive Guid, 5th Edition
A. 6.14 function
i. function 구문은 프로그램의 정적 구조를 정의하는 것뿐이다.
ii. JavaScript 코드가 구문 분석되고 컴파일 때 함수가 정의된다.

사양
1. ECMA-262 5th
A. 11.1.6 The Grouping Operator
B. 13. Function Definition

정답
2





문제

function f( ) { return f; }
new f( ) instanceof f;


설명
이 것은 new 연산자와 instanceof 연산자에 대해 이해를 묻는 문제입니다.
new 연산자는 개체를 생성하고 그것을 초기화하기 위해서 생성자(constructor) 함수를 호출한다.

function Identify( ) { … }
new Identify( arguments );

이 코드는 다음과 같은 과정을 통해 비로소 인스턴스가 생성된다.  

1. 아무런 속성이 정의되지 않은 새로운 객체를 생성한다.
2. 1에서 만든 객체 Prototype 내부 속성(__proto__ 속성)에 Identify.prototype 값을 설정한다.
만약 여기서 Identify.prototype 값에 지정할 객체가 없다면 Object.prototype값이 설정된다.
3. Identify를 호출한다.  이때 this 값은 1에서 만든 .객체로 할당되고 new 연산자와 함께 전달된 arguments는 그대로 설정된다.
4. 3의 반환값이 객체이면 그것을 반환하고 그렇지 않으면 1에서 만든 개체를 반환한다.

위의 과정을 이해하고 코드를 살펴보면 new f( )의 코드 평가의 결과는 f 함수가 호출되면서 자기 자신 function f( ) { return f; } 를 반환한다. 

function f( ) { return f; }
new f( )

결과적으로 new f( )는 f 함수가 되고 new f( ) instanceof f 는 f instanceof f 가 되며 이것은 false 이다.  자기 자신에 프로토타입 체인에 자신은 존재하지 않는다.

만약 new f( ) instanceof Function 혹은 new f( ) instanceof Object 의 경우에는 true이다.


참고
1. JavaScript Definitive Guide 5th 
A. 5.10.3 The Object-Creation Operator (new)
2. MDC


사양
1. ECMA-262 
A. 11.2.2 The new Operator
B. 13.2.2 [[Construct]]


정답
false





문제

with( function( x, undefined ) { } ) length;


설명
이것은 with 구문과 함수 리터럴에 대한 이해를 필요하는 문제이다.  
<script> … </script> 내에서 수행되는 변수, 함수등의 선언된 것들은 암묵적으로 구문 환경을 window 개체를 갖게 된다.  이 처럼 with 구문은 코드블록 내에서 암묵적인 구문 환경 개체를 지정하기 위한 것이다.

var foo = { bar : 12 };
with( foo ) {
alert( bar ); // 12
alert( zoo ); // ReferenceError: zoo is not defined
}

위의 간단한 예시처럼 with구문에 지정한 foo 개체는 코드블록 내에서 명시적으로 접근하는 것이아닌 암묵적인 구문 환경이 생성되어 진다.

즉 위의 문제는 with 구문에 주어진 함수 리터럴의 length property를 접근하는 문제인데 function literal은 Function 클래스로 생성되어지는 것이기 때문에 Function의 속성과 Function.prototype 개체의 속성에도 접근할 수 있다.


참고
1. MDC


사양 
1. ECMA-262 5th 
A. 12.10 The with Statement
B. 15.3.3 Properties of the Function Constructor


정답
2









신고
Posted by Rhio.kim

개요
view 전용 클래스는 DataView외에 Ext.list.ListView도 있다.  DataView는 템플릿 기반 데이터 바인딩을 제공하여 사용자 UI 뷰를 생성하기 위한 클래스인 반면 ListView는 단순한 Grid 형태로 데이터를 나열한다.

ListView는 DataView를 확장하지만 tpl 구성옵션은 없고 대신에 columns 옵션을 가지고 있어 Grid의 columnModel과 비슷하다.


주요 기능
1. 컬럼 크기 조정
2. 열 선택
3. 열 너비는 초기 상태로 컨테이너의 비율로 자동으로 조정됨
4. 어떤 포맷의 데이터라도 렌더링을 위한 템플릿을 사용할 수 있다.
5. 가로 스크롤은 지원되지 않는다.
6. 컬럼 편집이 지원하지 않는다.


구조적 이해

var panel = new Ext.Panel({
   configuration options,

   items : new Ext.ListView({
      store : new Ext.data.JsonStore({ … }), //Store 객체
      columns : [ { … }, { … } ], //Column 모델 지정
      autoHeight : true,
      multiSelect : true, //다중 선택 모델 여부
      itemSelector : ‘div.thumb-wrap’, //선택 모델 실행할 노드 지정
      emptyText : ‘No images to display’
   })
});

위의 소스는 DataView와는 대부분 비슷하나 한가지 차이점이 있다.  그것은 사용자 뷰를 생성하기 위한 tpl 옵션이 빠지고 column 옵션이 대체되면서 템플릿 객체의 사용보다 Grid 형태와 같은 빠르고 가벼운 뷰 기능을 제공하는 것이다. 그럼 컬럼을 잠깐 살펴보자.


Column


     columns : [
{ header : 'Product', width : .5, dataIndex : 'title' },
{ header : 'Max Price', width : .15, dataIndex : 'price_max', align: 'center', tpl: '{price_max:usMoney}' },
{ header : 'Min Price', width : .15, dataIndex : 'price_min', align: 'center', tpl: '{price_max:usMoney}' },
{ header : 'Brand', width : .2, dataIndex : 'brand' }
]

컬럼은 객체 배열로 구성되고 다음과 같은 주요 속성을 부여하여 컬럼을 설정할 수 있다.

1. header : Grid에서 표시되는 첫번째 컬럼의 텍스트
2. dataIndex : Store에 저장된 데이터 Record의 필드명
3. width : 컬럼의 너비(0~1 은 백분율, 1 ~ n pixel)
4. align : 컬럼 가로 정렬 (필수는 아님)
5. tpl : 데이터 템플릿 (필수는 아님)


요약
ListView의 경우도 DataView와 마찬가지로 BoxComponent를 상속받기 때문에 레이아웃 객체에 구성요소로 쉽게 추가 할 수 있다.  하지만 이것은 고속의 데이터 뷰를 제공하기 위한 클래스로 템플릿 기능은 제공하지 않는 단순 Grid 형태만을 지원한다.

만약 Grid의 더 많은 고급 기능을 사용하고 싶다면 Ext.grid에 있는 GridPanel 컴포넌트를 사용해야 한다.


예시
 



더 읽기
작지만 강한 DataView 클래스 - http://rhio.tistory.com/352
Ext JS를 이용한 고급 웹 애플리케이션 UI 설계 – Grid, Store 편 - http://rhio.tistory.com/350



신고
Posted by Rhio.kim

개요
view 전용 클래스는 DataView외에 Ext.list.ListView도 있다.  DataView는 템플릿 기반 데이터 바인딩을 제공하여 사용자 UI 뷰를 생성하기 위한 클래스인 반면 ListView는 단순한 Grid 형태로 데이터를 나열한다.

ListView는 DataView를 확장하지만 tpl 구성옵션은 없고 대신에 columns 옵션을 가지고 있어 Grid의 columnModel과 비슷하다.


주요 기능
1. 컬럼 크기 조정
2. 열 선택
3. 열 너비는 초기 상태로 컨테이너의 비율로 자동으로 조정됨
4. 어떤 포맷의 데이터라도 렌더링을 위한 템플릿을 사용할 수 있다.
5. 가로 스크롤은 지원되지 않는다.
6. 컬럼 편집이 지원하지 않는다.


구조적 이해

var panel = new Ext.Panel({
   configuration options,

   items : new Ext.ListView({
      store : new Ext.data.JsonStore({ … }), //Store 객체
      columns : [ { … }, { … } ], //Column 모델 지정
      autoHeight : true,
      multiSelect : true, //다중 선택 모델 여부
      itemSelector : ‘div.thumb-wrap’, //선택 모델 실행할 노드 지정
      emptyText : ‘No images to display’
   })
});

위의 소스는 DataView와는 대부분 비슷하나 한가지 차이점이 있다.  그것은 사용자 뷰를 생성하기 위한 tpl 옵션이 빠지고 column 옵션이 대체되면서 템플릿 객체의 사용보다 Grid 형태와 같은 빠르고 가벼운 뷰 기능을 제공하는 것이다. 그럼 컬럼을 잠깐 살펴보자.


Column


     columns : [
{ header : 'Product', width : .5, dataIndex : 'title' },
{ header : 'Max Price', width : .15, dataIndex : 'price_max', align: 'center', tpl: '{price_max:usMoney}' },
{ header : 'Min Price', width : .15, dataIndex : 'price_min', align: 'center', tpl: '{price_max:usMoney}' },
{ header : 'Brand', width : .2, dataIndex : 'brand' }
]

컬럼은 객체 배열로 구성되고 다음과 같은 주요 속성을 부여하여 컬럼을 설정할 수 있다.

1. header : Grid에서 표시되는 첫번째 컬럼의 텍스트
2. dataIndex : Store에 저장된 데이터 Record의 필드명
3. width : 컬럼의 너비(0~1 은 백분율, 1 ~ n pixel)
4. align : 컬럼 가로 정렬 (필수는 아님)
5. tpl : 데이터 템플릿 (필수는 아님)


요약
ListView의 경우도 DataView와 마찬가지로 BoxComponent를 상속받기 때문에 레이아웃 객체에 구성요소로 쉽게 추가 할 수 있다.  하지만 이것은 고속의 데이터 뷰를 제공하기 위한 클래스로 템플릿 기능은 제공하지 않는 단순 Grid 형태만을 지원한다.

만약 Grid의 더 많은 고급 기능을 사용하고 싶다면 Ext.grid에 있는 GridPanel 컴포넌트를 사용해야 한다.


예시
 



더 읽기
작지만 강한 DataView 클래스 - http://rhio.tistory.com/352
Ext JS를 이용한 고급 웹 애플리케이션 UI 설계 – Grid, Store 편 - http://rhio.tistory.com/350



신고
Posted by Rhio.kim

개요
  view 클래스는 템플릿 기반 데이터 바인딩을 제공하여 데이터를 사용자 지정 UI 뷰로 생성하기 위한 클래스이다.  1.1 버전에서 제공되던 JsonView는 JSON 데이터를 위한 헬퍼 클래스였으나 3.x로 발전하면서 사라졌고 2.0에서 처음 선보인 DataView는 특정 데이터 포맷에 상관없이 Store를 기반으로 한 뷰 기능으로 더욱 발전하였다. 

  그리고 DataView는 BoxComponent 를 상속받고 있어 레이아웃 객체에 구성요소(Component)로 쉽게 추가할 수 있게 되었고 또한 XTemplate 클래스를 지원하여 더 강력한 템플릿 처리가 가능하다.


구조
var panel = new Ext.Panel({
   configuration options,

   items : new Ext.DataView({ 
      store : new Ext.data.JsonStore({ … })   //데이터를 담은 Store객체
      tpl : new Ext.XTemplate( ‘…’ ),            //사용자 레이아웃 템플릿 객체
      autoHeight : true,
      multiSelect : true,                              //다중 선택 여부
      itemSelector : ‘div.thumb-wrap’,           //선택 모델이 수행될 노드 지정
      emptyText : ‘No images to display’
   })
});

위의 소스는 DataView를 꽉찬 형태로 store 구성옵션에 지정한 JsonStore를 이용해 캐시된 데이터를 tpl 구성옵션에 지정된 사용자 레이아웃 템플릿을 결합하여 Panel을 컴포넌트의 body 영역에 렌더링한다.

DataView 의 기능 중 또 하나의 중요한 것은 내장된(built-in) 선택 모델(Selection model)뿐만 아니라 click, doubleclick, mouseover, mouseout 등을 포함하여 컨테이너의 항목에서 발생하는 일반적인 이벤트를 제공한다.  이러한 특성을 이용하기 하고 어떤 노드에서 실행할 것인지에 대한 결정은 itemSelector 구성옵션을 지정해야 한다.


요약
DataView는 Store를 통해 캐시된 다양한 포맷의 데이터와 Template를 결합하여 사용자 정의 레이아웃을 적용하여 Data를 효과적으로 표시하고 선택 모델을 지원하여 사용자 인터렉션을 위한 매우 유용한 컴포넌트이다. 


예제
 



더 읽기
http://www.extjs.com/deploy/dev/examples/view/data-view.html


신고
Posted by Rhio.kim

Ext JS 에 있어서 xtype은 매우 중요한 개념을 갖는다.  몇몇 개발자들은 쉽게 흘러 지나가는 namespace 정도로 간단히 생각하고 있지만 Ext 에서 매우 중요한 개념이고 이 개념에 대해서 정확히 이해하고 넘어가야 한다.


정의

xtype
은 클래스를 나타내는 상징적인 명칭이며 그 이상도 그 이하도 아니다. 

예를 들어 Ext JS를 이용하여 새롭게 만든 클래스가 Ext.ux.MyGrid 이고 이 클래스는 인스턴스를 생성할 때 사용하는 일반적인 클래스 명이기도 하다.

이 말은 곧 다음과 같은 방법으로 Ext.ux.MyGrid 클래스에 xtype을 부여할 수 있다.

Ext.reg(‘mygrid’, Ext.ux.MyGrid);

여기서 xtype은 mygrid이고 일반적인 클래스명은 Ext.ux.MyGrid 이다.  위 예시는 새로운 xtype을 등록하는 것이다.  바꿔 말하면 xtype 인 mygrid를 Ext.ux.MyGrid와 연결하는 것이다.


장점

Ext JS로 개발되어진 복잡한 구성의 웹 애플리케이션에서 사용자의 액션에 응답하기 위해 새로운 객체들(Window, Form, Grid 등)이 생성되어 지는데 여기서 버튼이나 메뉴를 눌렀을 때 새로운 윈도우가 생성된다거나 패널 내에 그리드가 생성, 랜더링되어 화면상에 나타나는 처리가 필요할  때를 생각해보자.  

이런 것들은 Ext 2.x 이전 버전에서는 document가 로딩이 완료되는 시점에서 모든 객체들의 인스턴스가 생성되도록 처리되었었다.   달리 말해 사용자의 반응 유무에 상관없이 웹 애플리케이션을 구성하기 위한 모든 구성 요소들이 표시되지 않은 체로 document 어딘가에 렌더링 되어져 있고 이것은 즉 브라우저의 메모리에 상주한다는 의미와도 같다.

그리고 이것은 구성요소가 많지 않을 때는 큰 상관이 없지만 만약 그 숫자가 수십 수백 개에 이른다면 자원낭비이다.


지연 인스턴스(Lazy Instantiation)

만약 xtype을 가지고 있다면 메모리에는 다음과 같은 단순한 구성객체만 가지게 된다.

{ xtype : ‘mgrid’, border : false, width : 600, height : 400, … }

이것은 복잡하게 인스턴스화된 클래스처럼 브라우저의 자원을 낭비하지 않는다.
만약 구성객체로 정의된 웹 애플리케이션에서 어떤 일이 발생할까?

mygrid xtype로 등록한 구성객체가 인스턴스화가 필요한 시점에서 ComponentMgr 는 다음의 코드를 실행해서 Ext.ux.MyGrid 클래스의 객체를 생성하게 된다.

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}

다음과도 같다.

return new Ext.ux.MyGrid(config);

그리드의 인스턴스화하는 것은 렌더링과 브라우저에 표시하는 것을 동반할 것이고 기억해야 할 것은 오직 필요한 경우에만 인스턴스화 된다는 것이다.  모든 표준 xtype 목록들은 API문서에 있는 Ext.Component 에서 볼 수 있습니다

이 글은 http://www.extjs.com/learn/Tutorial:Xtype_defined 을 번역한 글입니다.

더 읽기
Outsider님 블로그 - Ext JS xtype 리스트 정리 - http://blog.outsider.ne.kr/414
Same article in my blog You can comment it there.
Writing a Big Application in Ext



신고
Posted by Rhio.kim
TAG ext JS, xtype
이번 포스팅은 Ext JS의 Grid와 Store 에 대한 구조적 원리에 대해서 심도있게 분석한 글로 Ext.data 패키지를 구성하고 있는 기본적인 Store 요소들이 Grid와 어떻게 동작하는 지에 대해서 자세히 설명합니다.


Structure
Ext JS의 Grid 애플리케이션을 만드는 것은 매우 간단하지만 프레임워크가 동작하는 내부 로직은 그렇게 단순하지가 않다.  그래서 각 구성요소들의 연결구조와 동작 방식을 이해하고 고급 웹 애플리케이션을 설계할 수 있도록 알아보자.

Grid 애플리케이션의 기본 컴포넌트인 Ext.grid.GridPanel은 다양한 구성옵션을 가지고 있다.  그중 그리드에 표현될 컬럼과 나열될 데이터 구조체는 필수 옵션이기 때문에 이 두 가지의 역할에 대해서도 잘 이해하고 넘어가야 한다.

 


GridPanel에 데이터를 표시하기 위해서는 일단 Store에 대한 지식이 선행되어야 한다.  

Tip
Ext JS는 GridPanel과 같이 Visual Component Library이나 Store와 같은 구조체를 JavaScript 객체지향 설계를 통하여 4GL(4th Generation Language) 형태로 잘 설계하였다.  이것은 언어(Language)라기 보다는 도구(Tool)의 성격을 가지고 있어 문제해결 방법을 일일이 기술하지 않고 원하는 작업만 명시함으로 자체적으로 필요한 문제를 해결한다.

몇 가지 용어 정의
Data Source : 가공되지 않는 데이터 리소스(JSON, XML, Array) 를 말한다.
Field Set : Store 에서 Data Source를 접근하기 위한 recodeType을 말하며 맵핑 테이블과 같다.
Record : Data Source를 캡슐화한 Ext.data.Record의 인스턴스를 말한다.


Basic Source

//Store 생성
var dataSource = new Ext.data.Store({
//HTTP 를 이용한 데이터 로드
/*url: '/twitter/api/status/user_timeline', //static file*/
proxy : new Ext.data.HttpProxy({  //proxy 클래스를 이용한 데이터 로드
        url		: '/twitter/api/status/public_timeline',
        method	: 'GET'
        }),
reader: new Ext.data.JsonReader( {
idProperty	: 'id',
        root		: 'status',
        totalProperty	: 'total'
} , [ Field Set ] )
});

//그리드 패널 생성
var grid = new Ext.grid.GridPanel({
configuration options,
store		: dataSource,
columns	: [
   { header: 'All Friends', width: 400, dataIndex: 'name' }/*,
   { header: 'Location', width : 200, dataIndex: 'location' }*/
]
});


Store
Ext JS 에서는 JSON, XML과 같은 데이터 구조를 손쉽게 접근하고 제어할 수 있도록 설계되었으며 이러한 데이터를 필요로 하는 다양한 컴포넌트들과 유연하게 동작하기 위해 매우 잘 설계되어있다.

이 클래스는 GridPanel, ComboBox, DataView와 같은 컴포넌트에 삽입할 Data Source 객체의 클라이언트 측 캐시를 캡슐화하는 기본 클래스이다.  캡슐화 한다는 것은 Data Source를 런타임 시에 지정하거나 수동으로 지정할 수 있을 뿐 아니라 서버로부터 변환된 데이터를 사용할 수도 있다.



Data Source를 Store 클래스에 지정하는 3가지 방법
Proxy 구성 옵션을 통한 데이터 소스 지정
var dataSource = new Ext.data.Store({
		url : ‘/server_side.php’	//1. 서버 사이드 호출
		url : ‘data.xml’		//2. Static한 데이터 파일 지정
		proxy : new Ext.data.HttpProxy({	//3. DataProxy를 사용
			url : ‘/server_side.php’
		}),
		reader : new Ext.data.XmlReader({ … })
	});
원격지의 데이터 요소를 로드하려고 할 때 url을 지정하거나 proxy 객체를 이용할 수 있다. 이것은 proxy 객체의 활용방법에서 좀더 자세히 알아보기로 하고 여기에서는 Store에서 원격지 데이터를 클라이언트 측으로 캐시하는 방법을 간단히 소스로 알아본다.


Store에 Configuration option으로 지정
var dataSource = new Ext.data.Store({
		data : [ 
		  { name : ‘rhio’, age : 20 },
		  { name : ‘edina’, age : 21 },
		  { name : ‘chan’, age : 21 }
		],
		reader : new Ext.data.ArrayReader({ … })
	});

Store에 수동으로 데이터 소스 지정
var data = [ 
	{ name : ‘rhio’, age : 20 },
	{ name : ‘edina’, age : 21 },
	{ name : ‘chan’, age : 21 }
];

var dataSource = new Ext.data.Store({
… ,
	reader : new Ext.data.ArrayReader({ … })
});
store.loadData(data);

Store객체에 Data Source 를 위의 3가지 방식을 이용하여 지정하였다면 이 Data Source를 요구에 맞게 판독할 수 있는 Reader클래스 인스턴스를 생성하여 Store의 구성옵션으로 지정하여야 한다.



Reader
Ext JS 에서는 웹 애플리케이션 개발 시 자주 사용하게 되는 Array, JSON, XML 전용 Reader 클래스 ArrayReader, JsonReader, XmlReader를 Ext.data 패키지에 포함시켜 두었습니다.  

이 Reader 클래스들의 예시를 살펴보자.

ArrayReader
//Array 포맷 데이터
var data = [
		[1, ‘rhio’, 20, ‘male’],
		[2, ‘edina’, 21, ‘female’],
		[3, ‘chan’, 31, ‘female’]
];
//레코드 객체 생성을 위한 맵핑 테이블 지정
var friends = Ext.data.Record.create({
		{ name: ‘name’, mapping: 1 },	// 1번째 인덱스의 값을 name Field로 맵핑
		{ name: ‘age’, mapping: 2 },	// 2번째 인덱스의 값을 age Field로 맵핑
		{ name: ‘gender’, mapping: 3 }	// 3번째 인덱스의 값을 gender Field로 맵핑
});
//Array 리더 클래스 생성
var arrReader = new Ext.data.ArrayReader({
		idIndex: 0
}, friends);

JsonReader 
//JSON 포맷 데이터
var data = {
		total : 2000,
		rows : [
			{ id : 1, name : ‘rhio’, age : 20, gender : ‘male’ },
			{ id : 2, name : ‘edina’, age : 21, gender : ‘female’ },
			{ id : 3, name : ‘chan’, age : 30, gender : ‘female’ }
		]
};

var jsonReader = new Ext.data.JsonReader({
		idProperty: ‘id’,
		root: ‘rows’,
		totalProperty: ‘total’,
		[
			id,	//key 가 id인 값을 id Field로 맵핑
			{ name: ‘name’, mapping: ‘name’ },	// key가 name인 값을 name Field로 맵핑
			{ name: ‘age’, mapping: ‘age’ },	// key가 age인 값을 age Field로 맵핑
			{ name: ‘gender’, mapping: ‘gender’ } // key가 gender인 값을 gender Field로 맵핑
		]
]
}, friends);

XMLReader 
var data = ‘
		2000
		
		  1rhio20male


1rhio20male


1rhio20male



var xmlReader = new Ext.data.XmlReader({
		idProperty: ‘id’,
		root: ‘row’,
		totalProperty: ‘total’,
		[
			id, 	//key 가 id인 값을 id Field로 맵핑
			{ name: ‘name’, mapping: ‘name’ },	// key가 name인 값을 name Field로 맵핑
			{ name: ‘age’, mapping: ‘age’ },// key가 age인 값을 age Field로 맵핑
			{ name: ‘gender’, mapping: ‘gender’ }// key가 gender인 값을 gender Field로 맵핑
		]
]
}, friends);

위의 예시에서도 알 수 있듯이 Reader 객체의 생성 방식은 매우 유사하다.  Reader의 경우 이런 일관된 생성과 동작을 위해서 Ext.data.DataReader 추상 클래스(abstract class)를 만들고 이를 확장하여 세가지의 클래스를 구현해 놓았다.  
만약 특수한 데이터 구조를 위해 사용자 Reader 클래스가 필요할 경우에는 이 DataReader 클래스를 상속받는 클래스로 만들어야 할 것이다.

그럼 Reader 클래스의 동작 원리를 살펴보자.


Reader 의 동작 원리

Reader 클래스는 시스템이 데이터 구조를 이해할 수 있도록 판독하는 클래스이기 때문에 Data Source와 구성옵션를 기본적으로 필요로 한다.  위의 소스에서 알 수 있듯이 data와 생성자 함수에 인자로 넘겨주는 구성옵션을 말한다. 

Reader 클래스는 Ext JS의 시스템이 데이터 구조를 이해할 수 있도록 판독하는 클래스이기 때문에 meta 정보와 recordType 두 가지를 필요로 한다.

특히나 meta 정보는 프레임워크 내의 데이터에 쉽고 유연하게 동작하기 위해서 Data Source의 일부 정보를 명시하게 된다.  단 Array 는 JSON과 XML과 같이 key, value의 한쌍으로 이루어진 것이 아닌 index 구조이기 때문에 구성옵션이 조금 차이가 있다.

var reader = new Ext.data.JsonReader( {
idProperty	: 'id',
        root		: 'status',
        totalProperty	: 'total'
} , [ Field Set ] );

예를 들어 데이터가 많아서 페이지네이션을 위해 Ext.PagingToolbar 컴포넌트를 이용할 수 있는데 이때 필요한 정보는 전체 개수와 블록개수이다.  그리고 GridPanel에서는 복잡하게 정의된 Data Source에서 표시해야 할 레코드 영역을 필요로 한다. 
  이렇게 구성옵션에 정의한 ‘root’나 ‘totalProperty’등의 메타정보가 프레임워크 내에서 데이터를 참조하고 유연하게 동작할 수 있는 역할을 한다.

그리고 또 하나의 중요한 것은 recordType 을 지정하는 것이다.  recordType 은 데이터베이스에서 Field 처럼 Data Source에서 Field를 정의하는 객체 배열이다.

 



Record

이것은 Store 객체에서 클라이언트(즉 브라우저)에 캐시된 레코드에 접근하기 위해서 레코드 정보를 정의한 것과 Data Source를 캡슐화한 클래스이다.

Ext.data.Record는 Reader 객체에 전달된 recordType 을 인자로 받아 생성자가 만들어 지는데 이 것들은 구조화 되지 않는 데이터 객체들을 처리가 발생하는 시점에서 오직 Ext.data.Reader의 구현부에 의해서만 인스턴스가 생성되어진다.

예시
// Record 생성자 함수 생성
var FriendRecord = Ext.data.Record.create([ //Ext.data.Record의 서브 클래스 생성
{ id : 1, name : ‘rhio’, age : 20, gender : ‘male’ },
{ id : 2, name : ‘edina’, age : 21, gender : ‘female’ },
{ id : 3, name : ‘chan’, age : 30, gender : ‘female’ }
]);

//Record 인스턴스 생성
var myNewFriend = new FriendRecord (
    {
        id : 4,
        name: 'hans.ryu',
        gender: ‘male’
    }
);
dataSource.add(myNewFriend);

Data Source를 캡슐화한 Record 인스턴스는 데이터베이스의 레코드 객체와 유사하게 제공되어 GridPanel, ComboBox, DataView 등과 같은 컴포넌트에서 요구되는 데이터 구조로 직렬화(serialize)하여 사용하거나 수정, 삭제 등의 처리를 다양한 포맷에 있어서 일관된 기능을 제공한다.



ColumnModel

이렇게 Store의 Proxy를 통해 클라이언트측 캐시에 로드되고 Record를 통해 구조화된 Data Source는 GridPanel에 표시되기 위해서 Ext.grid.ColumnModel 클래스를 구현해 사용하고 있다.

Grid의 ColumnModel 의 각각의 컬럼이 Store의 각 Record에 어떻게 인덱싱 할 수 있는지 보여주기 위하여 dataIndex를 설정하게 된다.

다음 예시는 ColumnModel  클래스가 초기화하는 2가지 방법이다.

Data Source가 배열인 경우의 초기화 방법
var colModel = new Ext.grid.ColumnModel([
   { header : ‘Company’, width : 200, sortable : true },
   { header : ‘Price’, width : 50, sortable : true },
   { header : ‘Change’, width : 50, sortable : true }
   { header : ‘% Change’, width : 50, sortable : true },
   { header : ‘Last Updated’, width : 60, sortable : true }
]);

 

ColumnModel은 Grid에서 컬럼의 첫번째 레이아웃/디스플레이를 정의하기 위해 Ext.grid.Column의 컬럼 설정 개체 배열로 초기화 된다.  Ext.grid.Column 컬럼 구성 객체에는 다양한 속성이 있다.  그 중 구성객체에 hidden 으로 컬럼을 숨기거나 ColumnModel에 포함되지 않은 모든 필드는 모두 표시되지 않을 것이다.

Grid의 각 컬럼이 Store의 Record 와 맵핑되어 데이터를 Grid에 표시하는 것은 dataIndex를 통해서 설정된다. 만약 위의 예시와 같이 명시적인 dataIndex가 정의되지 않았다면 컬럼 모델에 지정한 index를 그대로 적용한다.



Data Source가 오브젝트인 경우의 초기화 방법
컬럼 구성객체 배열은 columns 구성 속성에서 지정 되어지고 defaults 구성 속성은 모든 컬럼에 기본적으로 적용될 속성을 지정한다.

 

var colModel = new Ext.grid.ColumnModel({
   columns : [ 
     { header : ‘Friend’, dataIndex : ‘name’ },
     { header : ‘Age’, dataIndex : ‘age’, width : 30, sortable : true },
     { header : ‘Gender’, dataIndex : ‘gender’, width : 50, sortable : true }
   ],
   defaults : { 
     sortable : true,
     menuDisabled : true,
     width : 100
   }
});


GridPanel 요약

GridPanel에 데이터를 표시하기 위해서 살펴보았다.  사실 GridPanel을 살펴 보았다기 보다 Store 객체에 대해 자세히 살펴보았는데 내용에서도 알 수 있듯이 Store 객체의 구성옵션인 data와 reader에 대해서 알아 보았고 reader에 대해서는 좀더 자세한 동작원리에 대해서 살펴보았다.

요약하자면 GridPanel에 데이터를 표시하기 위해서는 수동이나 런타임에 Data Source를 지정하거나 Proxy를 이용한 원격 데이터를 로드합니다.  이렇게 로드된 Data Source는 GridPanel 이 사용할 수 있도록 규격화가 되어있지 않기 때문에 Array, JSON, XML 형태의 Data Source를 판독하는 Reader 클래스를 중간에 두어 레코드 형태의 규격화를 하도록 합니다.  

규격화를 위해 데이터의 메타 정보(meta)와 레코드 형태(recordType)를 정의하는 객체배열을 인자로 받게 되는데 recordType 은 Ext.data.Record.create에 인자로 전달되어 레코드 형태를 정의한 객체 배열과 Data Source의 해당 레코드 값을 캡슐화한 Record의 서브 클래스가 만들어지고 Store 객체를 통하여 GridPanel의 column 구성옵션에서 지정한 ‘dataIndex’와 reader의 ‘mapping’이 서로 매칭되어 GridPanel에 데이터를 아래와 같이 표시하게 된다.


 



함께 읽어 보세요.
Ext JS 를 이용한 고급 웹 애플리케이션 UI 설계 – Viewport 편 - http://rhio.tistory.com/349
Advanced Application Design in Ext JS – http://rhio.tistory.com/303
VCL(Visual Component Library) in Ext JS – http://rhio.tistory.com/345

Extjs GridPanel 및 데이터 축출하기 - http://techbug.tistory.com/36
Building a Simple GridPanel in Ext JS - http://www.devx.com/webdev/Article/42975
Grid PHP SQL Part1 - http://www.extjs.com/learn/Tutorial:Grid_PHP_SQL_Part1


예시 및 데모
http://www.extjs.com/deploy/dev/examples/#sample-3

신고
Posted by Rhio.kim

Ext JS를 이용한 애플리케이션 설계 시에 인기 있는 기능은 Viewport 이다.  이것은 Ext.onReady() 런타임시에 유일한 인스턴스로 생성되어 Ext JS 애플리케이션 영역을 관리하는 특수한 패널로 인스턴스 생성시 자동으로 브라우저의  표시영역 크기에 맞게 document.body 에 렌더링 된다.

여기에서는 Viewport와 연관되어 Layout에 대해서도 잠깐 살펴볼 예정이다.  


Ext.Viewport 구성옵션

Ext JS에서는 클래스의 인스턴스를 생성할 때 각종 구성옵션(Configuration Option)을 설정함으로써 클래스들의 초기 동작과 습성을 지정할 수 있는데 각각의 구성옵션이 어떤 설정을 위한 것인지는 API 문서를 통해서 확인 할 수 있다.  

Viewport 에서 사용하는 구성옵션 중에 레이아웃을 지정하는 layout 옵션과 설정된 레이아웃 영역에 배치할 패널들을 지정한 items가 있다.  이 두 가지는 필수 설정이므로 반드시 지정해야 한다..


layout

현재 프레임워크에서 제공되어 사용할 수 있는 레이아웃으로는 absolute, accordion, anchor, auto, border, card, column, fit, form, hbox, menu, table, toolbar, vbox 와 같이 14 가지를 가지고 있다. 


   
이것들 중 가장 자주 사용되는 것은 border 레이아웃과 fit 레이아웃이다.  Border 레이아웃은 일반적으로 비즈니스 응용 프로그램의 기본 UI로 사용되는 레이아웃이고 fit 레이아웃의 경우에는 좀더 복잡한 중첩 레이아웃을 표현하기 위해 필수적인 레이아웃으로 거의 활용된다.


items

items 옵션에는 레이아웃에 배치 될 요소들이 배열로 지정하게 된다.  이때 layout 에 따라 items 를 구성하는 요소들은 특정한 구성옵션을 필요로 할 수 있다.  그렇기 때문에 각각의 레이아웃에 대한 특징을 정확히 알고 있어야 한다.

예를 들면 border 레이아웃의 경우 패널 구성옵션에 region 을 통해 자신이 위치 할 영역이 지정되어야 한다.  그러면 실제로 Viewport를 만들어 보자.

1. HTML 소스
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Viewport Example</title>
        <!--Ext JS 기본 CSS 요소-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!-- Ext JS 기본 JavaScript 요소-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
     <script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!-- 구현 코드 JavaScript -->
        <script type="text/javascript" src="../js/ext/myApp.js"></script>
</head>
<body>
<div></div>
</body>
</html>

2. JavaScript 
  A. fit 레이아웃
Ext.onReady 런타임에서 Ext.Viewport 클래스의 인스턴스를 생성하고 구성옵션의 레이아웃을 ‘fit’ 으로 설정합니다.  fit 레이아웃은 나뉘어진 영역이 없이 단일의 콘테이너로써 자식의 되는 컴포넌트를 꽉 채워 표시한다.  이 것은 중첩된 레이아웃의 형태를 구성하기 위해 매우 유용하게 사용된다.

Ext.onReady(function(){
    new Ext.Viewport({
        layout:'fit',
        items:[
            {
                title:'Fit Panel Example',
html:'<div style="text-align:center;padding:100px;"></div>',
                collapsible: true
            }
        ]
    });
});

items에 지정한 요소는 단순히 HTML을 렌더링하는 패널이다.  collapsible 값을 true로 설정함으로써 viewport에 가득 채워진 패널을 접어 레이아웃 영역을 확보할 수 있게 된다.


  B. border 레이아웃
 

Viewport 에 border 레이아웃을 설정하면 그림에서 언급한 형태로 레이아웃이 구성되어진다.  이때 그림에서 지정한 것과 같이 레이아웃을 구성하는 각 요소들에 region 구성 옵션을 지정된 ‘north’, ‘west’, ‘center’, ‘east’, ‘south’를 지정해 주어야 한다. 

 

만약 지정되지 않을 경우 구성 요소가 표시되지 않으니 유의해야 한다.  다만 border 레이아웃에서 중간 영역(region:’center’)은 필수 임으로 꼭 지정하도록 한다.

Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
title : 'East Item',
html : '<p>East</p>',
padding : 20,
region : 'east'
},{
title : 'Center Item',
html : '<p>Center</p>',
padding : 20,
region : 'center'
},{
title : 'West Item',
html : '<p>West</p>',
padding : 20,
region : 'west'
},{
title : 'South Item',
html : '<p>South</p>',
padding : 20,
region : 'south'
},{
title : 'North Item',
html : '<p>North</p>',
padding : 20,
region : 'north'
}]
});

items 의 각각의 요소의 collapsible와 split 속성을 지정하여 해당 요소를 접거나 펼칠 수 있고 드래그를 통해서 요소의 너비를 변경할 수 있다. Ext.Container를 상속받고 있는 컴포넌트들의 경우에는 구성옵션에 레이아웃을 지정하여 중첩 레이아웃 구성을 할 수 있다.


  C. Accordion
 


스택 레이아웃으로 한 번에 하나의 패널을 표시하도록 한다.  items에 지정된 요소들은 모두 아코디언 패널로 변환되어 표시된다.
 


만약 위의 아코디언 패널에 개인적인 스타일을 지정해야 하는 경우에는 다음의 예시 처럼 items의 요소에 id 속성을 지정하고 style 을 지정할 수 있다.

  CSS 소스
#panel2 .x-panel-body {
   background:#ffe;
   color:#15428B;
   padding: 35px;
}
#panel2 .x-panel-header-text {
   color:#555;
   font-weight:bold;
}

  JavaScript 소스
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'accordion',
items: [{
title : 'Menu1',
html : '<p>Menu1</p>'
},{
title : 'Menu2',
html : '<p>Menu2</p>’,
                    id : ‘panel2’
},{
title : 'Menu3',
html : '<p>Menu3</p>'
}]
});
});


Viewport 컴포넌트에 대해서 살펴보려고 했으나 그 내용이 layout package에 더 가까웠네요.  하지만 Ext JS를 이용한 고급 UI 설계를 위해 매우 중요한 기초와 같습니다. 

그리고 14가지의 레이아웃을 포함하고 있으나 특별히 개념적으로 이해하기 위한 수단으로는 fit과 border의 정도만 잘 이해한다면 그 외의 레이아웃을 사용하는데 있어서는 그다지 어려움을 느끼지 않을 것입니다.


레이아웃 샘플 http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html
설명 http://www.extjs.com/learn/Ext_2_Overview#Layouts

함께 읽어 보세요.

Advanced Application Design in Ext JS - http://rhio.tistory.com/303
VCL(Vissual Component Library) in Ext JS - http://rhio.tistory.com/345

데꾸벅님 블로그 - Extjs Viewport를 이용한 기본레이아웃 잡기 - http://techbug.tistory.com/13 



신고
Posted by Rhio.kim

모질라는 JavaScript를 GPU의 리소스를 이용하여 과속화 시도를 하고 있습니다.  Firefox의 Jetpack 프로젝트 일원인 Aza Raskin 은 “Elevating JavaScript Performance Through GPU Power” 글을 통해 GPU를 이용한 가속화에 대한 가능성과 방법을 제시하고 있습니다.

1. 고품질의 디지털 동영상이나 음악
2. 복잡한 이미지나 음성인식
3. 자연이나 우주와 관련된 큰 사진 처리
4. 브라우저에서 대용량 로컬 데이터 처리
5. DirectX 또는 OpenGL 을 이용한 DOM 엘리먼트의 복잡한 에니메이션
6. SecondLifeOpenSim Grid와 같은 3차원 탐험
7. 실시간 오디오 및 비디오 편집
8. 브라우저에서 실행되는 통합 개발 환경

또한 이 기술을 통해 JavaScript는 웹 시장에서 더 큰 기대치를 가질 수 있을지 모르겠습니다.

이러한 웹 브라우저의 고급 처리 요구에 부응하기 위해 NVIDIA가 추진하는 GPU를 이용한 병렬 처리 아키텍쳐의 CUDA runtime 환경을 JavaScript에서 사용하는 방법을 검토하고 있다는 것입니다.


GPU 화된 JavaScript

JavaScript확장하는 방법으로 API를 확장하는 방법과 JavaScript 구문을 확장하는 방법 2가지를 제시하고 있습니다. 다음의 소스들은 CPU에서 동일한 계산 sqrFun의 복잡도 및 컬렉션의 크기에 따라 많은 시간이 걸릴 수 있는 가능성을 통해 알아 봅니다.

일반화된 코드이긴 하나 실무에서는 이러한 처리에 추가적으로 CPU의 자바스크립트 해석, 페이지 렌더링, 응용 프로그램에서 운영체제 루틴 등등 기타 잡다한 처리를 동반합니다. 

During all of these CPU cycles, what is the GPU doing?


API 확장
var numbers = new Array(), size = 1000;
for (var i  = 0; i < size; ++i)
numbers[i] = i;

var sqrFun = function(v) { return  v * v; }
for (var i  = 0; i < size; ++i)
numbers[i] = sqrFun(numbers[i]);


Jetpack.toGPU() 를 사용하여 GPU 프로세스를 명시
var resNumbers = Jetpack.toGPU( function(nums, numsSize) {
  var sqrFun = function(v) { return  v * v; }
  for (var i  = 0; i < size; ++i)
    numbers[i] = sqrFun(numbers[i]);
  }, numbers,  size);

// some job here

document.write(resNumbers);

var sqrFun = function(v) { return v * v; }
map(sqrFun, numbers);

Functional
var sqrFun = function(v) { return  v * v; }
map(sqrFun, numbers);

var resNumbers = Jetpack.toGPU(function(nums,  numsSize) {
return  map(sqrFun, numbers);  }, numbers, size);

Microsoft LINQ
var resNumbers = Jetpack.Linq.toGPU().from(numbers).map(sqrFun);

jQuery
$("div.test"). add("p.quote").addClass("blue").slideDown("slow").toGPU();


멀티코어 CPU가 일반화되어 가고 GPU도 iPhone과 같은 모바일을 포함하여 대부분의 장치에 탑재되며 클라우드의 등장으로 분산 처리가 일반적으로 되어 왔으나 현재 JavaScript뿐만 아니라 모든 프로그래밍 언어에서는 병렬처리를 효과적으로 작성하고 실행하는 방법을 모색하고 있습니다.

현재로서는 위의 예시 코드와 달리 일반적으로 프로그래밍을 하면 컴파일러와 인터프리터가 그것 자동으로 최적의 병렬처리 방식으로 처리할 수 있는 이상적인 시스템은 없기 때문에 개발할 때에 어떤 부분을 병렬 처리할지에 대한 선택권은 전적으로 개발자에게 있다는 것입니다.


요약
Jetpack 는 모질라 연구소에서 브라우저와 운영체제 Native API 연결을 통하여 브라우저의 효율과웹의 경험을 극대화 하기 위한 많은 실험과 성과를 내놓고 있습니다.  하지만 우려되는 것은 역시 표준과 동떨어진 기술이 특정 브러우저 밴더의 기술로만 활용된다면 과거의 IE의 히스토리를 그대로 반영하게 되지 않을까 하는 것이다.

하지만 현 시점에서 달리 생각해볼 문제는 HTML5를 포함한 웹 표준 기술들의 진화이다.  웹을 이루는 다양한 요소요소마다 발전된 웹 표준을 위해서 엄청난 실험과 시도들이 표준화에 참여하는 벤더들에 의해서 진행되어오고 있다.

그중 SVG, Canvas, Video, Audio 의 부분은 순수한 웹 기술만으로는 표현은 어떻게든 하겠지만 발전을 보장하지 않을 뿐더러 효율적이지도 못하다는 것이다.  점차적으로 웹에서 처리하는 정보는 하드웨어의 발전과 같이 엄청난 속도로 발전해 오고 있고 고도화 되어오고 있기 때문에 Jetpack과 같은 실험은 분명 빠른 미래에 필요한 기술이 되리라 예측해본다.



함께 읽어보세요.
JavaScript 필수 프로그래밍 언어로 !! - http://rhio.tistory.com/346
JavaScript in 2009 and 2010 - http://rhio.tistory.com/341

참고자료 : http://mozillalabs.com/jetpack/2010/01/25/elevating-javascript-performance-through-gpu-power/


신고
Posted by Rhio.kim

모델링 및 객체 지향 소프트웨어 기술 등으로 잘 알려진 Martin Fowler 씨가 속한 ThoughtWorks 와 MS가 현재의 기술 동향을 분석한 백서 “Technology Radar 2010(PDF)가 infoQ 기사로 소개되었습니다.

이 백서는 현재 어떤 기술 분야가 큰 관심을 받고 있는가 분석하여 기술(techniques), 도구(tools), 플랫폼(platforms), 언어(language)의 4가지로 분류하여 제시하고 있습니다.  

그리고 이 4가지 분야는 4개의 클래스로 나뉘어 항목을 그래프로 표시하였습니다.  각 클래스를 살펴보면 Adopt 항목은 기업의 사용을 추천한다, Trial 항목은 투자 가치는 있지만 위험이 적은 프로젝트에서 사용할 것, Assess는 사용 방법과 잠재 능력을 검토하고 배울 가치가 있는 항목 그리고 마지막 Hold는 현재 인기나 자원으로써 가치가 없는 항목을 나타낸다.

여기서 관심 과는 분야들에 대해서 요약해봅니다.


도구(tools) 차트 


노란 영역에 표시된 “IE6 end of life” 는 기업에서 받아들여야 할 Adopt 클래스에 있습니다.  이 자료는 MS가 현재의 기술을 동향을 분석한 것인데도 불구하고 IE6 도구로써의 생명은 끝났음을 알리고 있습니다.

그리고 버전 관리 툴인 Subversion은 후퇴하고 반대로 분산 버전 관리(Distributed version control)은 전진하고 있고 백서는 “Git과 Mercurial과 같은 분산 버전 관리도구가 최근 몇 년간 큰 주목을 받기 시작하였고 분산된 환경의 버전 관리를 요구하는 엔터프라이즈 시장에서 추진제 역할을 하고 있다고 설명하고 있습니다.


프로그래밍 언어 차트



JavaScript는 1995년에 등장했지만 최근 2~3년 사이에 Prototype, jQuery, Ext JS, Dojo와 같은 라이브러리가 등장하면서 개발자에게 풍부한 웹 애플리케이션 개발을 위하여 JavaScript를 사용하는 것을 백서에서 추천하고 있습니다. 

아래의 그래프로만 보더라도 JavaScript는 무관심에서 현재에 이르러서는 가장 주목할 만한 트랜드로 변화된 것이 틀림 없음을 나타냅니다.

또 하나는 Java의 움직임 도 Assess 단계이지만 Java의 진화는 더디고 새로운 버전이 나오려면 거의 3년에 가까운 시간을 기다려야 한하지만 Java VM 위에서 동작하는 새로운 언어 Groovy, JRuby, Scala, Clojure 등이 새로운 혁신이 될 것이라 기록하고 있습니다.


플랫폼 차트


그 중 가장 두드러지는 웹 브라우저에 Firefox와 언어 분야에서 언급했던 JVM 위에서 동작하는 새로운 언어들이 새로운 혁신에 앞장설 것이라는 것입니다.

모두 중심으로 향하고 있는 반면 유일하게 Rich Internet Applications 만이 바깥쪽을 향하고 있습니다.

이번 백서에서 가장 흥미로운 것은 JavaScript의 관심과 IE6가 도구로서의 생명이 끝났으며 Java와 JVM 그리고 JVM을 기반으로 하는 새로운 언어들의 기대되는 혁신입니다.


출처 : http://www.infoq.com/news/2010/01/ThoughtWorks-Technology-Radar


신고
Posted by Rhio.kim

모델링 및 객체 지향 소프트웨어 기술 등으로 잘 알려진 Martin Fowler 씨가 속한 ThoughtWorks 와 MS가 현재의 기술 동향을 분석한 백서 “Technology Radar 2010(PDF)가 infoQ 기사로 소개되었습니다.

이 백서는 현재 어떤 기술 분야가 큰 관심을 받고 있는가 분석하여 기술(techniques), 도구(tools), 플랫폼(platforms), 언어(language)의 4가지로 분류하여 제시하고 있습니다.  

그리고 이 4가지 분야는 4개의 클래스로 나뉘어 항목을 그래프로 표시하였습니다.  각 클래스를 살펴보면 Adopt 항목은 기업의 사용을 추천한다, Trial 항목은 투자 가치는 있지만 위험이 적은 프로젝트에서 사용할 것, Assess는 사용 방법과 잠재 능력을 검토하고 배울 가치가 있는 항목 그리고 마지막 Hold는 현재 인기나 자원으로써 가치가 없는 항목을 나타낸다.

여기서 관심 과는 분야들에 대해서 요약해봅니다.


도구(tools) 차트 


노란 영역에 표시된 “IE6 end of life” 는 기업에서 받아들여야 할 Adopt 클래스에 있습니다.  이 자료는 MS가 현재의 기술을 동향을 분석한 것인데도 불구하고 IE6 도구로써의 생명은 끝났음을 알리고 있습니다.

그리고 버전 관리 툴인 Subversion은 후퇴하고 반대로 분산 버전 관리(Distributed version control)은 전진하고 있고 백서는 “Git과 Mercurial과 같은 분산 버전 관리도구가 최근 몇 년간 큰 주목을 받기 시작하였고 분산된 환경의 버전 관리를 요구하는 엔터프라이즈 시장에서 추진제 역할을 하고 있다고 설명하고 있습니다.


프로그래밍 언어 차트



JavaScript는 1995년에 등장했지만 최근 2~3년 사이에 Prototype, jQuery, Ext JS, Dojo와 같은 라이브러리가 등장하면서 개발자에게 풍부한 웹 애플리케이션 개발을 위하여 JavaScript를 사용하는 것을 백서에서 추천하고 있습니다. 

아래의 그래프로만 보더라도 JavaScript는 무관심에서 현재에 이르러서는 가장 주목할 만한 트랜드로 변화된 것이 틀림 없음을 나타냅니다.

또 하나는 Java의 움직임 도 Assess 단계이지만 Java의 진화는 더디고 새로운 버전이 나오려면 거의 3년에 가까운 시간을 기다려야 한하지만 Java VM 위에서 동작하는 새로운 언어 Groovy, JRuby, Scala, Clojure 등이 새로운 혁신이 될 것이라 기록하고 있습니다.


플랫폼 차트


그 중 가장 두드러지는 웹 브라우저에 Firefox와 언어 분야에서 언급했던 JVM 위에서 동작하는 새로운 언어들이 새로운 혁신에 앞장설 것이라는 것입니다.

모두 중심으로 향하고 있는 반면 유일하게 Rich Internet Applications 만이 바깥쪽을 향하고 있습니다.

이번 백서에서 가장 흥미로운 것은 JavaScript의 관심과 IE6가 도구로서의 생명이 끝났으며 Java와 JVM 그리고 JVM을 기반으로 하는 새로운 언어들의 기대되는 혁신입니다.


출처 : http://www.infoq.com/news/2010/01/ThoughtWorks-Technology-Radar


신고
Posted by Rhio.kim

Ext JS와 VCL
VLC(Visual Component Library)은 볼랜드Borland 사에서 1995년에 델파이를 개발하면서 설계한 윈도우 프로그래밍 라이브러리입니다.  VCL을 윈도우 플랫폼의 데스크탑 애플리케이션 개발에 있어서 공통적으로 빈번하게 사용되는 요소들을 미리 만들어 두고 필요할 때마다 쉽게 이용할 수 있도록 해서 개발자들로 하여금 반복적인 작업을 빠르고 쉽게 처리할 수 있도록 하는 라이브러리입니다. 

Ext JS 는 이러한 메커니즘을 도입하여 철처하게 컴포넌트 중심의 컴포넌트를 지향하는 프레임웍으로 설정해 가고 있습니다.  그리고 Ext JS의 VCL은 델파이의 VCL과 마찬가지로 컴포넌트들로 구성하는데 필요한 몇 가지 클래스들이 상속 개념에 의해 계층구조로 잘 정의되어 있는 객체지향 클래스들의 그룹이라고 말 할 수도 있습니다.

 
TComponent Class in Delphi

TComponent Class in Delphi



Ext JS는 델파이의 이런 컴포넌트 중심의 컴포넌트 지향적인 구조와 동일하며 각각의 컴포넌트들은 윈도우 프로그래밍에 필요한 컴포넌트들 처럼 웹에서 이와 동일하게 프로그래밍 할 수 있도록 특정 기능들을 잘 포장하고 있습니다.

Ext JS의 VCL은 기본적으로 Ext.Component 클래스를 상속받는 객체라고 정의할 수 있습니다.  그래서 Ext JS에서는 JavaScript에서 간단한 코드 몇 줄을 이용하여 마치 레고 조각을 하나씩 맞춰서 결과를 완성하듯이 컴포넌트들의 속성과 이벤트 조작을 통해서 쉽게 웹 애플리케이션을 완성할 수 있습니다.

델파이가 데스크탑 프로그래밍 개발을 위한 컴포넌트 기반의 프로그래밍 구조를 적립시켰다면 이러한 데스크탑의 프로그래밍의 경헙을 웹으로 옮기는 시도를 바로 Ext JS가 진행하고 있습니다.


Ext JS 의 비시각적 컴포넌트
Visual Component Library라는 이름 때문에 Ext JS 가 갖는 VCL 안에 포함된 컴포넌트들이 모두 시각적인 특성을 갖는다고 생각할 수도 있을 것이다.  하지만 Ext JS는 많은 비시각적인 컴포넌트도 상당히 많습니다.  Ext JS 3.0과 함께 발표한 Design Preview 에서 볼 수 있듯이 시각적인 컴포넌트는 폼을 디자인 타임뿐 아니라 브라우저 내에 런 타임 시에 우리가 볼 수 있는 컴포넌트를 말합니다.  그리고 비시각적인 컴포넌트란 런 타임에는 브라우저상에 표시되지 않는 컴포넌트를 말합니다. 예를 들면 Ext.util.TaskRunner나 Ext.data 패키지와 같은 컴포넌트가 대표적인 것들입니다.

일반적으로 프로그래밍 언어에서는 컴포넌트보다 클래스라고 이해하고 사용을 하지만 Ext JS 프레임워크가 갖는 사상은 컴포넌트의 개념을 가지고 접근을 합니다.


Component 계층 구조와 주요 클래스들
Ext JS의 비주얼 컴포넌트들은 객체 지향 언어의 상속 개념에 의해 계층 구조를 이루는 여러 클래스들로 구성되며 다음의 그림이 비주얼 컴포넌트의 기복적인 계층 구조를 보여 줍니다.

 
[그림 첨부 : 컴포넌트 계층 구조]

위의 그림을 바탕으로 각 클래스들의 특징과 기능에 대해서 좀더 상세히 알아보기로 하겠다.


Ext.Component
클래스 다이어그램에서 알 수 있듯이 비주얼 컴포넌트에서 가장 상위 단계의 클래스는 Ext.Component이다. Ext.Component는 Ext JS에서 비주얼 컴포넌트들의 최상위 선조 클래스로서 VCL 계층 구조 안에 포함되어 있는 모든 클래스의 공통적인 특성과 기능을 가지고 있다.  

Ext.Component의 주요 역할은  Ext 의 모든 컴포넌트들은 Component의 서브 클래스로 자동적으로 생성, 렌더링, 소멸의 Ext.Component Life Cycle(생명주기)을 적용 받고 Ext.Observable 클래스를 상속받아 컴포넌트의 동작을 위한 일관된 이벤트 제어, 관리, 동작 모델을 제공한다.  좀더 자세한 사항은 다음에서 구체적으로 살펴본다. [계속..]


Ext.Component의 기본구조
Ext.Component의 구조는 Config Options, Public Properties, Public Methods, Public Events 의 4가지로 이루어 진다. 고도의 사용자 정의를 통해 Component를 설정하기 위한 Config Options 과 Component 에 지정된 Public Events 이 것은 흔히 말하는 Custom Event 모델을 통해 컴포넌트에 이미 정의되어져 있다.  그외 컴포넌트의 주요 변수와 메소드로 구분되어진다.

 
[그림 컴포넌트 내부 구성도]



Configuration Option Object
Config 속성들은 컴포넌트의 생명주기(Life Cycle)인 생성, 렌더링, 소멸 시 컴포넌트가 동작하게 될 일련의 과정을 정의하는 오브젝트이다. 

이 오브젝트에는 관심 있게 봐야 할 것은 모든 컴포넌트들의 공통 속성인 xtype 속성의 도입이다.  xtype 속성은 한 컴포넌트를 다른 컴포넌트와 구별하는데 사용될 수 있고 DOM의 관점에서 본다면 id 속성과 같다. 

그래서 당연한 애기지만 컴포넌트의 xtype속성 값은 다른 것들과 중복 되지 않는 유일한 값이어야 한다.

생성과 소멸을 위한 속성은 data, plugins, ptype, stateEvents, stated, stateful, tplWriteMode, xtype 정도이고 그 밖의 대부분은 컴포넌트의 외형적인 설정을 위한 렌더링 시점에서 필요한 속성들이 대부분이다.

Public Properties
컴포넌트의 표시 및 활성 상태, DOM 엘리먼트, Configuration Option, Node 관계, 렌더링 상태 등을 참조할 수 있는 변수를 나타낸다.

Public Methods
생성자와 소멸자를 포함하고 DOM 접근 방식과 일관된 컴포넌트 접근 모델, 표시 및 활성상태, 렌더링 속성 변경 등 컴포넌트의 기초적인 동작 구현의 집합이다.

Public Events
이 이벤트들은 Ext.util.Observable 이벤트 모델을 통하여 Ext.Component 클래스에 정의된 사용자 이벤트로 컴포넌트의 생명주기에서 발생하는 일련의 세세한 과정마다의 이벤트를 등록하여 컴포넌트마다 유일한 동작 방식을 정의할 수 있게 된다.



신고
Posted by Rhio.kim
TAG ext JS, VCL
작년 한해는 JavaScript가 재평가 받고 더 발전하는 한해아니였나 생각해봅니다.  

국내의 변화
국내에서도 자바스크립트에 대한 인식의 변화가 가장 컸던 한 해가 아니였나 생각해봅니다. 
수 많은 웹 서비스에 다양한 오픈 소스들을 이용한 성숙한 UI와 UX를 제공하기 위한 노력들이 매우 많아졌습니다. 


JavaScript 프레임워크의 발전
그리고 국내 JavaScript 라이브러리도 NHN의 Jindo 에 이어 NHN의 nagoon97 님이 개발하여 대표적으로 Naver 스마트 에디터에   적용 개발되어진 Husky 프레임워크 그리고 김영보 선생님께서 개발중인 One Object 아키텍쳐를 근간으로 하여 메소드 체이닝 메커니즘을 특징으로 하는 MethodChain까지 국내에서도 고급 자바스크립트 기술을 위한 오픈 소스들이 발표되고 있습니다.

또한 메이저 라이브러리의 기술을 점점 더 발전해 가고 있을 뿐아니라 그 영역을 모바일까지 확장해 가고 있습니다.  또한 데스크탑 애플리케이션에서 경험할 수 있었던 것과 동일한 경험을 할 수 있도록 성숙한 UI 프레임워크로 발전해 가고 있습니다.



ECMAScript 의 변화 그리고 JavaScript 2.0
또한 이런 변화는 ECMAScript 5를 좀더 빨리 발전시키는 촉진제 역할을 하였고 올 9월에 표준안이 발표  되면서 브라우저 밴더 및 산업 전반에 걸쳐 JavaScript를 적용되어가고 있고 최근 ECMA Script 262 5th 이 지난 12월 15일 ECMA International에서 논의되고 최종 승인 발표를 하였습니다. 

이 ECMAScript 5는 JavaScript의 일반적인 명칭인 JavaScript 1.5 ~ 1.7와 같이 JavaScript 2.0이라고 칭하게 될 것 입니다.  사실 초기 ECMAScript 4의 기대와는 다르게 5th 에서는 설계상의 큰 변화는 없었습니다. 그중 가장 눈에 띈 것은 Native JSON 지원이라는 점입니다.  

현재까지(브라우저 밴더들이 적용하기 전)도 JavaScript JSON 형식의 데이터를 처리할 수 있습니다.  그러나 JSON은 데이터를 사용하여 검색하는 기능 때문에 잘못된 명령이 데이터에 있는 경우 보안 문제를 일으키는 원인이 될 우려가 있었습니다.   

JavaScript 2.0 JSON 지원은 JSON 데이터를 실행하고 평가하는 것을 지원하기 때문에 보안에 대한 걱정이 없어집니다.


속도경쟁
또한 올 한해 각 브라우저 밴더들의 속도 경쟁도 상당했습니다.  JavaScript에서 일어나고 있는 가장 큰 변화는 JavaScript 2.0의 변화보다 Web 브라우저에서 전개되고 있는 속도 경쟁일 것입니다.

올 Chrome는 V8라는 JavaScript 엔진을 탑재하면서 엔진의 속도를 설명하기 위해 다양한 실험에 대한 증명을 Chrome Expoeriments  를 통해 해주고 있습니다.  그외 Firefox의 경우 3.5에서 새로운 TraceMonkey 엔진을 탑재, Safari에 기반에 Webkit에서는 SquirrelFish JavaScript 엔진을 개발하고 있습니다.  Opera의 경우에도 Carakan 을 속도 경쟁하고 있습니다.



JavaScript 의 영역의 확대

출처 http://en.fotolia.com/id/11626485

자바스크립트의 영역은 인터넷이 생기고 웹 이라는 것은 HTML을 이용하여 문서(Document)를 표현하고 링크를 통해 또 다른 문서로 이동하거나 간단한 폼 전송을 통한 서버와 클라이언트의 커뮤니케이션을 가지고 있었습니다.  여기에서 JavaScript의 영역은 극히 제한적이였습니다.  아니 제한적일 수 밖에 없었습니다.

하지만 점차적으로 발전하면서 현재에 이르러는 인터넷의 문서에 제한되지 않고 애플리케이션을 위한 플랫폼으로 발전해 나가고 있습니다.  이에 자바스크립트는 DOM 제어와 AJAX를 활용한 가벼운 인터넷 애플리케이션 개발 언어로 새롭게 해석됩니다.  
뿐만 아니라 JavaScript 프레임워크의 발전은 성숙한 UI를 지진 Ext JS나 YUI와 같은 RIA 개발을 위한 도구로도 사용되는데 손색이 없을 정도입니다.  Ext JS의 경우에는 이미 국외에서는 Ext JS를 사용한 솔루션이 조금씩 개발되어 판매에 이르렀습니다.

하지만 그 영역은 Web2.0의 시대와 함께 찾아온 개방과 함께 Open API가 방대해졌고 그것을 이용한 기본적인 API들이 JavaScript로 개발되어졌습니다.  이를 통해 다양한 Mash-Up 애플리케이션이 개발되어졌고 이렇게 발전해온 JavaScript의 영역은 올 한 해에도 그 영역을 Server Side 개발을 위한 Jaxer, 모바일 영역, 데스크탑 애플리케이션 개발을 위한 도구로 관심의 영역을 넓혀갔습니다.

이에 도움을 준 요소들 또한 많습니다.  일단 가장 큰 이유중의 하나는 웹 표준의 발전일 것이고브라우저 밴더들의 속도 경쟁, 다양한 오픈 소스 프레임워크의 발표, 개발도구의 진화 또한 보탬을 하였습니다.

최근 iPhone의 발표로 국내에서도 엄청난 열기를 더해가고 있는데 Web2.0 Expo의 론치패드에서 극찬을 받은 PhoneGap 이라는 솔루션은 HTML, JavaScript, CSS 를 이용하여 iPhone 뿐만 아니라 Android, Blackberry 등 크로스 플랫폼 모바일 애플리케이션을 개발할 수 있는 플랫폼을 제공한다는 것입니다.  


JavaScript의 영역과 변화 요소



  
JavaScript 의 미래
이처럼 지난 한해는 언어로서 성장하고 JavaScript가 웹 브라우저에서만 사용할 수 있었던 것이 그 영역이 브라우저 밖으로도 유용하게 활용 될 수 있도록 되었다는 것입니다.

또한 2010년에는 Chrome OS와 같은 넷북을 기반으로 할 운영체제, 다가오는 모바일 웹 애플리케이션 시대에는 웹 표준과 함께 JavaScript의 지배력이 좀더 높아질 것입니다.
http://www.youtube.com/watch?v=AusOPz8Ww80
http://www.readwriteweb.com/archives/web_vs_native_mobile_apps.php

 

출처 http://almaer.com/blog/the-development-circle-of-life



신고
Posted by Rhio.kim

저번주에 3.0.3을 개봉하려고 봤더니 목요일에 3.1을 릴리즈 했네요.
Change Log를 토대로 수정을 더 보긴 했지만 누락될 수 있습니다. :)




워낙 방대하다보니 한번 릴리즈 하면 점검해야할 것들이 꾀 많아 지내요.
혹시 쓰시다 오류 있으시면 메세지나 메일 남겨주시면 감사할께요 :)


신고
Posted by Rhio.kim
오래 전부터 매우 관심있게 보고 있는 JavaScript 프레임워크 입니다.

제 블로그에 오시는 분들은 Ext JS 에 대해서 극히 잘 아시겠지만 Ext JS는 자바스크립트 개발자로서 혹은 Web 2.0 시대를 살아가는 RIA 개발에 관심있는 개발자라면 혹은 섣불리 UI 개발에 접근하지 못하는 서버사이드 개발자들 혹은 델파이 개발자(?)들은 꼭 관심있게 봐야할 프레임워크 입니다.

우리는 단순히 이 프레임워크를 Prototype JS, jQuery, YUI, Dojo 와는 다른 뭔가 색다른 프레임워크이고 UI 자체가 매우 성숙해 있다는 것 쯤으로 알고 있지만 이것은 RIA를 위한 매우 잘 설계된 프레임워크입니다.

그리고 HTML 5가 세상에 자리잡고 웹이 정보를 표현하는 문서와 링크의 수단에서 애플리케이션 형태로 발전해 가는 현재의 시점에서 꼭 알아야 할 기술 중 하나가 자바스크립트입니다.

일반적으로 웹을 즐기는 사용자의 관점을 바라보는 개발자라면 Ext JS의 활용도가 극히 제한적일 수 있지만 프레임워크에 포함된 코어 기술들은 언제 어디서든지 활용 가치가 높은 것을을 많이 담고 있습니다.  

뜬금없는 델파이 개발자라고 한 이유는 파스칼에서 진보한 델파이는 Ext JS의 아키텍쳐와 매우 유사한 부분들을 많이 갖습니다.  그중 가장 중요한 부분이 바로 VCL(Visual Component Library)의 개념입니다.  이 개념은 Ext JS의 전부라고 해도 과언이 아닌 매우 중요한 개념입니다.

다음은 Ext JS 3.0.3 릴리즈가 좀 지났지만 Class Diagram 업데이트를 해볼까 합니다. :)
워낙에 해상도가 높은지라... 필요하신 분들이 계실련지?! 
(아래 것들은 베타 버전때 제작된 것이라 현재 버젼하고는 차이가 있습니다.)


1. Ext.chart.PieChart don't extends Ext.chart.CartsianChart
신고
Posted by Rhio.kim
TestSwarm은 개발자들이 신속하게 여러 브라우저의 버전에 대한 자신이 개발한 JavaScript 코드를 테스트하기 위한 쉬운 방법을 제시하는 것을 목표로 모질라 연구소의 새로운 프로젝트입니다. 

John Resig 은 잘 알려진 것 처럼 jQuery 개발과 JavaScript 에반젤리스트로 있다가 새로운 팀의 자바스크립트 툴 개발자로 지난 4월부터 중심이 되어 프로젝트를 진행해 왔습니다.

아마 팀을 옮기고 첫 작품이라 심혈을 기울이지 않았을까 하는 생각을 해봅니다.


크로스 브라우징 JavaScript 테스팅 및 디버깅의 현재

처음이 TestSwarm은 jQuery팀을 지원하기 위한 도구로서 시작한 것인데 오늘날의 방법은 크로스 브라우저 JavaScript를 테스트를 쉽게 지원하거나 기준을 잡을 수가 없습니다.. 

최근 소개한 JavaScript Debug Tool은 실제 개발 시 디버깅할 수 있어서 개발자에게 유용하지만 완료된 프로젝트이거나 큰 프로젝트의 경우에 테스트를 위한 도구는 그간 없었고 이런 테스트는 거의 개발자나 기획자의 PC에 깔린 브라우저 종류에 의존했었습니다.

이에 TestSwarm은 JavaScript 테스트 기반의 개발을 위한 도구로서 매우 유용하게 활용되어지리라 봅니다.

참고 - 현존하는 JavaScript 디버깅 툴
 - FireBug : http://getfirebug.com/


구조
이에 미리 다양한 환경의 많은 참가자들을 모집하여 PHP와 Mysql로 개발되어진 중앙 서버에 연결된 사용자가 등록한 JavaScript 테스트를 배포하고 실행 결과를 서버에 집계하는 구조를 갖습니다.


참고로 우측에 뜨는 벤치마크 점수와는 달리 서버에서 테스트를 추진하고 그 결과를 기다려야 합니다.  현재는 로그인한 참가자의 숫자가 갖추어질 때까지 실행되지 않도록 되어있어 운이 나쁘면 테스트가 발생하지 않을 수도 있습니다.  이런 부분은 차차 개선 되리라 봅니다.


참가방법(일반 - Runner)
프로젝트가 생성되고 테스터의 브라우저가 필요한 경우라면TestSwarm 사이트에 상단에 초대장과 함께 테스트에 참여할 수 있는 박스가 나타날 것입니다. 가입 후 몇 번 가봤지만 아직까지 프로젝트가 생성된 것을 보지는 못했습니다. 

 

(2009.09.10 추가)
우연찮게 들어갔다가 테스트 하는 장면을 목격하게 되었네요.

Selector tests 수행중 정상적인 수행이 되는 경우 녹색이 표시

Ajax tests... 수행중 비 정상적인 수행이 발생되는 경우 빨간색이 표시



참여하게 되면 탭에서 바로 실행되고 자동으로 새로운 테스트를 위해 매 30초 간격으로 프로젝트 서버로 Ping을 합니다. 그러면 새로운 테스트를 연이어 수행합니다.

그 결과를 다음과 같이 보여줍니다.

 


Vimeo 에 올린 영상을 보면 자세한 운용 방법이 있습니다.  John resig 의 세미나나 발표를 보면서 느낀 거지만 앙드레김 선생님보다 좀더 빠른 말투라는 생각이 자꾸 드네요.  특히 이번 영상에서는 더더욱이   “Am~~~ JavaScript~~”, “Am~~”


지원
TestSwarm은 다양한 운영체제와 웹 브라우저를 지원하고 그에 걸맞는 많은 참가자를 원하고 있습니다.  사이트에서 가입하여 누구나가 참여할 수 있게 되어있습니다.
 
  현재 Windows XP에서 Firefox 3.5 사용자가 가장 많네요. 아무래도 모질라 랩에서 개발한 거라 사내 직원들이 많이 참여한 것이 아닌가 추측해봅니다.

TestSwarm 메인 사이트에 보면 그 수치를 아래의 그림처럼 표시하고 있습니다.
 


현재 TestSwarm은 jQuery, YUI, Dojo, MooTools 그리고 Prototype.js 를 포함한 많은 개발자들이 의존하고 있는 인기 있는 다수의 오픈 소스 기반의 자바스크립트 라이브러리 테스트를 하고 있습니다. 
TestSwarm는 오픈 소스화 하였기 때문에 원한다면 자신의 프로젝트를 위해서 직접 설치하여 활용할 수도 있습니다.

소스 다운로드 http://github.com/jeresig/testswarm/tree/master

그런데 소스상에는 있지만 아직까지 Test를 생성할 수 있는 구석은 안보이는 것 같습니다.



향후 계획
긴 안목으로 모질라의 TestSwarm 아키텍쳐로 개발자들이 만든 자신의 코드를 테스트하기 위해 좀더 쉽게 만들기 위한 계획이고 또한 수동 검사를 위한 옵션이나 사용자 상호 작용이 필요한 곳에서 실행할 수 있도록 할 계획이라고 합니다.

1. pastebin 같은 서비스에 여러분이 코드를 넣어 두고 다양한 브라우저로부터 실시간으로 되돌아 오는 결과를 볼 수 있습니다. (paste 는 붙여넣기, bin 은 실행형이니까 클릭해서 만들어 내는 서비스를 말할까요?)
2. 필요한 부분만 변경하에 보낼 수 있는 IDE 통합으로 빠른 테스트를 실시 할 수 있다.
3. 유저 인터페이스 코드의 수동 테스트, 수동 테스트 처리 절차와 함께 밀어 넣고 사용자가 실행 할 수 있도록 한다.
4. 정해진 테스트 환경이 아닌 정해지지 않는 다수의 브라우저에서 테스트를 해보기 위한 배포 (작은 iframe를 자신의 사이트에 포함시켜 두고 사용자의 표본 자료에 테스트 결과를 수집 할 수 있다.)
5. 브라우저에서 코드와 확장 기능을 실행 시켜서 테스트하는 능력


추가내용 [2009.08.31]
Test Swarm 의 구조입니다.  좀더 이해하기 쉽도록 그려보았는데요. 참고용으로 사용하세요.
(경우에 따라서 오류가 있을 수 있습니다.)

     클릭해서 보시면 편합니다.

1. Test Swarm 에서 테스트를 생성한다.
2. Job Queue 에 추가합니다.
    이와 동시에 해당 테스트가 발생하고 조건에 맞는 사용자들에게 invite 박스가 표시됩니다. (testswarm 사이트에 접속하면 우측 상단에 작은 box가 초대 박스로 바뀐다고 합니다.)
3. Join the Swarm 에 접속한 Runner 는 매 30초 마다 Job Queue 에서 자기에게 맞는 다음 테스트를 수행하게 되고
   결과를 서버로 전송하게 됩니다.
   성공 혹은 실패 등의 결과를 서버에 저장하고 6번에서 보이는 결과를 Test Swarm 에서는 볼 수 있게 됩니다.



  
  
신고
Posted by Rhio.kim

JSDT란?
JSDT (JavaScript Debug Toolkit)는 IE, Firefox, Safari, Chrome, Opera 등 다양한 Web 브라우저를 지원하는 JavaScript 디버거입니다.  JavaScript 디버거로는 Firefox Addon 인 Firebug가 꾀 유명하지만, 기존의 도구는 특정 Web 브라우저에서만 사용할 수 있는 것이 대부분입니다.

JSDT의 경우는 부가 기능을 설치하지 않고도 JavaScript 디버깅을 할 수 있습니다.
 

http://www.ibm.com/developerworks/kr/library/os-eclipse-jsdt/
http://wiki.eclipse.org/index.php/ATF/JSDT
링크의 JSDT (JavaScript Development Toolkit)와는 다른 디버깅을 위한 툴입니다.


JSDT의 구조
실제로 JSDT를 실행해보기 전에 JSDT의 동작원리에 대해서 살펴보겠습니다.

JSDT는 HTTP 프록시 서버를 내장하고 있어, 디버깅 웹 브라우저는 HTML및 JavaScript와 같은 리소스를 프록시를 통해 참조하게 됩니다.  이 경우 HTML 및 JavaScript가 프록시에 따라서 JSDT에 디버깅하는데 필요한 JavaScript가 자동으로 포함되게 됩니다. 포함된 JavaScript 코드는 XHR를 통해 디버거 쪽으로 필요한 정보를 전달합니다.
 

이러한 구조가 브라우저 쪽에 특별한 기능을 설치할 필요 없이 다양한 웹 브라우저에서 디버깅을 가능하게 합니다.


JSDT를 사용
JSDT 프로젝트 페이지에서 Swing 스탠드 애플리케이션 및 Eclipse 플러그인을 제공하고 있습니다.
우선 간단하게 사용할 수 있는 Swing 버전을 다운로드하여 사용해 봅니다.  윈도우의 경우 setup.exe 파일을 다운로드 받아 설치하면 다음과 같은 창이 나타납니다.

 

디버깅할 HTML 파일과 웹 브라우저의 실행 파일을 선택하고 시작 버튼을 클릭하고 디버깅을 시작할 수 있습니다.

사용은 일반적인 디버거와 비슷합니다.  디버깅을 시작하면 JSDT의 소스 코드 편집기에 소스코드가 표시되기 때문에, 정지하고자 하는 위치에 중단점(Breakpoint)을 찍고 단계별 스텝 오버, 스텝 아웃을 할 수 있습니다.  변수의 값은 variables 탭에서 확인할 수 있으며, expression 탭에서 임의의 표현식을 등록하고 평가 결과를 볼 수 있습니다.
  
Eclipse 플러그인 버전도 기본적인 사용법은 동일합니다.  다운로드 페이지에서 jsdt – 2.1.0.zip 을 다운로드 하고 적당한 위치에 압축을 푼 후, 업데이트 관리자에서 플러그인을 설치할 수 있습니다.  Eclipse 플러그인 버전에서는 디버거로서의 기능뿐만 아니라, 구문 검사 기능 등을 갖춘 유용한 JavaScript 편집기도 제공되며, JavaScript 편집기에서 임의의 행을 클릭하여 중단점을 설정할 수 있습니다.

Eclipse에서 JavaScript Debugging 모습

JavaScript Debug Configuration 설정 모습



Eclipse 의 웹 작업 영역에서 HTML 파일을 선택하고 마우스 오른쪽 클릭 -> “debug” -> “JavaScript Debug Tool”으로 디버깅을 시작할 수 있습니다.


정리
JSDT는 HTTP 프록시가 디버깅 코드를 삽입하는 방법을 이용하여 브라우저 측에 특수 기능 등을 필요로 하지 않고 사용자 웹 브라우저에서 JavaScript 디버깅을 가능하게 하고 있습니다.  또한 독립 실행형 버전과 Eclipse 플러그인 버전을 제공하고 있으며, 개발 스타일에 맞춰 선택할 수 있습니다.

그러나 아직까지는 몇몇 문제점들이 남아있습니다.  실제로 개발에 적용해보는 것은 어려울 지도 모르겠습니다.  하지만 그런 문제점들을 떠나서 JSDT의 구조를 보면 알겠지만 매우 획기적인 디버거라 할 수 있다는 것입니다.  


출처 : http://journal.mycom.co.jp/column/ide/063/index.html 

신고
Posted by Rhio.kim
플래시 플랫폼에 FLARToolkit 을 이용하여 증강현실(Augmented reality) 구현에 대한 내용들이 많이 있는데요.

증강현실 관련 자료
위키 : http://ko.wikipedia.org/wiki/증강현실
라이브러리 : http://nyatla.jp/nyartoolkit/wiki/index.php?FLARToolKit

예시
okgosu님 : http://okgosu.tistory.com/170
비디오 구글 : http://video.google.com/videoplay?docid=6523761027552517909&hl=en


이 구현된 증강현실을 JavaScript 와의 인터페이스를 할 수 있도록 확장한 라이브러리가 있어서 소개합니다.
현재는 초기 모델인지 간단한 움직임에 대한 수치정보만 Flash 에서 ExternalInterface를 이용해 통신하는 것 같네요.

재미있어서 한번 찍어봤습니다.  뭐 증강현실에 대한 것은 Flash에서 구현된 것이지만 JavaScript와 동작할 수 있도록 한 것은 괜찮은 아아디어네요.

얼마나 실용적인지는 모르겠지만 Canvas에 Drawing 한다던가 여러가지 재미있는 일들을 만들 수 있지 않을까 싶기도 합니다.

영상이 잘 모이지 않을 수 있는데요. 부연설명을 드리자면 마커를 인식하고 붉은색 테투리를 그려서 표시하는 것은 Flash에서 처리되는 내용이고 그 하단 부분에 작지만 수치 정보가 표현되는 것이 있습니다.

그 부분이 Flash에 전달해주는 정보입니다.


출처 : http://kawa.at.webry.info/200904/article_2.html
신고
Posted by Rhio.kim

Ext 가 최초 릴리즈로부터 벌써 3년이라는 세월이 흘렀네요.  3년이란 시간동안 참 많은 것들이 변했네요.  

YUI, jQuery, Prorotype 등의 Adapter로 동작하던 ExtJS 가 RIA 개발에 특징있는 프레임웍으로 자리를 잡아가고 있으니 말이죠.

이번 릴리즈는 Ext 팀에게 있어서는 매우 자부심을 갖을 만하겠네요.  ExtJS의 Core 부분의 저작권을 MIT 라이선스로하여 모든 사용자에게 자유롭게 사용할 수 있도록 하였습니다.

그런다고 하여 모든 부분이 허가되는 것은 아니지만 나름 오픈소스로 가기 위한 걸음마를 하는 것은 아닐까 기대해봅니다.  거꾸로 생각해보면 이것을 오픈 소스로 가면서 맛배기를 더 보여주고 사용자층을 확대하려는 의도가 숨어있을 수도 있겠네요.  이로 좀더 많은 사용자 애플리케이션이 많이 개발되어졌으면 좋겠네요.  

이번에 발표한 Core는 Ext JS 위해 필수 요소로 동작은 기본으로 기존 오픈 라이브러리(MethodChain, Prototype, jQuery, YUI 등) 들과 동일한 혹은 유사한 기능들을 제공합니다.


Ext Core 개요

Ext Core는 명료한 사용과 재 사용을 용이하도록 한 잘 정의 되어진 객체지향 구조를 가지고 있어 다른 자바스크립트 라이브러리로부터 스스로를 구별하고 충돌을 예방합니다.

DOM manipulation and traversal
CSS management
Event handling
Dimensions and Sizing
Ajax And JSON Support
Animations

DOM을 위한 크로스 브라우징 추상화를 추가적으로 제공하고 또한 Ext Core는 다음과 같은 Ext JS에서 가장 많이 사용하고 가장 인기 있는 부분을 추가했습니다.

Classical Inheritance Class System
Observable Class
Markup generation and Templating
Timed code execution
URL encoding and decoding


라이브러리 사이즈
다이나믹 웹 페이지 혹은 작은 애플리케이션에 포함하기 위해서 완벽에 가깝도록 모든 라이브러리를 리펙토링을 거치고 또한 거기에 최소화와 gzip(압축)을 거쳐서 25KB로 압축되어있습니다.


Ext Core 매뉴얼
Ext Core의 매뉴얼은 다른 라이브러리와 다른 것들에 대해 쓰여졌습니다.  그리고 이 문서들은 커뮤니티에서 전문가들에 의해서 리뷰되었고 Ext JS를 시작하는 사용자와 이미 경험한 개발자들에게  Ext Core의 모든 측면을 사용하기 위한 방법을 좀더 깊이 있게 제공할 것입니다.

이 미니북[http://extjs.com/products/extcore/manual/]은(75페이지로 인쇄된) API 문서에 이미 존재하는 것들을 좀더 상세히 설명하기 위함이고 자바스크립트와 Ext의 이해를 명료하게 하기 위해 매뉴얼을 읽기를 권장합니다.


Ext Core
http://extjs.com/blog/2009/04/04/ext-core-30-beta-released/ 에 가시면 Ext JS 팀에서 Core를 이용해 만들어놓은 기능들이 있습니다. 

 


DomQuery 와 CompositeElementLite
DomQuery는 셀렉터(선택자)기반의 고성능 엘리먼트 검색을 지원하고 사용자 선택자와 기본 XPath 와 같이 CSS3 셀렉터 스펙의 거의 대부분을 지원합니다.  CompositeElementLite의 인스턴스를 사용하는 것은 단일 엘리먼트에서 동작했던 것과 같은 방식으로 콜렉션에서도 상호 작용할 수 있도록 Ext Core는 허용합니다. 

Ext.select(‘div:has(> span.someClass)’).addClass(‘myCls’);

Event handling
Ext Core의 이벤트 핸들링 추상화는 크로스브라우저상에 일반적인 이벤트 핸들링과 사용자 이벤트를 제공하기 위한 것을 제공합니다.  윗단에는 딜레이, 버퍼링, 델리케이팅과 타겟팅 이벤트를 위한 설정 옵션을 제공합니다.

Ext.fly(‘elId’).on(‘click’, function(e, t) {
Ext.fly(‘log’).update(‘You clicked on the element with id : ‘ + t.id);
});

Ajax Requests
Ext Core는 XMLHttpRequests를 사용하기 위한 순수한 크로스 브라우징 추상화를 가집니다. 이 부분은 Prototype 과 거의 유사해 보이네요.

Ext.Ajax.request({
url : ‘serverSide.php’,
success : function( r ) {
var data = Ext.decode(r.responseText);
}
});


원문 출처 : http://extjs.com/blog/2009/04/04/ext-core-30-beta-released/


신고
Posted by Rhio.kim