Rhio.Kim's Blog - drawing Laputa Web -

JavaScript/Ajax News | Posted by Rhio.kim 2008/07/01 14:27

Ajax/Rich UI 개발 방법론 - Design by Design Pattern


Design by Design Pattern정의

Design_by_design_pattern.pdf

모티브 :
HTML 디자인을 개발자에 의해서 동적으로 생성되도록 처리하려면 개발자에 의해서 디자인을 javascript의 정해진 변수에 넣고 프로세서에 맞춰 필요한 디자인을 Document에 렌더링을 해야합니다.  유지보수 시 디자인적인 추가 요소가 발생할 경우 개발자가 디자인을 수정하거나 편집해야 하는 일이 발생한다.

목적 및 장점 :
1.    HTML로 구성되어진 레이아웃을 ( HTML 파일 자체를) 개발자에 의해서 추가되거나 수정되지 않는데 목적을 둡니다.  즉 디자인과 개발의 완벽한 분리를 꾀하는데 목적을 둠
2.    유지보수에 있어 디자인과 개발의 업무량을 최소화 하기 위함
3.    초기 접속 시 불필요한 동적 렌더링을 피할 수 있다.

조건 :
1.    디자인 시 거의 모든 부분이 Div 구조로 디자인 되어야 한다.  Table과 같이 다른 특성을 가지고 있는 영역끼리 하나의 Layout으로 연관되어 질 경우 개발자에 의해서 처리되는 로직이 매우 복잡해진다.
2.    디자인 시 특징이 다른 Div Element에는 유니크 한 ID를 부여할 수 있어야 한다.
3.    개발자가 ID를 부여할 경우에 개발 설계에 의한 최소한의 ID만 부여해야 한다.
4.    부분적으로 Table 을 사용해야 할 경우 개발자의 협의가 필요할 수도 있다.


제약 :
1.    개발자뿐만 아니라 디자이너도 DOM 에 대한 기술적 이해가 필요하다.

단점 :
1.    HTML의 구조가 변경되면 구조에 맞게 javascript개발 부분도 변경되어야 한다.
즉 HTML 버전관리와 Javascript 버전관리가 함께 이뤄져야 합니다.
2.    페이지 접속 시 디자인 레이아웃의 흐트러짐 현상이 있을 수 있다.


좀더 자세한 패턴에 대한 설명은 PDF 문서에 담았습니다.

이 내용은Ajax/Rich UI의 특정한 개발을 위한 방법론에 가깝다고 봐도 무방합니다.  또한 개인적인 경험에 의한 정리이며 일반적인 시스템 설계에서 말하는 패턴의 정의와는 상이하거나 다른 의미를 갖을 수 있습니다.

'JavaScript/Ajax News' 카테고리의 다른 글

Ajax/Rich UI 개발 방법론 - CRUD Pattern  (6) 2008/08/19
Ajax 개발 시 HTML Design  (0) 2008/08/18
Ajax/Rich UI 개발 방법론 - Design by Design Pattern  (10) 2008/07/01
Aptana Jaxer Talk  (0) 2008/02/19
크로스 도메인 Ajax in FireFox 3  (0) 2008/01/11
High Performance Ajax Applications ( 고성능 에이잭스 어플리케이션 )  (0) 2008/01/01
TAGAjax, Design by design, JavaScript, 자바스크립트, 패턴
Trackback 0 Comment 10
JavaScript | Posted by Rhio.kim 2008/06/20 20:52

Javascript Optional pattern(pre-configured Pattern) 옵셔널 패턴

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에 대한 이해만 있다면 값의 설정을 통해서 쉽게 원하는 결과물을 얻을 수 있다.


'JavaScript' 카테고리의 다른 글

JavaScript 패턴 - Flyweight Pattern  (0) 2008/09/18
Unobtrusive JavaScript 에 대한 고찰  (0) 2008/08/31
Javascript Optional pattern(pre-configured Pattern) 옵셔널 패턴  (3) 2008/06/20
Prorotype in javascript (ECMAS 262-2 spec)  (7) 2008/04/29
Ajax 개발 시 자주 발생하는 순환참조 메모리 테스트 결과  (2) 2008/04/15
Class-Based vs Prototype-Based Languages  (0) 2008/04/12
TAGJavaScript, OOP, Pattern, 자바스크립트, 패턴
Trackback 0 Comment 3
JavaScript | Posted by Rhio.kim 2007/12/24 01:28

javascript singleton(자바스크립트 싱글 패턴) story

자바스크립트 싱글 패턴 스토리 - 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__ 값을 계속해서 반환하게 됩니다.

이렇게 싱클 패턴의 조건을 만족하게 됩니다.

'JavaScript' 카테고리의 다른 글

javascript Alert 과 Confirm 을 하나로 ^-^/  (0) 2007/12/28
Javascript 패키지 개발을 위한 base2.Packages  (0) 2007/12/25
javascript singleton(자바스크립트 싱글 패턴) story  (0) 2007/12/24
Ajax Anti Pattern! 퍼포먼스 향상  (2) 2007/12/18
DOM innerHTML 이 갖는 문제점?!!  (2) 2007/12/15
Javascript 클래스 인스턴스 - OOP 다지기  (0) 2007/12/09
TAGDESIGN, JavaScript, OOP, Pattern, Singleton, 싱글톤, 자바스크립트, 패턴
Trackback 0 Comment 0