Open your eyes

MessageChannel ①

(블랭커스) — Thu, 08 Jul 2010 21:27:41 +0900

백만년만에 포스팅을 해봅니다.
요즘 핫이슈인 HTML 5를 가지고요 ^^

HTML 5를 많은 이들이 화려환 UI를 주제로 이야기 하곤 하는데요, 저는 기술적인 부분에 포커싱을 해보려합니다.
그중에서 오늘은 MessageChannel에 대한 내용이고요, 예제를 통해서 하나씩 알아가보려고요~

채널메세징은 다대다 메세지 통신을 위한 아주 간단한 API입니다.
채널메세징을 알아보기전에 간단한 용어부터 알아볼까요?

1. 채널 : 송/수신을 위한 장치(객체)
2. 포트 : 채널이 송/수신을 하기위한 인터페이스

간단하죠? ^^ 위 내용을 코드로 표현해볼까요?

var ch = new MessageChannel();

이렇게 하면 메세징을 위한 채널이 생긴겁니다. 하지만 위에서 말한 포트(송/수신을 위한 인터페이스)는 어떻게
만들어야 할까요?

걱정하지 않으셔도 됩니다. ch.port1 과 같이 프로퍼티에 이미 포트가 내장되어 있습니다.

내장된 포트는 모두 2개로 (port1, port2) 송/수신을 할 수 있습니다.

어느 포트이던간에 송/수신을 담당할 수 있으며 port1이 송신을 담당하면 port2는 자연스레 수신을 담당합니다.

느낌이 오시죠? 별거 없습니다. 그럼 코드로 볼까요~?

<script>
function Test(){
var ch = new MessageChannel();
ch.port1.start();
ch.port2.start();

ch.port1.onmessage = function(msgEvt){
alert(msgEvt.data);
};

ch.port2.postMessage("hello world !!");
}
</script>

채널메세징의 가장 기본적인 모습입니다. 어때요? 쉽죠?

설명하자면...

채널(ch)을 하나 만들었어요.
그리고는 포트 두개(port1, port2)를 가동(start)시켰죠.
첫번재 포트(port1)에게는 메세지가 수신되었을때(onmessage) 처리할 함수를 지정했고,
두번째 포트(port2)에게는 메세지를 보내도록(postMessage) 처리했어요.

실행을 해볼까요?

var test = new Test();

예상대로 "hello world !!"가 잘 뜨죠?

참고로 MessageChannel 에대한 IDL을 추가했습니다.

[Constructor]
interface MessageChannel {
  readonly attribute MessagePort port1;
  readonly attribute MessagePort port2;
};

typedef sequence<MessagePort> MessagePortArray;

interface MessagePort {
  void postMessage(in any message, in optional MessagePortArray ports);
  void start();
  void close();

  // event handlers
           attribute Function onmessage;
};
MessagePort implements EventTarget;

오늘은 여기까지 하렵니다. 요즘 한창 재미있는 "로드넘버원"을 보러가야해서 ㅎㅎ

다음 포스팅은 오늘 포스팅한 내용보다 더 흥미진진한 것으로 하려고 합니다.

기대하셔도 좋습니다.

posted by blankus

미투데이 개설

(블랭커스) — Thu, 30 Jul 2009 00:27:43 +0900

미투데이를 개설했어요~ ^^*

요즘 회사일이 200% 바쁘기 때문에 포스팅을 전혀 못했는데요~

이제부터 또 맘을 잡고 열심히 해보려고 합니다.

http://me2day.net/blankus 으로 놀러오세요

[책소개] 바티스타 수술팀의 영광

(블랭커스) — Sat, 08 Mar 2008 11:31:31 +0900

이 책을 읽은 지는 좀 되었는데, 이제서야 포스팅을 하네요.. 역시 사람은 스스로를 단련하지 않으면 귀차니즘으로 변해가나 봅니다. ^^

오늘 소개해드릴 책은 제목과 같습니다.

가이도 다케루라는 분이 지으신 책인데, 현 일본 의사이기도 하고 소설가이기도 하답니다. 정말 대단한 것같습니다.

이책은 제4회 <이 미스테리가 대단하다!> 대상 수상 및 주간문춘 선정 <2006 걸작 미스터리 베스트 10> 3위에 입상했던 작품입니다.
쟁쟁한 현 소설가들을 모두 제치고 더욱이 신인 소설가 대상을 수상한 것이 모두를 깜짝 놀라게 했다고 합니다.
또 얼마전에는 영화로 만든다고 제작발표회도 있었군요. 기대가 됩니다.

내용을 아주 간략하게 소개하자면, 바티스타팀을 이끄는 아주 훌륭한 의사가 수술중 환자가 사망하는 케이스가 연달아 발생하여,
그 사건을 외과수술을 전혀 모르는 다른부서 의사가 조사관으로 참여 사건의 전모를 밝히는 내용입니다.
이렇게 보면 크게 재미있거나 하지 않을것 같지만... 사실 저도 조금 그랬습니다... 실제는 다릅니다.
혹시 의학드라마를 좋아하시거나 만화책 "의룡"을 좋아하신다면 꼭 추천해드리고 싶은 책입니다.

오늘은 날씨가 좋은 주말이군요 ^^ 행복한 주말되세요~

posted by blankus

Internet Explorer 8 무엇이 달라졌나 ②

(블랭커스) — Fri, 07 Mar 2008 18:34:04 +0900

오늘은 날씨가 좋군요 ^^

상쾌하기도 하고~ 제가 12층에서 근무하는데 전경이 좋습니다 ^^

Data URI Support : Windows Internet Explorer 8

오늘은 이걸 알아보도록 하겠습니다.

먼저 IE8의 랜더링 화면을 보려면 Tool메뉴 - Developer Tools - View - Change Compatibility - Mode에서
Standards(Internet Explorer 8)을 선택해야 합니다. ㅎㅎ 잠시 팁이였구요.

Data URI... 과연 이것은 무엇일까요? 다들 아시나요?? 저는 이야기만 들어봤을뿐 실제로 사용해 본 적은 없었습니다.

그래서 이기능이 IE에서 지원이 안되고 있었는지 조차 별 관심이 없었던거죠.. 화이트페이퍼를 보면서 "이거 원래 안되었었나?"라는 의문이 들었죠. 근데 원래 지원안했답니다. ^^

테스트를 해보니 FF 2, FF 3, Safari 3, Opera 9.x 에서는 다 지원되는군요... 역시 IE는 외톨이였나봅니다. ^^

잠시 딴대로 이야기가 샜었는데.. 왜 Data URI를 사용할까요? MS에서 제공한 화이트페이퍼에는 이렇게 정의하고 있습니다.

"css나 image와 같은 작은 외부 자원들를 웹페이지에 직접적으로 삽입할 수 있게 한다"라고 되어있습니다.

그럼 왜 직접 삽입해야할까요? 이유는 보안입니다. 즉 이미지나 css등의 경로를 웹페이지에 적어주는 방식(<img src="/xxx/xxx.jpg" />)은 URI가 노출되어 해당 서버의 디렉토리 구조를 노출하게 됩니다. 또한 css의 경우도 마찬가지겠지요. 그럼 여기서 의문이 생기죠... data URI를 사용하면 어느정도까지 보안을 강화해 주는걸까요?

제가 테스트 해본바로는
1. URI 숨김으로 인한 서버의 디렉토리 구조 감춤
2. 웹페이지에 직접 해당 리소스를 넣음으로서 http connection을 통해 이미지를 가져오는 일이 없음, 즉 이미지를 별도로 다운로드하지 않음.

2번에서 알수있듯이 이미지자체를 웹페이지에 넣다보니 웹페이지 사이즈가 커짐을 알 수 있습니다. 당연하겠죠?

아래 그림은 네이버 로고를 Data URI로 넣은 모습입니다.

아래의 그림은 Data URI와 <img>를 함께 사용한 것입니다.

위 그림 두개에서 자세히 보셔야 할부분은 FireBug의 화면중 Net이란 곳이구요... Net은 실제 웹상에서
데이터가 network를 통해 브라우져가 해당 리소스를 다운받았다는 것을 표시해줍니다.

1번의 그림의 경우 이미지 다운이 안된것으로 표시가 되었고, 2번의 경우 그림이 다운된 것으로 표시가 되었습니다.

MS에서는 Object / Img / Link / Css 엘리먼트만을 지원한다고 하는군요.

백문이불여일견... 테스트한 html을 첨부하니 다운받으셔서 직접 테스트 해보시는게 가장 좋을것 같습니다.

테스트 파일 :

data_uri.html

posted by blankus

Internet Explorer 8 무엇이 달라졌나 ①

(블랭커스) — Thu, 06 Mar 2008 11:59:48 +0900

오랜만에 포스팅을 하는 것 같습니다.

그동안 너무 방황하며 살았던것 같구요... 이제 따스한 봄(?)이 저멀리서 다가오고 있으니 마음도 추스리고

열심히 또 블로그질을 해야겠습니다.

그 시작으로 IE 8 beta 1이 선보였는데, 무엇이 어떻게 바뀌었는지를 알아보도록 하겠습니다.

1. Data URI Support
2. HTML Improvements and ACID2
3. Improved Namespace Support
4. DOM Core Improvements
5. CSS 2.1 Compliance
6. Selectors API
7. Circular-Memory-Leak Mitigration
8. Versioning and Cross-Document Interaction
9. Better AJAX development
10. Versioning and Internet Explorer Modes
11. Improved Protected-Mode API Support
12. Platform Performance Improvements

이 순서로 진행할 예정입니다.

posted by blankus

[자료] Cross Domain XHR W3C proposal

(블랭커스) — Tue, 08 Jan 2008 23:52:07 +0900

새해복 많이 받으세요 ^^

오랜만에 포스팅을 하는 것 같습니다. 이런 저런 일로 바쁘게 지내다 보니 한참을 잊고 있었네요..ㅎㅎ

오늘은 간만에 반가운 소식을 전해볼까 합니다. 이미 다들 알고 계실지도 모르겠지만..

Ajax의 XHR통신중 크로스 도메인이 상당히 불편해 하고 있는걸로 알고있습니다. 허나 W3C에서 이를 공식적으로 지원하기 위해
움직이고 있군요. http://www.w3.org/TR/access-control/ 이곳을 보시면 자세한 설명이 나와있으니, 참고하시면 되겠습니다.

허나 영어이기때문에.. 조금은 난해할 수 도 있지만, 저희는 글보다는 코드를 주로 보지 않습니까? ㅎㅎ

그럼 오늘은 이 기쁜(?)소식을 짧게 전하는 것으로 마치겠습니다.

posted by blankus

MessageBox v0.7.2 release

(블랭커스) — Thu, 13 Dec 2007 14:21:25 +0900

AjaxLab에 MessageBox v0.7.2가 릴리즈 되었습니다.

0.6버전에서 안되던 한개 이상의 창을 띄울 수 있고, DTD 적용시 에러나는 부분에 대해서도 수정이 되었습니다. 또한 몇가지 버그들도 수정되었고 보다 안정적인 구현을 위해 id-detect를 제외시켰습니다.

버전에서 알 수 있듯이 아직 1.0이 안되는 버전이기 때문에 구현해야 할 부분이 많이 남아있습니다. 보다 다양한 기능을 추가하고 싶지만 그에 따라 커질 용량도 걱정이 되는군요.

버그를 알려주신 azki님 감사합니다.

posted by blankus

여러분들은 JS에서의 OOP가 뭐라고 생각하십니까?

(블랭커스) — Wed, 12 Dec 2007 15:45:54 +0900

오늘은 제목에서 밝힌 것처럼 저러한 내용에 대해서 이야기 해보려합니다.

OOP! 이것은 무엇일까요? 그리고 자바와같은 언어에서의 OOP와 JS에서의 OOP는 어떻게 다른걸까요?

다들 아시다시피 OOP는 컴퓨터친화적이 아닌 인간친화적입니다. 즉, 개발의 방법의 주체를 컴퓨터에 맞추지 말고, 만드는 사람인 인간에게 맞춰 개발하자는 것이지요. 여러분은 한번쯤 이러한 고민을 해보시지 않으셨나요?
개념은 이러한데 과연 JS에서 OOP란 무엇인가...

그에 대한 여러분들의 의견을 듣고싶습니다.

posted by blankus

MessageBox for MooTools 1.11 init release

(블랭커스) — Wed, 12 Dec 2007 12:10:00 +0900

AjaxLab에 "MessageBox for MooTools" 가 초기 릴리즈가 되었습니다.

구현소스는 기존과 동일하며 내부에서 실행되는 Event와 Element 등의 메소드를 MooTools용으로 교체하여 배포되었습니다.
MooTools는 아시다 시피 각 모듈간 결합도가 낮기때문에 원하는 모듈만을 모아서 사용하는 것이 가능합니다.

이번에 초기 릴리즈된 "MessageBox for MooTools"는 MooTools 1.11 버전이 필요하며, 필수 포함 모듈은 Core, Class, Native, Element 입니다.

>>바로가기

posted by blankus

MessageBox 구현

(블랭커스) — Tue, 11 Dec 2007 13:49:11 +0900

어느덧 2007년의 12월도 1/3이 훌쩍 지나가버렸습니다.

여러분들은 2007년에 계획했던 것들을 모두 이루셨는지요, 많은 분들이 그러하듯이~ 저또한 일부 이룬것도 있고, 이루지 못한 것도 있습니다.
언제나 그러하듯이 게으름이 가장 큰 요인인듯 합니다. 하지만 그러한 게으름도 제주위에서 열심히 응원해주시는 많은 분들이 계시기에 그나마 지금까지 온 것 같습니다.

오늘은 AjaxLab에서 선보이는 MessageBox를 소개할까합니다. 아직 준비중인 곳이니까~
AjaxLab에서 많은 부분이 미완성입니다. 앞으로 계속 발전하는 모습을 지켜봐 주세요~

MessageBox 0.6.1(http://www.ajaxlab.kr/Projects/Blankus)

MessageBox를 사용하기 위해 커다란 라이브러리를 include하여 사용하는 것은 바람직하지 않다. 하여 자주 사용하는 MessageBox를 각 Framework(또는 non-Framework)에서 작동 할 수 있도록 최대한 가볍게 작성한다.

구현 목표

MessageBox의 크기를 지정할 수 있다. (가로, 세로)
MessageBox의 제목을 지정할 수 있다.
MessageBox의 내용을 지정할 수 있다. (text, html)
MessageBox와 브라우저의 충돌여부를 판단하여 이동범위를 제한할 수 있다.
MessageBox의 출현후 콜백함수를 지정할 수 있다.
MessageBox의 출현지점 좌표를 지정할 수 있다.
MessageBox의 드래그가 가능하다.

사용법

해당 JS를 인클루드 하고, 아래와 같이 선언하여 사용하고, 원하는 정보를
설정하여 사용한다.

<script type="text/javascript" src="js/MSGBox.js"></script>

/*
new MSGBox({width, height, collision, callback})

width : 메세지박스 가로사이즈 (number) height : 메세지박스 세로사이즈 (number) collision : 메세지박스의 충돌상태 (boolean) callback : 메세지박스의 출현후 콜백지정 (function)
*/
var msg = new MSGBox({width:200, height:120, collision:true, callback:''});

/*
drawBox(title, closeImg, contents, X, Y)

title : 제목줄에 표시될 텍스트 (string)
closeImg : 닫기버튼 사용시에 이미지 경로, 없으면 텍스트 대체 (string)
contents : 메세지박스의 내용에 보여줄 내용 (string)
X : 메세지박스 출현의 x좌표 (number)
Y : 메세지박스 출현의 y좌표 (number)
*/
msg.drawBox('긴 제목줄은 어떻게 될까요? 테스트해봐요','close.gif','내용');

스크린샷

AjaxLab이란 곳은 Ajax를 좋아하는 사람들이 모여 만든 곳이고, 저뿐만 아니라 다른 분들도 곧 프로젝트를 오픈할 예정입니다. 많이들 사랑해주시구요~ 제 블로그를 통해서 이곳의 소식을 전하도록 하겠습니다.

posted by blankus