'JavaScript'에 해당되는 글 118건

  1. 2011.12.02 JavaScript 비젼과 함께 했던 나의 H3 컨퍼런스 - 발표자 후기 :) (13)
  2. 2011.11.15 웹 소프트웨어 시장의 새로운 Role 모델, 자바스크립트 (6)
  3. 2011.10.23 JavaScript. 실행 컨텍스트 이해(Execution Contexts) (2)
  4. 2011.10.12 JavaScript. The Core (3)
  5. 2011.06.24 JavaScript History 정리 자료
  6. 2011.05.29 자바스크립트 닌자에 의미를 부여해 본다. (2)
  7. 2011.05.08 자바스크립트. 그 다음 구글 Traceur (2)
  8. 2011.02.26 2011년은 자바스크립트 개발자 전성시대 (9)
  9. 2010.10.25 C++ Addon with Node.js (4)
  10. 2010.04.17 Ext JS 3.2 API Documentation Desktop App release! (2)
  11. 2010.04.15 Hybrid Web Application을 위한 Titanium(타이타늄) (6)
  12. 2010.03.06 @kangax의 JavaScript Quiz 풀이 (8)
  13. 2010.02.11 모질라 Jetpack - GPU를 활용한 JavaScript 가속화 시도 (2)
  14. 2010.01.30 JavaScript 필수 프로그래밍 언어로 !! (6)
  15. 2010.01.02 JavaScript in 2009 and 2010 (6)
  16. 2009.08.31 TestSwarm Alpha 버젼 공개. (4)
  17. 2009.08.27 JavaScript 디버거 “JSDT” (4)
  18. 2009.04.07 Ext Core 3.0 Beta 릴리즈
  19. 2009.04.01 Ext JS 3.0 Class Diagram? (2)
  20. 2009.02.05 Browser sniffing - using JavaScript (자바스크립트만을 이용한 브라우저 스니핑) (2)
  21. 2009.01.23 Advanced Application Design in ExtJS (2)
  22. 2008.12.31 IE 에서 JavaScript 를 가속화(DOM 접근) 하는 방법 (8)
  23. 2008.10.15 Good bye alert(); - JavaScript Library (2)
  24. 2008.10.11 JavaScript Injection Attack
  25. 2008.10.07 Practical Functional JavaScript in Ajax Experience 2008 (4)
좋은 분들에 의해서 벌써 큰 컨퍼런스에서 발표하게 된게 벌써 2번째네요. 
늘 좋은 이야기와 들려주고 싶은 이야기를 다 하지 못하는 제한된 시간이 야속합니다.

이번 H3 컨퍼런스 2011 에서는 자바스크립트에 대한 비젼을 이야기 하고 싶었고 트위터 어느 팔로워분이 그랬듯 늘 트위터에서 이야기했던 내용들이 대부분이였습니다.

어느 자리에서나 발표를 해야될 때면 발표자들은 욕심이 많아지는것 같습니다. ^-^
저도 '웹 소프트웨어 시장의 새로운 롤, 자바스크리트' 발표에서 이야기하고 싶은 풀 스펙은 PT로 300 페이지가넘었지만 모두 하지는 못하고 줄이고 줄여서 60여 페이지로 만들었죠.  

다소 지루할 만한 차세대 자바스크립트의 표준화 기술 동향과 서버사이드 자바스크립트에 대해 수박 겉핥기(?)로 살펴봤지만 고민 많이 헀습니다.

차라리 아두이노와 자바스크립트로 미디어 아트를 재현했으면 더 나았을까?
라는 생각도 해봅니다.

하지만 무엇보다 더 중요한 것은... 모든 책의 첫 머릿글이 그 책의 전부를 말하듯이 다양한 분들이 많은 관심으로 투표를 해주셨던 만큼 기술 집약적인 이야기는 욕심이였을 것 같습니다. 또한 기술은 늘 빠르게 변하니까요... :-) (이제와서 핑계를....)

이번 발표에서는 웹 소프트웨어 시장에 새로운 롤 모델에 대한 이야기를 했습니다.  간단히 말하면 '자바스크립트를 합시다' 인데 일차적으로 생각보다 많은 참석자에 깜짝 놀랬고 이차적으로 발표 후 생각보다 발표 내용에 대한 피드백이 적어서 더 깜짝 놀랬습니다. -_-;;


내용이 좋았는지 나빴는지 감이 안옵니다. 허허허 -.-;;;  
트위터로 몇 분이 왜? 강단에 올라가지 않았나요, 트위터에 다 들었던 이야기였다 라고 해주셨고 2,3분 정도가 내용 괜찮았어요. 라는 피드백을 받고 없다.  다른 발표자 분들도 그러시려나 ^-^;; (피드백, 질문, 명함 모두 감사드립니다. ^-^)

컨퍼런스에서 발표한 자료를 공유합니다. 

아직 못다한 이야기의 풀 스펙은 차차 공개하도록 할 예정입니다. 물론 글로만 공개할 것은 아니고 자리를 만들어 못다한 300페이지의 이야기를 프론트 앤드 개발자들과 함께 나누겠습니다. (대학교 강의실 같은 곧으로 다가 누가 스폰 좀 해주시면 좋은데... ^-^)

문서중 자바스크립트의 롤 모델을 표현한 시각화 자료(Gource 를 이용했음)


발표 자료가 조만간 전체 공개되겠지만 개인적으로 요구하신 분들이 몇분 있어서 미리 공개합니다.


마치며...


이번 컨퍼런스를 위해 숨어서 고생해주신 모든 분들께 개인 블로그를 통해서 나마 감사하다는 말씀 전합니다.  그리고 참석해주신 분들께도 감사드립니다. :-)

우리집 멍멍이 쪼꼬

잘 놀아주지 못한 우리집 멍멍이도 고맙다.. 짜식 잘생겨가지고 ㅋㅋ/ 아직 강남에서 이런 코카는 본적이 없는데 애인구함 -_-;


신고
Posted by Rhio.kim
이번 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

C++ Addon with Node.js

Node.js 2010.10.25 20:58

Node 는 V8 자바스크립트 엔진을 기반으로 동작하는 서버 사이드 자바스크립트로 V8 엔진과 유기적으로 동작할 수 있는 C/C++로 작성된 추가기능을 제공합니다.


이것은 구조적으로 추가 기능과 동적으로 공유 객체를 연결하고 C, C++ 라이브러리를 위한 연결 지점을 제공합니다.


V8 엔진도 C++ 로 작성된 라이브러리로 자바스크립트의 오브젝트를 만들거나 함수 호출등의 인터페이스에 사용됩니다.  문서화는 대부분 v8.h 헤더파일에 기록되어 있어 추가기능을 만들기 위해서는 자주 참고하게 될 것입니다. (Node의 소스 트리중 deps/v8/include/v8.h를 참고하세요.)


Node 의 동작에 있어서 가장 중요한 역할을 하는 두가지 라이브러리가 있습니다.  그것은 libev 인터페이스와, libeio 쓰레드 풀 라이브러리 입니다.


이 문서를 통해 Node.js 의 Addon 의 구조와 원리를 이해하고 직접 Native Extension 개발을 습득해봅니다.





Node는 크게 자바스크립트 언어 레이어와 C 언어 레이어로 나뉜다.  C 언어 레이어는 C++로 개발된 구글의 V8  자바스크립트 엔진은 쓰레드 풀 라이브러리인 libeio 와 이벤트 루프 라이브러리인 libev 로 시스템에서 자바스크립트이 가능하도록 하는 코어 역할을 한다.


Node binding 레이어는 Blocking POSIX 시스템을 비동기적으로 호출하기 위한 대부분의 래퍼들을 구현해 놓았다.  이것들은 Node 저장소에 있는 소스 중 src/*.cc 에 포함되어 있고 Node standard library 의 대부분이 래퍼들과 동작하게 된다.


Node standard library 레이어는 Node binding 에 구현해 놓은 래퍼들이 제공하는 API를 이용해 자바스크립트에서 효율적이고 손쉽게 시스템상에서 I/O 프로그래밍을 할 수 있도록 지원하는 서버 사이드 라이브러리 이다.


Writing Native Extension for Node


Libraries

  1. C event loop 라이브러리 (libev)
    1. http://cvs.schmorp.de/libev/ev.html
    2. 파일 디스크립터가 읽을 수 있게 되고, 타이머를 기다릴 때 혹은 신호를 받기를 기다릴때 등에서 libev 인터페이스가 필요하다.
    3. 모든 I/O 작업을 할때 libev 인터페이스는 꼭 필요하다.
  2. C thread pool 라이브러리 (libeio)
    1. http://pod.tst.eu/http://cvs.schmorp.de/libeio/eio.pod
    2. 블럭킹 POSIX 시스템을 비동기적으로 실행하는데 사용한다.
    3. Non-blocking 프로그램을 가능하게 한다.

좀더 자세한 사항은 PDF를 다운로드 받아서 보세요. :)

신고

'Node.js' 카테고리의 다른 글

C++ Addon with Node.js  (4) 2010.10.25
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

하이브리드 웹 애플리케이션 개발 도구인 Appcelerator사의 Titanium(타이타늄)은 크로스 플랫폼하에 동작이 가능한 네이티브 애플리케이션 개발을 위한 도구이다.  이런 도구는 Titanium외에도 PhoneGap이라는 도구도 있다.  단 PhoneGap의 경우에는 Titanium과 아키텍쳐는 유사하지만 모바일에 초점이 맞추어져 있고 Titanium의 경우에는 모바일뿐 아니라 데스크탑 애플리케이션까지 개발이 가능하도록 도와준다.


구조

Titanium은 4가지 레이어로 나뉜다.
1. HTML/CSS/JavaScript 으로 구현된 애플리케이션 코드
2. 디바이스와 데스크탑의 내장 기능에 접근하기 위한 API, 분석과 모듈 기능
3. 웹 형태의 코드를 내장 애플리케이션으로 컴파일하기 위한 브릿지 
4. 크로스 플랫폼으로 배포를 위한 응용프로그램 패키지 런타임 쉘


특징
가장 큰 특징은 웹 서비스를 개발하기 위하여 가장 흔히 사용되어 왔던 서버 영역에 PHP 뿐아니라 Python, Ruby 를 포함한 최근 연일 이슈에 오르는 HTML5과 CSS3, JavaScript 로 데스크탑 운영 체제인 Window, OSX, Linux 위에서 내장 애플리케이션으로 손쉽게 개발, 패키징, 배포할 수 있는 것이다.

여기에 더하여 iPhone과 iPad, Android 의 모바일 플랫폼에서도 동일하게 내장 애플리케이션을 개발할 수 있도록 한다.

웹 개발자들에게 있어서는 기존에 가지고 있던 웹 개발 스킬을 굳이 iPhone,iPad 앱 개발을 위해 Objective-C를 학습하다던가 Android를 위해 Java 공부를 새롭게 시작할 필요가 50%정도는 줄어든 셈이다.



모바일

iPhone을 생각할 때 가장 특징은 바로 터치로 움직이는 유연한 UI를 손꼽을 수 있다. Android 역시 비슷하다. 

Titanium은 이러한 UI와 table view, scroll views, native button, switch, tab 등과 같은 대부분 것들을 제공한다.


다시 말하면 웹 기술만으로도 iPhone이나 Android에서 기존의 네이티브 애플리케이션들과 똑같이 동작한다는 것이다.

또한 페이스북이나 야후, 트위터와 같은 소셜 네트워킹 서비스나 위치기반 서비스들을 그대로 활용할 수 있게 된다.

무엇보다 중요한 것은 모바일 디바이스의 내장 기능(비디오, 데이터 베이스, 카메라등) 들에 접근인데 거의 모든 기능들을 접근할 수 있도록 지원하고 있다.  물론 웹 표준 기술들을 지원하기 때문에 동반하는 많은 기술들을 그대로 사용할 수 있다.

1. Rich Multimedia 
2. Flexible Storage ; Filesystem, Database On Device
3. Unlimited Extensibility
4. Your Best Shot: Access the Camera or Video Camera
5. Cloud-Connected Apps
6. Code like it’s the year 202 : HTML5 and CSS3 support

모바일 앱에서 필요한 거의 대부분의 기능들을 300개 이상의 API를 이용하여 제공하고 있다.


데스크탑
그간 웹 기술을 이용하여 데스크탑 애플리케이션을 만들기 위한 도구로는 Adobe AIR의 런타임 환경에서만 구동되고 HTML이나 JavaScript의 기술로 만들더라도 AIR 플랫폼의 특징을 이해해야 했다.  반면에 Titanium 은 더 나은 기존의 나왔던 도구들보다 더 나은 성능과 각각의 OS에 기반 UI, 데이터베이스 접근, 오프라인 기능, 알림기능 그리고 멀티미디어 기능까지 모두 제어할 수 있다.

Adobe AIR와 마찬가지로 하나의 코드로 Window, OSX, Linux의 세가지 플랫폼에서 동일하게 동작하지만 Adobe AIR에 비해서 메모리 사용률은 1/10배에 불과할 뿐 아니라 로컬 시스템 접근을 완벽하게 지원한다.

이 말은 웹에서 구현할 수 있었던 거의 모든 기능들을 데스크탑에서 구현하게 됨으로써 플래시 비디오나 마이크로 블로그는 데이터 저장소를 로컬에 둠으로써 향상된 성능과 오프라인상에서 원활히 동작할 수 있게 된다.

또 하나의 작은 특징이라면 운영체제에서 지정된 UI를 완벽하게 지원하는데 이것은 Titanium 자체에서 각각의 플랫폼에 맞게 동작하도록 되어있다. 

Appcelerator 사에서 Titanium 의 초점은 바로 모든 플랫폼에서 원할히 동작할 수 있는 오픈웹 기술들에 있다.  이것은 webkit 엔진의 최선 버전이 번들되게 되고 HTML5나 CSS3의 최신 기능들이 따라서 제공된다.

추가적으로 커스텀 에니메이션, 3D 이펙트 혹은 크로스브라우저 문제 없는 킬러 UI를 만들 수 있다.


Titanium Desktop 에는 몇 가지 특징이 더 있다.

1. The Appcelerator Network breaks the interup barrier
         자체적인 클라우드 서비스를 이용해 빌드, 패키지, 크로스 플랫폼으로 배포까지 지원.
2. No sandbox, better Performance
        Adobe AIR와는 달리 시스템 리소스 전체를 접근할 수 있도록 지원하고 AIR 애플리케이션에
        비해 약 1/10배의 메모리만 사용.
3. Apps for more than just the desktop
        파워 디지털 간판, point for sale, 키오스크, ATM기, 셋톱 앱 그리고 구글 크롬 OS와 애플 
        타블렛에도 지원할 예정.
4. Mix and match your favorite web technologies
        오픈웹 기술 HTML5, CSS3, JavaScript 뿐만 아니라 서버사이드 기술인 Python, Ruby, PHP까지 
        모든 플랫폼, 모든 앱, 모든 운영체제에서 모두 제공.


요약
Adobe AIR 의 경우에는 웹 기술을 활용하여 데스크탑 애플리케이션 개발을 위한 환경이였고 실제로 만들어 보려고 몇번 시도는 했으나 번번히 작은 제약들과 AIR 환경에 대한 학습 부담이 있었지만 Titanium은 동일한 코드로 애플리케이션을 빌드하고 패키지하여 배포하는데까지 AIR 만큼의 학습을 요구하지 않습니다. 

아니 그냥 메뉴얼에 따라 움직이면 될정도 간단하고 쉽습니다.
이미 만들어 놓은 웹 기반 애플리케이션이 있다면 패키지 레퍼런스를 보고 한번 따라해보면 될것도 같습니다.

모바일이나 맥, 리눅스 개발환경이 없어서 패키징이나 배포를 해볼 기회는 없으나 윈도우에서는 정말로 간단히 애플리케이션을 만들 수 있도록 지원합니다.

개발자 커뮤니티를 통해 계속적으로 발전을 꾀하고 있고 오픈 웹 기술의 발전 가능성 만큼 타이타늄과 같은 플랫폼은 발전가능하다는 것을 느끼게 되었습니다.


더불어 HTML, CSS, JavaScript를 이용해서 데스크탑이나 모바일 애플리케이션을 만들 수 있는 도구가 나왔고 웹 개발자에게 있어서도 좋은 기회들을 많이 만들 수있을 것 같다는 생각이 듭니다. : )





신고
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

모질라는 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
작년 한해는 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
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

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
Ext JS 3.0 이 컨퍼런스 후에 공개될 예정인것 같은데요.
최근에 만든 Ext JS 2.2.1 Class Diagram 을 Ext JS 포럼에 올렸더니 나름 인기가 있네요.

Ext JS 팀에서 패키지 별로 분할해서 만들어 달라는 요청도 있었구요.
이번 1주년 컨퍼런스에서 프린트해서 사용해도 되겠냐는 요청도 와서 예쁘게 사용해달라고 소스와 함께 전달했더니

Ext JS 3.0을 미리 볼 수 있게 되었네요.. (프리미엄 맴버 : 라이센스 구매자들은 미리 볼 수 있는지 모르겠군요..)
사실 미리 보여주면 3.0으로 갱신해 줄 수 있는지 물어봐서 미리 보고 싶은 마음에 갱신해주겠다고 했죠.

오늘부터 소스도 살펴보고 Ext JS 3.0 design Class diagram 을 조만간 보실 수 있을 것 같습니다.


ExtJS 3.0 Preview : http://extjs.com/blog/2008/04/21/ext-js-21-and-ext-gwt-10-released-preview-of-ext-js-30/
ExtJS 3 Designer : http://extjs.com/forum/showthread.php?t=52258

button

toolbar


신고
Posted by Rhio.kim

일반적이고 대부분의 브라우저 스니핑 기법은 각 브라우저에서 지원하는 DOM의 차이점을 이용하여 활용하고 있습니다.  

그리고 최근 Ajaxian.com 을 통해 소개된 기사에서는 JavaScript 만을 이용한 스니핑 방법을 소개하고 있습니다.


꾀 오래전에 Opera의 Array의 Slice 메소드가 IE, FF, Safari와 다르게 동작하여 피드백을 해놨는데 답변이 없더니 패치는 된것 같습니다.

이렇듯 현대 주(major) 브라우저의 자바스크립트는 ECMA Script 262-2 Spec을 따르고 있는데요.  이 JavaScript 역시 브라우저마다 작은 차이점들을 가지고 있습니다.  

//Firefox detector 2/3 by DoctorDan
FF=/a/[-1]=='a'

//Firefox 3 by me:-
FF3=(function x(){})[-5]=='x'

//Firefox 2 by me:-
FF2=(function x(){})[-6]=='x'

//IE detector I posted previously
IE='\v'=='v'

//Safari detector by me
Saf=/a/.__proto__=='//'

//Chrome by me
Chr=/source/.test((/a/.toString+''))

//Opera by me
Op=/^function \(/.test([].sort)

소개된 코드들은 상당한 테스트와 분석에서 나온 결과물이 아닐까 생각이 듭니다.

더보기




신고
Posted by Rhio.kim

웹 애플리케이션 설계에 있어서 가장 유연하고 강력한 방법은 Douglas Crockford 에 의해서 제안된 Module pattern이 아닐까 생각합니다.

http://yuiblog.com/blog/2007/06/12/module-pattern/
http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/




고급 레벨 어플리케이션 개발을 위해서는 HTML의 document.body를 캡슐화 하기 위해서 Ext.Viewport를 사용해야 합니다.

이 말은 즉 여러분이 만들게 되는 애플리케이션이나 ExtJS의 콤포넌트들이 Viewport의 아규먼트화 되어 동작하게 됩니다.

// in customTree.js
var customTree = new Ext.tree.TreePanel({ }); 
// in customPanel.js
var customPanel = new Ext.Panel({ }); 
// in customGrid.js
var customGrid = new Ext.Grid({ }); 

바로 이 부분들이 각각의 External JavaScript 파일에서 구현되어지고 이는 MyApp 에 의해 반환되어질 Viewport 의 콤포넌트들로 동작하게 됩니다.

MyApp = (function(){
    var count = 0;
    var increaseCount = function(){
        count++;
    };
 
// MyApp 오브젝트에 할당되어진 함수로부터 반환하는 것
// 애플리케이션은 추가적인 특별한 기능들을 갖는 Viewport 이다.
    return new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            height: 100,
            el: 'header-element-id'
        },
        customTree, customPanel, customGrid ],

        getCount : function(){ 
            return count;
        },

        checkCount : function(){
            increaseCount();
            if (this.getCount() > 10)
                alert("카운트가 10보다 크다");
        }
    }
})();

위 소스는 구조적 설명을 위해 ExtJS 사이트에서 참조하고 수정되어 동작됨은 확인하지 않았습니다.

원글 : http://extjs.com/learn/Manual:Advanced_Application_Design


신고
Posted by Rhio.kim

다음의 코드를 JavaScript의 맨 앞쪽에서 수행하면 됩니다.

/* @ cc_on _d = document; eval(‘var document = _d’) @*/


위의 코드를 IE에서 수행을 하면 document 접근이 약 5배 정도 빨라집니다.

//before
var date = new Date;

for(var i = 0; i < 100000; i++) document;
alert( new Date – date);//547

/* @ cc_on _d = document; eval(‘var document = _d’) @*/

//after
date = new Date;
for(var i = 0; i < 100000; i++) document;

alert( new Date – date);
//47


IE에서는 document에 그냥 접근하게 되면 window 객체의 내부 메서드가 실행됩니다. IE에서는 이 부분이 아주 무거운 부분인데요.


var _d = document;


이렇게 하고 _d 라는 document의 레퍼런스를 통해서 접근하면 매우 빨라집니다.
위의 코드를 몇 가지의 형태로 더 테스트 해봤습니다.
 대부분의 브라우저에서 속도가 10배 혹은 20배 이상 나타나는 경우도 있었습니다.

// Before
var date = new Date; 
for (var i = 0; i <100000; i++) document.getElementById; 			

alert ('before '+ (new Date - date)); // 100			

/*@cc_on _d=document; eval('var document=_d; var getEl=_d.getElementById;')@*/			

var _d = document;
var getEl = _d.getElementById;

// After
date = new Date; 
for (var i = 0; i <100000; i ++) getEl;  

alert ('after '+ (new Date - date)); // 4
 

Chrome 에 document.getElementById 의 DOM 메서드에 대한 테스트에서는 Before : 100s,  After : 4s 정도가 평균적으로 나타났습니다.


위의 내용은
일본의 amachang 씨가 블로그에 소개한 내용입니다.


원글 : http://d.hatena.ne.jp/amachang/20071010/1192012056
추가글 : http://d.hatena.ne.jp/uupaa/20081230/1230604575

이 글에 대한 자세한 테스트 자료가 있어서 함께 소개합니다.

신고
Posted by Rhio.kim
심플한 라이브러리를 소개할까 합니다.  최근에 라이브러리 소개를 하지 않았는데 오랜만에 ^^..
소개하는데도 당연히 이유가 있겠죠.



Blackbird 라는 라이브러리 입니다.

일단 사이트에 접속을 하면 큰 글자로 이렇게 적혀있습니다.


Blackbird 에게는 "만나서 반가워" 이라고 말하고 alert() 에게는 "이만 안녕" 이라 말하라고 합니다. 
그래서 무엇인고 봤더니 log와 profiler로 활용하기 좋은 rich application을 JavaScript로 구현을 해 놓았군요.
이런 라이브러리야 이미 YUI에도 유사한 모양으로 있고 firebug에서도 강력하게 지원을 해주고 있는데...

깜직한 아이콘은 둘째 치고 개발자 편의를 위해 단축키까지 처리해 놓은 것을 보면 참. 많은 것을 느낍니다.

이미 나온 Blackbird 라이브러리는 누구나가 만들 수 있지만... 처음 나온 Blackbird 라이브러리는 처음 만든 개발자의 스킬과 마인드에서 밖에 나올 수 없는게 아닐까 생각해봅니다.

alert() 에게 "이만 안녕" 이라 말 할만 한가요?

Library : http://www.gscottolson.com/blackbirdjs/
Google : http://blackbirdjs.googlecode.com/
신고
Posted by Rhio.kim
JavaScript Injection Attack - 자바스크립트 인젝션 공격

JavaScript 보안 관련 자료가 있어 번역하여 올립니다.
웹 기술의 변화와 관심이 달라지는 만큼 함께 신경써야 할 부분도 많아지고 그만큼 복잡해지나 봅니다.


최근 JavaScript 인젝션 공격이 유행하고 있습니다.  Malware 감염을 전파하는 효과적인 수단으로 이러한 종류의 공격을 활용하는 악성웨어들이 늘고 있다.

불과 1 년 전만해도 악의적인 공격자가 의지하고 있던 것은 공격용 Web 사이트를 가리키는 이메일, 검색 링크 또는 인스턴트 메시징 웜 등의 연결로 사람들을 유도하는 방식이었다.

지금은 JavaScript 인젝션 공격을 이용하여 Web 사이트의 방문자를 "납치"하고 만다. 이 공격은, 이른바 어둠 세계의 해커들이 악성웨어가 만연하도록 하는데 사용하는 맥가이버 칼과도 같다.


예시


우리는 다수의 높은 트래픽을 보았고, 합법적인 웹 사이트들은 이 기술을 이용해 공격을 받았다.  최근  알렉사 랭크 3172의 미국의 매우 유명한 게임 포털인 MegaGame도 하나의 예이다. 자바스크립트 인젝션 공격은 MegaGame 서버 중 하나의 서버에 몇 줄의 코드를 성공적으로 추가하였고 이 추가는 아무것도 모른체 웹 사이트를 접속한 방문자들을 악의적인 유럽 사이트로 이동시키고 악성웨어에 감염시키려 시도되었다.

그 악의적인 사이트는 두 가지 다른 방법을 통해 방문자들에게 공격을 시도하였다.  첫 번째는 Microsoft MDAC RDS.Dataspace ActiveX Control Remote Code Execution Vulnerability (MS06-014).
를 시도했다.

 


이 공격은 Microsoft's Internet Explorer (IE) 브라우저를 사용하는 방문자에게만 성공할 수 있었다.
왜냐하면 이 Web 사이트는 기본적으로 ActiveX 컨트롤의 사용을 요구하고 ActiveX 컨트롤 및 IE 간의 상호 작용에 존재하는 허점 (루프 홀)을 통해 원격으로 컴퓨터를 공중 납치하기 때문이다.

두 번째 공격은 다운로드 시 실행되고 IE뿐만 아니라 "Firefox"버전 1.0이 2.0이 대상이다. 이 공격에서는 JavaScript를 사용하여 Web 브라우저 종류를 확인하고 그 후에 미국 어도비 시스템의 Flash의 악용을 통해 공격에 대한 바이너리 파일을 PC에 다운로드하고 실행한다.

 


MegaGames의 Web 사이트는 여전히 감염된 상태. 불행히도 이것이 바로 현재의 상황을 말해 준다

인터넷 이용자의 대부분은 "pr0n"(포르노) 나 "warez"(와레즈 : 불법 복제 소프트웨어) 와 같은 계시의 위험이 높다.  (dodgy: 자못 의심스러운) Web 사이트를 방문한 경우 감염도 없다고 생각하고 듯하지만,  불행이도 그것은 잘못된 생각이다.

Malware 수법은 이전보다 성공화되고 있으며, 현재는 제대로 된 뉴스 사이트 및 비즈니스 관련 사이트도 감염되어있을 가능성이 있다.

"안전한 Web 사이트는 존재하지 않는다"는 것을 보여주는 또 경우가 BusinessWeek.com이다.  아주 정통으로 접근할 수가 많은 이 사이트가 SQL 주입 공격 타겟이 됐다.  이 같은 SQL 인젝션 공격이  JavaScript 인젝션 공격으로 연결 된다.

출처 : http://www.f-secure.com/weblog/archives/00001502.html


포스팅하려고 준비해 둔 JavaScript Injection 공격에 대한 자료를 첨부합니다.
상세한 자료는 아니고 아웃라인(흐름)에 대한 내용입니다.


신고
Posted by Rhio.kim
올해 Ajax Experience 에서 Oliver Steele 의 JavaScript 발표 자료입니다.
JavaScript의 예제 중심의 키 포인트를 집어주고 있네요.

JavaScript의 언어적 특징을 이해하는데 도움이 되겠네요.

블로그 : http://osteele.com/
페이지 : http://osteele.com/talks/ajaxian-2008/samples/
프리젠테이션 : http://www.slideshare.net/osteele/oliver-steele-functional-javascript-presentation
PDF : http://osteele.com/talks/Oliver_Steele_Functional_JavaScript_v2.pdf
신고
Posted by Rhio.kim


티스토리 툴바