들으면 들을수록 중독되는 so Hot!
원더걸스
             이미지 출처 : 고뉴스

과연 음악이 어떻게 만들어 졌을까요?  이런 곡에서도 어떤 객체지향이라는 느낌을 받게 하네요.
실 세계의 사물을 단순화해 놓은 객체들의 유기적인 조합은 so Hot이라는 음악과 같이 한 시대를 풍미하는 좋은 문화로 자리 남고 IT세계에서는 서비스나 좋은 소프트웨어로 남을 수 있다라는 생각을 해봅니다.  또한 후배들에게 물려줄 좋은 자산이 되리라 생각해봅니다.

박진영 대표는 객체지향 음악을 설계하는 패턴과 제작과정에 대한 상세한 설명을 알려주었습니다.

원더걸스의 이전 앨범의 텔미는  반주를 오브젝트를 먼저 만들고 거기에 멜로디라는 오브젝트는 붙인 경우이고 이번 앨범의 so Hot 은 멜로디를 먼저 만들고 반주를 붙이는 패턴을 적용하였다고 합니다.

1.    Kick (loop)구성 - drum
2.    Clap 구성

3.    Hihat 구성
4.    Percussion 구성

5.    Main synth – 기본 테마
6.    Base 구성

7.    Lead 구성

이렇게 7가지의 단계를 통하여 so Hot이라는 곡이 탄생하게 되었네요.  거기에 비쥬얼한 원더걸스라는 UI가 씌워졌고 테스트와 연습을 거쳐 최고의 음악으로 음악 방송을 통해 많은 팬들에게 서비스하게 되었습니다.



신고
Posted by Rhio.kim
Javascript Optional pattern

디자인 패턴에 이미 있나? 패턴에 대한 심도 있는 연구를 해본 적이 없지만 javascript 개발을 하다 보니 자주 사용하게 되는 패턴이라 정리해봅니다.  (이미 GoF 나 POSA 에 일부분에 적용되어져 있을 수도 있습니다.)

간단하면서 이미 많은 개발자들이 이런 방식으로 개발하고 있을지 모른다고 생각한다.  외국 라이브러리 역시 이런 방식으로 개발된 라이브러리가 꾀나 있다. 거론하자니 생각이 나지 않네요. Javascript Lib 카테고리 가면 몇몇 링크가 있는데 그들 중에도 있었다.

의도 :
  하나의 클래스를 통하여 다양한 표현할 수 있다.

동기 :
  컴포넌트, 위젯 형태의 개발에 좀더 사용자 설정을 강화하여 다양한 형태의 결과를 표현하고 싶을 때, 이로 개발된 산물은 pre-config 에 대한 이해를 통해 디자이너도 쉽게 접근할 수 있도록 해보자.

sample code


위 소스에서도 알 수 있듯이 사용자는 Hash형 Object 타입으로서 pre-config를 설정하여 해당 클래스가 new 키워드로 인스턴스화 되어질 때 해당 객체의 초기 설정값에 의해 동작한거나 config의 설정된 Option을 참고하여 객체가 동작되게 됩니다.

foo 클래스는 new 키워드에 의해 인스턴스화 될때 options 이라는 파라미터를 받아서 내부의 설정값으로 동작하게 됩니다.  컴포넌트의 Positioning, Sizing, Target Element 등을 생성할때 마다 다른 형태의 결과물을 볼 수 있습니다.

간단하게 생성한 객체들의 getXY 메서드를 수행했을 때 다른 결과 즉
Foo1 의 x, y 포지션은 생성시 아무런 파라미터도 주지 않았기 때문에 [100, 200]이 출력되었고
Foo2 의 x, y 포지션은 생성시 Hash 형태의 Object에 { x:300, y:300 } 을 넘겼기 때문에 생성시 넘겼던 옵션값을 그대로 취하게 됩니다.

이는 위젯 방식의 컴포넌트 개발 시에 매우 유용하며 javascript를 이용한 Rich UI, Application 개발 시 기획에 의도를 다양하게(?) 받아들일 수 있다.

또한 디자이너나 개발자들도 pre-config에 대한 이해만 있다면 값의 설정을 통해서 쉽게 원하는 결과물을 얻을 수 있다.


신고
Posted by Rhio.kim

Dean Edwards 씨는 base2 beta를 발표 하였습니다.

패키지 구성은 base2 를 통하여 이용되어지며 구성요소와 네임스페이스는 스스로 관리됩니다.

패키지 생성을 위한 템플릿은 아래와 같습니다.




그리고 생성한 패키지를 사용한 예시


base2.MyPackage 네임스페이스는 eval(this.exports) 에 의해서 초기화 되어집니다.
위에서 처럼 클로져의 마지막 끝부분에서 호출하므로써 지속적인 패키지 오브젝트를 만들어야만 합니다.


네임스페이스 속성을 eval시켜 scope 내의 정의된 Package 속성들을 접근을 획득할 수 있게 됩니다.



사용한 예시




상당히 인상적인 것 같습니다. 기존에 보지 못한 스타일의 코딩인데요...

야후의 YUI  같은 구조의 설계 기법이 아닐가 싶은데요.
야후도 패키지 구조도 보면 YAHOO.dom.???  이런식인데요. 괜찮은 것 같습니다.

직관적인 네임스페이스와 패키지 구조를 갖을 수 있는 프레임웍 개발이 가능해 지겠네요.!!
신고
Posted by Rhio.kim
자바스크립트 싱글 패턴 스토리 - I

사용자 삽입 이미지
여담 :
   참으로 싱글이 더욱 추워지는 날씨 입니다.
   내일은 싱글은 정말 속상한 하루 입니다.

   하지만 둘 일때 느끼는 추위는 싱글이 느끼는 추위보다
   더욱 춥습니다.


   그리고 더 추운 사람들은 둘이 할 수 없는
  사람들입니다.

  그런 사람들을 위해 따뜻한 손길을 뻗을 수 있는
  연말이 되었으면 합니다.




자바스크립트에서도 다양한 디자인 패턴이 가능합니다.
GoF 패턴 POSA 패턴 등 말이죠..

아마 UI 개발자 분들 중 javascript 를 이용하시는 분들은 대부분 패턴을 적용하신지 모른체 사용하고 계실꺼에요.  저도 Java 디자인 패턴 교육을 10일 동안(?) 참여했었는데요.  그 교육의 모든 예제가  Java 였습니다.  대형 프로젝트는 대부분 Java로 하니깐요..

또한 설계의 중요함을 포함해야 하는 언어이기도 하니깐요..
교육 중 다양한 패턴을 javascript 포팅을 해봤습니다. 큰 어려움은 없었습니다.






자자 서론이 길어졌습니다. 본론으로 들어가겠습니다.



위의 예제는 간단한 클래스 입니다.  foo() 를 new Operator를 통해서 foo()를 참조하는 인스턴스를
생성하였습니다.

bar와 zoo 의 constructor 는 같습니다.

하지만 인스턴스는 서로 다른 인스턴스를 같습니다.



위의 소스를 실행하보면 간단하게 알 수 있습니다.
당연히 다른 결과가 찍힐꺼라 생각됩니다.  여기서 잠시 삼천포로 빠지겠습니다.

저는 여러 예제를 봤습니다. 디자인 패턴 -> 싱글톤 도대체 이런것이 무슨 의미를 갖고 의미는 알 지언정
언제 적용해야하는 걸까? 적용해서 어떤 이점이 있을까?
또한 어떤 이점이 있고 언제 적용해야한다. ...  뭐 다양한 언어에 대해서 좋은 예시와 개념들이
많은 사이트에서 제공되고 있습니다.

하지만 몰랐습니다.  패턴이란걸 언제 쓰고 어디다 쓰고 해야하는 지!!

객체 지향에 대한 개념이 없었다는 것이었죠..  하지만 봐웠던게 도움이 많이 되었던것 같습니다.
개념을 정리하는 것이 단지 남의 예제와 예시를 보고 이해하는게 아닌 자기것으로 만드는 것
남앞에 "싱글 패턴"이 무엇이다 라고 사전적인 개념이 아닌 사전적 예시가 아닌 실제로
코드로 보여줄 수 있는 ... 역시 삼천포로 빠지는건 정리가 안됩니다...

결론은 한번 봐 놓으면 언젠간 도움이 됩니다.  아키텍쳐로 가는 것에 매우 도움이 될 것입니다.

결과는 수행해 보셨나요?

자 그러면 이해가 되지 않더라도 왜 이 글을 보고 있는지도 모르고 싱글 패턴이 먼지도 모르고 도대체
뭘 하려는 글인지 알지도 못할 지언정 "싱글 패턴이 무엇인가?" 라는 것만 꼭 올고 싶다면 위의 소스를 수행해보고 지금 이 소스를 수행해 보세요.



수행해 보셨어요?  결과는 처음 예제와는 조금 틀린 결과가 나왔네요.
당연히 new Operator 를 사용하지 않았기 때문 아니냐 라는 반문을 한다면 !!

여기서 잠깐 GoF에 나오는 싱글 패턴에 대한 소개!!
1. 접근하는 인스턴스는 오직 하나란 것이 보장이 되는 방법을 제시 해야 하며
2. 이렇게 유일한 인스턴스에 접근 할 수 있는 방법을 제공하여야 한다.

2번을 통해서 유일한 인스턴스를 제공하기 위해서 방법을 제공하였습니다.

또 하나.. 하지만 다른 누군가는 이것을 사용할때 new Operator 를 사용하면 어떻게 되느냐?
그러면 싱글 패턴이 깨지는 거 아니냐?

맞습니다. 

그렇다면 new Operator가 수행될 때 foo() 내에서 생성자를 통한 인스턴스 생성인지
아니면 싱글 패턴을 위한 방법(getInstance)에 의한 생성인지를 체크해서 new Operator를 사용할 경우에는
예외 처리를 하거나 하나의 인스턴스만 생성해 주면 되겠네요.

이 부분은 다음 시간에 다루겠습니다.

이어서 위의 소스를 잠깐 설명을 드리면 유일한 인스턴스를 제공하기 위한 메서드를 통해서
하나의 인스턴스를 생성하기 위해 new Operator 로 접근하는게 아니라

foo.getInstance() 를 통해서 접근하였습니다.
이는 foo() 의 인스턴스화 되면서 __instance__ static vairable가 설정되고 이 variable에 자신의 인스턴스가
저장됩니다.

즉 한번 생성된 foo 의 인스턴스는 null이던 this.__instance__ 에 저장되며 getInstance로 접근하게 되면
저장된 __instance__ 값을 계속해서 반환하게 됩니다.

이렇게 싱클 패턴의 조건을 만족하게 됩니다.
신고
Posted by Rhio.kim
간단한 목표가 생겼습니다.

완벽한 OOP라고는 하지 않지만 웹 상에서 구현할 수 있는 가장 필요한 OOP라고 하겠습니다.
어느 이론이나 개념은 늘 발전하고 개혁될 수 있습니다.

1+1 = 2 라는 불변의 진리라 하겠지만 그 쓰임과 상황에 따라 충분히 달라질 수 있다는 것은
물방울 1개와 물방울 1개가 합쳐지면 큰 물방울 하나라는 이치와 같습니다.

Javascript 가 진정한 OOL이다 아니라가 아니라.
다른 어떤 언어들과 비교했을 때 OOL라 하기엔 Javascript의 OOL을 다소 부족하거나 개념이 틀린 부분이
충분히 있을 수 있습니다.

하지만 흔히 말하는 OO에 아무런 지장없이 잘 활용할 수 있다 라는 것을 증명해 보고 싶습니다.

1. Class

이전 클래스 생성에 대해서도 이야기를 했었지만.. 이번에는 간단하게 좀더 고급스럽게 Class를 구현을 해보도록 하겠습니다.

위의 소스는 매우 간단한 예제입니다. 그냥 얼핏 보기에는 단지 클래스라기 보다는 Foo라는 함수(function)에 가까워보입니다.

하지만 자세히 보면 this.name 이라는 맴버 property를 갖는 것을 알 수 있습니다.



이렇게 new Operator을 통해서 맴버 property에 접근하거나 맴버 method를 호출합니다.
foo는 Foo의 인스턴스로 foo와 function Foo()의 내부의 this가 같는 constructor 는 같아 foo.name 이나
this.name 은 같습니다.

이는 맴버를 접근 방식이 외부의 접근이냐 내부의 접근이냐에 따라서 foo나 this로 바뀝니다.

하지만 이를 함수(function)로 오인하게 되면 결과는 예상밖의 결과가 나올 수 있습니다.



이거 하나 가지고 뭐가 얼마나 문제가 될까도 싶지만 커뮤니케이션을 잘 하지 않는 개발자들 간에
이거 하나를 문서화하는 개발자도 없고 말그대로 커뮤니케이션 하는 일도 없습니다.
있다 하더라도 나중에 개발시 사용하게 되면 그때 소스를 한번 들여다 보게 될것입니다.

아니면 새롭게 자신이 기능을 추가하겠죠.

이럴때는 분명 문제가 됩니다. ^-^ 사소한거라 생각하지 마세요..

위의 문제를 모두 해결할 수 있는 코드를 만든다면 어떻게 될까요??



이렇게 하면 무조건 인스턴스를 생성하겠네요.

instanceof 연산자는 아시겠지만.

object instanceof class 하게 되면 object 가 class 의 인스턴스인지를 boolean 값으로 반환해 줍니다.
위를 예로 든다면

if( this instanceof Foo )
Foo를 function 기능으로 접근했다면 this 는 window가 됩니다.
하지만
new Foo() 를 통해서 접근했다면 this는 Foo의 인스턴스입니다.



사실 이렇게까지 해야되는 것은 예외처리에 해당하거나 아주 자주 사용하거나 접근하게 되는 함수나 클래스에
해당합니다.


자 위에서 본 내용을 바탕으로 간단한 클래스를 만들어 보겠습니다.
Prototype.js 에 있는 Class오브젝트의 creat 메서드를 다른 방식으로 함수를 만들어 보겠습니다.



하게 되면 new Operator 을 통해서 인스턴스를 생성하나 그냥 함수처름 호출을 해서 사용하나 클래스의 인스턴스가 생성되게 됩니다.
신고
Posted by Rhio.kim
ECMA Script 4 에 구굴 Waldemar Horwat 와 Pascal-Louis Perez 의  프리젠테이션 영상입니다.
이 영상을 보고 느낀점이 있습니다.  저 정도의 요약된 프리젠테이션이라면 국내에 내놓으라한 개발자들
1주일 정도 회사일 하면서 준비할 수 있는 분량의 프리젠테이션 내용입니다.

구굴을 개발자 커뮤니티가 정말 잘되어 있는것 같습니다.
국내 NHN, Yahoo korea 등 큰 기업에서는 내부적으로 이와 비슷한 스터디 프리젠테이션을 하는 것으로
알고 있습니다.

국내의 고급 소프트웨어 개발자의 인력은 쉽게 많들어 지지는 않습니다.
변화에 빠르게 적응할 수 있는 개발자들간의 커뮤니케이션이 정말 중요하다는 생각이 듭니다.



구글에서도 ECMAScript 4의 가장 큰 변화(기능)은 진정한 OOP 라는 점을 강조하고 있네요.
Class, Interfaces, namespaces, packages, program units 등등

영상속에 숨어있는 간혹 나오는 예제 소스도 관심있게 보세요..
비록 소스가 보이지는 않지만 -_-;;
신고
Posted by Rhio.kim
사용자 삽입 이미지

javascript oop - class diagram


Javascript OOP 개발을 해오면서 과연 이 것이 OOP 일까? 아닐까?
라는 생각을 많이 했습니다.

OOP like 에서 OOP로 많이 탈바뀜 해가는 것은 확실합니다.
사실 부족한 부분도 많이 있을 것입니다.

위의 다이어 그램은 여러번의 시행착오로 javascript OOP 개발을 위해서 가장 효율적은 소스관리
OOP 개발방법, 유지보수의 간소화 등 다양한 목적을 담아서 도식화 하였습니다.

실제 MVC 개념도 포함되어 있습니다.

이는 Prototype.js 라는 오픈 프레임 워크 덕분에 실제로 OOP에 너무나도 가까운 개발을 할 수 있게
되었고 Prototype.js 가 아니였다면 위의 다이어그램에 있는 것을 포함한 다양한 클래스들이
더 많이 생성되어야 합니다.

Prototype.js 외에도 다양한 형태의 다양한 목적을 갖는 프레임워크들이 많이 있습니다.
Web2.0 방식의 개발방법을 채택하면서 웹 페이지가 아닌 실제 웹 어플리케이션을 제공할 수 있게 됩니다.

이에 javascript OOP 개발은 점점 더 절실해 집니다.

위의 다이어 그램을 간단히 설명하면.

최초 HTML document 가 요청되고 onload 가 되면 Controller 이 작동합니다.
새로운 인스턴스에 controller 가 생성되고 (이하 컨트롤러) 컨트롤러는 실제 어플리케이션을 구동시키기 위한

초기화를 담당하는  (TInitialize)에 의해서 Web Application을 구동하기 위한 준비를 합니다.

사용자 인터페이스 (TUserInterface), 사용자의 이벤트를 관리하는 이벤트 메니저 (TEventManager)가 있으며

사용자 이벤트가 발생하거나 실제로 UI에 서버의 데이터를 보여줄 UI에 뿌려주고 사용자의

이벤트가 발생하였을때 (TImplementation)는 그에 반응, 응답으로 결과를 표현한다.

이처럼 사용자의 이벤트를 캡쳐하고 그 이벤트에 해당하는 처리(서버 데이타 요청, UI의 변경, 사용자 요청에 응답) 를 대응합니다.

TModel은 각 모듈별 공동 사용 모듈을 캡슐화, 구체화, 확장하여 사용할 수 있도록 하여

확장을 통해 재 사용할 수 있고

마지막으로 TDestory에 의해서 생성된 인스턴스며 사용되지 않는 자원에 대한 리소스 반환자

역활을 담당합니다.

아시다시피 IE나 FF나 모든 브라우저에서는 리소스(이벤트, DOM오브젝트 등)관리를 소홀히 했다가는

메모리 누수에 헤어나올 수가 없어집니다.

좀더 좋은 내용을 포스팅 하고 싶었는데 아직 배워가는 상태라 부족함이 많습니다.

글 가운데 오탈자나 잘못된 내용이 있으면 알려주세요...
신고
Posted by Rhio.kim