사용자 삽입 이미지

우렁 아가씨가 다녀갔다

어제도 이런 저런 자료를 보다가 새벽 2시 즈음에 잠이 억지로 들었었는데...

다 못보고잔 "NorthCast - Christian Heilmann - YUI! javaScript Evolved.avi"

내용이 퍽 궁금하지는 않지만 빨리 보고 싶다..

외국에는 저런 개발자들의 커뮤니티가 자연스럽게 형성되는 것 같은데 늘 국내의 개발자 커뮤니티에 대해서는 불만이다..

앗참.. 우렁각시...

점심밥 먹고 와서 너무 피곤해서 의자에 파뭍혀 잠을 청하고 있었는데..

너무 깊숙히 잠들었었나 보다.. 누가 다녀간지도 기억도 소리 조차 없었는데..

일어나서 한참을 코딩하고 있는데 어디선가 자꾸 "아메리카노" 커피 향이 코구멍을 간지럽혔다..

블로그에 누가 왔었나 한번 보려고 했는데 주위를 잠깐 살펴봤더니 달력옆에 놓여진 커피~~

이런 사랑스러운 사람들... 누군지 모르지만 확 사랑해버리고 싶다 ㅋㅋㅋ..


신고
Posted by Rhio.kim
야후 YUI가 2.5로 릴리즈 되었네요.
그것도 엄청난 새로 추가된 Layout Manager, Uploader(플래시와 자바스크립트를 연동한 다중 업로드), Resize Utility, ImageCropper, Cookie Utility, ProfilerViewer Control(매우 비쥬얼함)

그리고 DataTable Control의 향상되었고 슬라이드 컨트롤에 Dual-Thumb Slider functionality 의 새롭게 포함되었습니다.

DataTable Control
사용자 삽입 이미지

퍼포먼스 향상과, 수평, 수직 스크롤링, Paginator 클래스, 드래그 드롭 컬럼 재정렬 지원, 칼럼 표시/숨기기/추가/삭제를 후킹하기 위한 컬럼 APIs를 제공합니다.(해보지 않아서 맞는 말인지 모르겠음;;)

DataTable 은 YUI에서 가장 인기 있고 중요한 컴포넌트이레요(과연..흠..)


Layout Manager
사용자 삽입 이미지
안정화만 되면 상당히 좋은 기능을 할 것 같습니다.
예제를 잠깐 수행해봤는데 아직 최적화 되지는 않았고 알파 수준에 미치는 것 같습니다.

패널에 다양한 컴포넌트를 얹어서 좌측 레이아웃 처럼 구성해서 리사이즈, 풀사이즈, 드래그 등 다양한 액션을 제공하는 컴포넌트입니다.

컨테이너의 패널에 composition style로 다양한 컴포넌트를 올려 실제 움직이는 어플리케이션과 같은 레이어를 구성해주는 역활을 합니다.



Uploader
사용자 삽입 이미지
여러분들이 그동안 브라우저를 통한 업로드를 위한 UI를 생성했다면 어려운점이 많았을 것입니다.
하나의 파일을 올리거나 프로그래스 상황 표시하는 거나, 메타 데이터에 실질적 접근 등등 하지만  YUI Uploader 는 이 문제를 포함 다른 문제들도 함께 처리가 가능하게 되었구요.  javascript/flash 하이브리드 컨트롤이랍니다.;;;


Resize Utility
  Layout Mangaer 에 확장되어 리사이즈를 담당합니다.

ImageCropper Control
사용자 삽입 이미지
Resize Utility를 이용하여 이미지 크롭 인터페이스의 도구로서 사용됩니다

캡쳐 프로그램과 유사하게 구현되겠네요.







Cookie Utility
  좋은 유틸리티 입니다. 개발자들이 모두 알고 있지만 한 도메인당 쿠키 공간은 제한이 되어있습니다. 그 사이즈가 오버될 경우 쿠키는 온데간데 없이 사라져 버리거나 오작동을 유발하는데요.
이에 착안해 Nicholas C.Zakas씨가 만들었다고 하네요.
  심플하면서도 파워풀하게 트리 구조의 쿠키 관리를 하여 제한된 쿠키 공간을 효율적으로 사용할 수 있도록 메니지 먼트를 합니다.


ProfilerViewer Control
 
사용자 삽입 이미지

  보기만 해도 궁금해지네요.  기존 Profiler 보다 더욱 비쥬얼해진 ProfilerViewer Control 은 기존 Profiler에 Charts Control 과 DataTable Control 을 함께 잘 조합하여 FireBug's와 같은 통합 프로파일링 인터페이스르 툴을 추가적으로 개발을 위해서 만들었습니다.    이걸 보고 CBD 방법론이 강력함을 느낍니다.


Slider Control with Dual Thumb Support

사용자 삽입 이미지
Slider 의 좀더 강력한 기능이 추가되었습니다.
좌측 이미지만 보아도 감이 오시죠?




이번 YUI 2.5의 릴리즈는 많이 새롭습니다.  이번 릴리즈를 통해서 생성된 실용적인 컴포넌트들에 "짝짝짝' 박수를 보냅니다.

원  문 : http://yuiblog.com/blog/2008/02/20/yui-250-released/
신고

'JavaScript > Study-YUI' 카테고리의 다른 글

야후! YUI 2.5 released  (6) 2008.02.21
YAHOO UI 2.4.0 - core 분석 발표자료.  (0) 2008.01.22
YUI Library: The YAHOO Global Object  (2) 2008.01.12
Posted by Rhio.kim
사용자 삽입 이미지
ALC 에서 YUI를 스터디할 멤버를 모집합니다.
현재 스터디는 진행 중입니다.
cafe : http://cafe.naver.com/requirements.cafe


스터디 라이브러리

사용자 삽입 이미지

+ YUI 2.4.0


스터디 방향
  + YUI를 기능 중심으로 분석
  + 개인별로 분석할 소스 코드를 분담하고, 샘플 코드를 작성하여 이를 발표 및 설명

신청자격
  + (X)HTML, DOM, CSS, JAVASCRIPT를 포함하여 전산 개발 경력 4년차 이상이신 분
  + 매주 토요일 4시간 참석 가능한 분

모집인원
  + 3명
  + 신청하신 자료를 보고 제 나름대로의 기준으로 선발하겠습니다.
    ( 선발이 안되더라도 넓은 이해를 부탁드립니다. 여기서 "제" 는 리오가 아닙니다.
      "Ajax Prototype.js 완전정복" 저자인 김영보님 이세요. )

신청기간
  + 2008년 2월 28일까지

신청 방법 및 기재 사항
  + 이벤트에게 메일로 신청 :
tonextday골뱅이gmail.com
  + 성명, IT경력, 핸드폰 번호, 사용가능 언어

진행 방법
  + 리더 : 이벤트
  + 매주 토요일 4시간 이상 오프라인 미팅을 통한 스터디
  + 2주에 한 시간씩 스터디한 내용을 발표 (시간은 준비 자료에 따라 1시간 미만 그 이상 자율적입니다.)

스터디 기간 및 장소
  + YUI 전 모듈 스터디를 완료할 때까지
  + 장소 : 맴버분의 회사에 공간이 있어 그곳을 사용합니다.( 오목교역 행복한 세상 백화점 13층)
    
http://www.dial070.co.kr/company/serome_info_5.html?submenu=05 

회비
  + YUI 및 DOM, javascript, CSS, (X)HTML 에 연구에 대한 열정

 

기타:

우리 스터디는 의무감이 매우 강합니다. 하시려는 분은 단단한 각오를 하셔야 합니다.

중도에 그만 두시려면 신청을 삼가해 주세요. 참여한 다른 사람들에게 피해를 주게 됩니다.



사용자 삽입 이미지
리오의 한마디 : 많은 분들이 신청하셨으면 좋겠습니다.
사실 YUI 가 국내에서는 그렇게 크게 알려지지 않았고 다른 오픈 프레임웍이 많이 나와있고
공부할 수 있는 라이브러리들이 상당히 많습니다.

사용자 삽입 이미지
하지만 현재 나와있는 프레임웍으로는 가장 안정적이고 기술적으로 인정하고 싶습니다.
(베타가 많지만 ^^;;)  알고 있는 Prototype, jQuery, Dojo 등등의 다양한 프레임웍이 있지만 YUI는 대형 포털(Yahoo.com)에 적용되어 검증된 기술들입니다.

사용자 삽입 이미지
YUI를 사용하기 위한 스터디 일 수 있지만 개발자들이 거기에서 멈추지 않죠.
내부적인 구조적 설계 부분 javascript UI 개발을 위한 CBD, TDD 개발 방법론을 직접적으로 제시해 주고 있습니다

또한 프레임웍의 설계적, 기술적, 보안적인 부분을 면밀히 살펴보고 공유할 수 있는 자리가 될것입니다.

사용자 삽입 이미지
그리고 현재 나와있는 프레임웍 중에 Description 이 가장 잘 되어있습니다.
이로 javascript 의 겉모습 뿐만 아니라 코드에 대한 이해도를 높혀 상당히 빠르게 습득할 수 있습니다.


꼭 Yahoo!! 개발 관련자 같이 말했군요... 
신고
Posted by Rhio.kim
사용자 삽입 이미지

YUI2.4.0 - Yahoo User Interface 분석 자료입니다.
yahoo.js 에 들어있는 global object 에 대한 내용을 다루고 있습니다.

번역에 있어 다소 오류가 있을 수 있습니다.
정확한 정보는 developer.yahoo.com 에서 확인하시기 바랍니다.

pdf :



신고

'JavaScript > Study-YUI' 카테고리의 다른 글

야후! YUI 2.5 released  (6) 2008.02.21
YAHOO UI 2.4.0 - core 분석 발표자료.  (0) 2008.01.22
YUI Library: The YAHOO Global Object  (2) 2008.01.12
Posted by Rhio.kim
PBwiki 팀의 Brian Klug 씨는 자바스크립트(javascript) 라이브러리 제공에 대해 좀더 자세히 배우기 위해서

자바스크립트(javascript) 라이브러리 테스트를 Dojo, jQuery, Prototype, YUI, Prototculous 를 로딩해서 만들었네요. 

azki 님이 이런쪽에 관심이 많을것 같은데요?? 그런가요?? ^-^

이 테스트는 압축(packed)과 최소화(minified), gzip 과 gzip 하지 않았을때, 캐시 기타 등등 테스트에

속해있습니다.   흥미로운 결과중에 하나가.. 압축(packed)를 사용하지 말라는 것입니다.. ^^;;

테스트 써머리 페이지 http://jst.pbwiki.com/summary.php

사용자 삽입 이미지

Result Calculus (cached, gzipped, minified)
사용자 삽입 이미지

신고
Posted by Rhio.kim
YUI, YAHOO USER INTERFACE 세미나 자료
Simple Use Case: YAHOO Object

사용자 삽입 이미지

가장 심플리티한 사용!! YAHOO 글로벌 오브젝트를 사용하기 위해서 어떤 액션도 필요 하지 않습니다.

YUI 의 YAHOO 오브젝트 라이브러리는 모든 구성요소들에 실용적인 메서드들의 컨테이너와 프로바이더 역활을 한다..






Type-Checking Your Data

타입체크를 위한 YAHOO.lang 오브젝트 Yahoo Global Object 에 포함되어 있으며 여러가지 유용한 타입체크 메서드를 제공합니다.

isArray
  : 제공된 오브젝트가 Array 인지 체크, array 이면 true 아니면 false 를 반환한다.
isBoolean
  : 제공된 오브젝트가 Boolean 인지 체크, boolean 이면 true 아니면 false 를 반환한다.
isFunction
  : 제공된 오브젝트가 Function 인지 체크, function 이면 true 아니면 false 를 반환한다.
isNull
  : 제공된 오브젝트가 Null 인지 체크, null 이면 true 아니면 false 를 반환한다.
isNumber
  : 제공된 오브젝트가 Number 인지 체크, number 이면 true 아니면 false 를 반환한다.
isObject
  : 제공된 오브젝트가 Object 인지 체크, object 이면 true 아니면 false 를 반환한다.
isString
  : 제공된 오브젝트가 String 인지 체크, string 이면 true 아니면 false 를 반환한다.
isUndefined
  : 제공된 오브젝트가 Undefined 인지 체크, undefined 이면 true 아니면 false 를 반환한다.
isValue
  : 꾀 편리한 메서드 입니다. null/undefined/NaN 의 경우에는 false를 그외의 것들은 true를 반환합니다.
    0과 false 그리고 ''(공백) 도 true를 반환합니다.

User Agent Detection

YAHOO.env.ua 오브젝트 Yahoo Global Object 에 포함되어 있으며 다양한 브라우저를 구분하는 도구로 쓰입니다. 
우리는 다양한 브라우저에서 어느 브라우저에서는 지원되지만 어느 브라우저에서는 지원되지 않거나 합니다. 하지만 크로스 브라우징을 위해서 모든 브라우저에서 지원되도록 만들어야 합니다.
이때 브라우저 스니핑은 부정확한 합니다.  브라우저의 환경과는 많은 것들이 연관됩니다.
그동안 나온 많은 기술들을 매우 정확합니다. 하지만 100% 보장하지는 않습니다.

YAHOO.env.ua.gecko : FireFox 버젼 정보를 반환한다. 아니면 int(0) 을 반환
YAHOO.env.ua.ie : IE이면 버젼 정보를 반환한다. 아니면 int(0) 을 반환
YAHOO.env.ua.opera : Opera 이면 버젼 정보를 반환한다. 아니면 int(0)을 반환
YAHOO.env.ua.webkit : Apple Webkit 이면 버젼 정보를 반환한다. 아니면 int(0)을 반환
YAHOO.env.ua.mobile : 아직은 제한적으로 Webkit 기반 브라우저와 Opera Mini 를 사용하는 Safari, iPhone/iPod tuch, Nokia N-series 들만 지원


Creating Class Hierarchies with YAHOO.lang.extend

자 바스크립트(javascript)는 계층적 클래스(class) 개념을 제공합니다. 다른 객체지향 언어들처럼 슈퍼클래스(super class)의 기능적 오버라이드(overrid) 추가(extend)가 가능한 클래스(class)를 만들 수 있습니다.

Creating a Composition-Based Class Structure Using YAHOO.lang.augmentProto

YAHOO.argument 와 매우 유사한 메서드입니다. argumentProto는 배경지식을 위해서 argumentProto 의 히스토리를 보고 구문을 위해서 한번쯤 보기를 권장합니다.
사용자 삽입 이미지

composition 은 상속의 개념이 아닙니다.
왼쪽 이미지를 통해 설명 합니다.

만약 Foo가 클래스 계층의 일부분이다면 상속 사슬에서 EventProvider를 포함하는 것은 부적당하게 되므로 근본적으로 두 가지는(Foo 와 EventProvider) 다릅니다.

확장된 클래스와는 다릅니다.

argumentProto의 의도는 컴포지션 스타일(Composition-style) 클래스 체계를 고려하고 많은 클래스들에 의해 공유되는 중요하지 않는 습성또는 성질을 뽑아내는데 도움을 줍니다.


이것은 다중상속과 매우 유사해 보일지 모릅니다. 하지만 그렇지 않습니다. argumentProto는 단지 어떤 클래스의 프로토타입에 또 다른 하나의 프로토타입까지 public 메서드와 멤버를 추가합니다.

이것은 Prototypejs 의 Object.extend 와 똑같은 기능을 말합니다. dest class에 source class 의 property 를 copy하는 기능입니다.

이런 경우 a class instanceof b class 의 경우 false 로 나오겠죠? 

Prototype.js Framework 에 익숙해져서 argumentProto 라는 네이밍이 왠지 어색합니다.
Object.extend 가 왠지 직접적이고 어떤 기능을 한다라고 느끼기에 참 좋은것 같습니다.


Add Behavior to Objects or Static Classes with YAHOO.lang.augmentObject

YAHOO.lang.argumentObject 는 YAHOO.lang.argumentProto 와 매우 유사합니다. 실제로 argumentProto는 내부적으로 argumentObject를 사용하고 있습니다.  그러나 클래스의 정의(즉 펑션 프로토타입)에 기능적 추가 보다는 오히려 argumentObject는 오브젝트 literals 과 클래스 인스턴를 포함한 어떤 오브젝트와도 동작할 수 있습니다.

여러분의 코드 구조 관리를 돕기 위한 다른 기술들을 위해서  argumentProto와 extned를 보세요.


Combining Simple Data Sets with YAHOO.lang.merge

YAHOO.lang.merge 는 data object 를 단일 셋으로 만드는 역활을 합니다.
Prototype.js 의 hash.merge 와 동일한 기능을 합니다. 중복되는 key 는 나중에 merge 되는 것들로
모드 replace 됩니다.



이렇게 YAHOO Global Object 에 대한 자료는 마칩니다. 예시는 YUI pdf cheat 에 모두 나와있고 또한
여러곳에 나와있기 때문에 따로 기재하지는 않습니다.

쓰임새에 대해서 알아보고 나중에 좀더 고급화된 활용법에 대해서 이야기할 기회가 있다면
그때 좀더 자세한 예시와 함께 포스팅하도록 하겠습니다.

첨부로 Class diagram 을 자료로 첨부합니다. 
다운로드 :
신고

'JavaScript > Study-YUI' 카테고리의 다른 글

야후! YUI 2.5 released  (6) 2008.02.21
YAHOO UI 2.4.0 - core 분석 발표자료.  (0) 2008.01.22
YUI Library: The YAHOO Global Object  (2) 2008.01.12
Posted by Rhio.kim
사용자 삽입 이미지
Ajaxian 의 2007 Ajax tool 투표 결과입니다.

올 한해 다양한 Javascript Library 들이 출시 되고 출시되었던 라이브러리들도 기능 강화와 OOP 개발이 가능하도록 라이브러리화 되었습니다.

Prototype 의 강세는 여전하네요..
다만 jQuery가 그 뒤를 바로 뒤쫓아오네요..

Ext JS 가 3위에 등극했다는 것은 상당히 !!

외국에서는 그리드 형식의 Ajax 어플리케이션을 선호하나봅니다.

웹 상에서 구현하기 힘든 그리드 형식의 어플리케이션 개발이 한결 수월해졌기 때문인데요.

아마 웹 기반 CRM 같은 개발 혹은 관공서나 국가 기간같은 디자인적인 부분을 많이 신경 쓰지 않고 기능 위주의 인터페이스에서 아주 효율적인 어플리케이션 개발이 가능하다는 것이죠.

상당히 발전할 수 있어 보입니다.

Script.aculo.us 는 Prototype을 모태로 상당히 많은 유저층을 이루고 있습니다.  둘이 함께 이용한다면...
60% 정도를 장악하고 있네요.  하지만 이제 jQuery와 interfaceElement 까지 나와서 내년 2008년은 어떻게 바뀔지 모르겠네요...

내년은 아무래도 더 많은 javascript library가 발표 되리라 예상됩니다.

또한 UI 라이브러리인 Mootools와 Yahoo 인터페이스에 최적화 되어있는 YUI 아주 많이 사용하고 있네요..
Mootools 는 깔끔한 UI 처리가 가능하고 Effect 별 모듈러를 지원해 필요한 UI 모듈만 따로 모아 js 라이브러리 파일을 생성해서 사용할 수 있습니다.

YUI는 야후의 javascript 아키텍쳐인 douglas crockford 씨의 개발 설계가 숨어있고 Yahoo라는 대형 서비스에서 검증된 실로 Prototype 못지않게 공부해 볼만한 UI 라이브러리라 생각되어집니다.

하지만 단점이라면 Yahoo에 최적화된 라이브러리이고 국내 정서에 자신의 사이트에 Yahoo라는 라이브러리를
써야한다는 자존심 괘난 자존심도 생기게 되구요.!!   다른 이유도 많이 있겠죠...

마지막으로 여전히 자체 개발한 Ajax Tool을 사용한다는 것..
어쩌면 내년에는 더 많아질지 모르겠다는 생각이 입니다.

사실 그랬으면 좋겠습니다.
좀더 많은 소스타입의 다양한 형태의 라이브러리가 많이 출시 되었으면 좋겠습니다.
신고
Posted by Rhio.kim