Pragmatic Programmer

18- (5) Porco Rosso - Joe Hisaishi (Music Box Collection)

Howl's Moving Castle Theme - Sungha Jung

Joe Hisaishi - HANA-BI 【はなび】 

Cross Document messaging 통신
다른 사이트 페이지끼리 통신 하기

[그림1] postMessage를 통한 크로스 사이트 통신

 '그림1'에서와 같이 페이지에서 iFrame로 임베이딩된 상태에서는 브라우저의 보안 정책으로 인해 자바스크립트를 통해 페이지간 통신을 할 수 없었다. 하지만 postMessage를 통해서 가능하게 되었다. 지원하는 브라우저는 아래 '그림2'에서와 같이 IE8에서부터 지원이 되므로 거의 대부분의 브라우저에서 지원된다고 보면 될 것이다.

[그림2] postMessage 브라우저 호환표

( http://caniuse.com/#feat=x-doc-messaging )

 이제 postMessage의 사용법에 대해서 알아 보자

데이터 송신하기

데이터를 송신하기 위해서는 window 객체의 postMessage 함수를 사용하면 된다

데이터 수신하기

데이터를 수신하는 측에서는 단순히 window 객체의 message 이벤트를 구현하면 된다

이제 이 코드를 가지고 아래 예제 코드로 활용법을 보도록 하자.

Syntax

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow

A reference to another window; such a reference may be obtained, for example, using the contentWindow property of an iframe element, the object returned by window.open, or by named or numeric index on window.frames.

message

Data to be sent to the other window.

targetOrigin

Specifies what the origin of otherWindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a URI. If at the time the event is scheduled to be dispatched the scheme, hostname, or port of otherWindow's document does not match that provided in targetOrigin, the event will not be dispatched; only if all three match will the event be dispatched. This mechanism provides control over where messages are sent; for example, if postMessage were used to transmit a password, it would be absolutely critical that this argument be a URI whose origin is the same as the intended receiver of the message containing the password, to prevent interception of the password by a malicious third party. Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.

transfer [Optional]

Is a sequence of Transferable objects that are transferred with the message. The ownership of these objects is given to the destination side and they are no more usable on the sending side.

일정에 따르는 내부 이벤트 정보

( Item, GlobalObjectId 추적 )

 반복 일정에서 ItemId와 GlobalObjectId의 상관 관계 그리고 수정에 대해서 알아 보고자 한다. 일정 관련 개발시 또는 연동 때문에 여러가지 케이스에 대해서 밑에와 같이 정리해 보았다. 익스체인지 일정은 과거 일정과 미래 일정이 현재 일을 포함 할 경우 이전 일정에 대해서는 새로 생성을 하고 기존 일정을 수정하여 처리하고 있다. 이렇게 변경되는 사항들을 잘 정리해서 쉽게 일정 연동을 할 수 있기를 바라겠다.

밑에서 나온 분석 자료에서 'Uid'가 익스체인지의 ItemId임을 주지 하기 바랍니다.

 금일(오늘)을 포함한 반복 일정은 ItemId와 GlobalObjectId가 변경된다. 금일 이전 일정은 새롭게 생성되어 ItemId가 생성되지만 GlobalObjectId는 동일한다. 그러지만 수정된 반복 일정은 ItemId는 동일하지만 GlobalObjectId가 변경된다. 이 규칙을 잘 이해해야 익스체인지의 일정과 연계 개발을 쉽게 할 수 있을 것이다. 

Front end 웹 개발 프레임 워크 - twitter bootstrap html5 boilerplate, foundation

 웹 디자인에 정형화된 코드의 집합체인 프레임워크는 종류가 다양하다. 그 중에 Html5Bolierplate와 Foudataion, Twitter Bootstrap가 가장 유명하다. 그 중에 Twitter Bootstrap와 연계되어 개발이 진행중인 연관 프로젝트가 가장 활성화가 잘 되고 있다.

Html5Boilerplate은 가장 기본적인 기능만을 미리 선언해 두었으며 IE 버전에 따라 다르게 동작하도록 하는 기능정도만이 추가 되어 있어서 나머지 CSS는 추가적으로 모두 작업을 해야만 한다.

Foudation은 Html5Boilerplate 보다는 많은 부분을 다루고 있다. 그리드 시스템, 버튼, 탭, 슬라이드를 만들 수 있는 스타일 시트와 자바스크립트를 제공한다. 그렇지만 BootStrap 처럼 포괄적으로 제공하고 있지는 않다.

Twitter.BootStrap은 웹 페이지 제작에 필요한 거의 모든 요소를 만들 수 있게 제공이 되고 있다. HTML페이지에 테그와 선택자만 입력해도 사용할 수 있으며 같이 제공되는 자바스크립트도 점더 세련되게 사용자와 반응 할 수 있도록 한다.

그래서 전체적인 지원 범위를 비교해 보면 아래와 같을 것이다.

Html5Boilerplate < Foudation < Twitter.Strap

밑바탕 부터 차근 차근 개발이 필요한 사이트는 Html5Boilerplate를 사용하면 될것이고 디자인이나 레이아웃 그리고 브라우져마다 다른 특이점을 고려하기 힘든 상황이라면 Twitter.Bootstrap를 이용해서 필요한 부분만 수정하여 웹 사이트를 개발하면 쉽게 이쁘고 확장성이 있는 멋진 웹 사이트를 제작할 수 있을 것이다.

우루사의 꽤 괜찮은 광고

Extended WPF Toolkit™ Community Edition

 WPF 개발시 기본 컨트롤을 확장하여 보다 쉽게 사용할 수 있도록 Toolkit를 만들어 배포하고 있다.