Open your eyes

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

(블랭커스) — 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

[기초강좌] Javascript에서의 Datatypes - Number, String

(블랭커스) — Sun, 18 Nov 2007 21:40:14 +0900

오늘은 무지 추운날입니다 ㅠㅠ

세상을 위해서는 겨울이 더욱 추워져야 하는데 저를 생각하면 날이 따스했으면 합니다. 어제 다큐멘터리를 보는데 지구의 온난화때문에 많은 자연의 재앙들이 생긴다고 하더라구요. 걱정입니다

오랜만에 기초강좌를 올려보려고 합니다. 순서에 맞지는 않다고 보여집니다만..^^ 제목처럼 데이터타입들에 대해서 알아보려고 합니다. 많은 분들이 잘 알고계신 부분이지만 놓치면 후회(?)할 부분도 있으니까 이부분을 너무 저평가하여 생각하시면 안됩니다. 저도 사실 많은부분을 할애한 부분이기도 합니다.

상세한 부분을 알아보기 전에 전체적인 그림을 그려보도록 하겠습니다.
여러분은 데이터타입에 대해서 잘알고 계신가요? 자바스크립트에서 사용하는 데이터타입은 크게 세가지로 나눌 수 있습니다. 원시타입(primitive datatype), 단순타입(trivial datatype), 혼합타입(composite)이 그것입니다. 다시 원시타입은 Number, String, Boolean으로, 단순타입은 null과 undefined으로, 혼합타입은 Object입니다. 우리가 흔히들 사용하는 function, array등은 모두 Object에 해당됩니다. 나중에 알아보겠지만 Object와 Array는 좀 특별한 내용이 있습니다. 그리고 프로그램을 하다보면 자주 접하게 되는 By value와 By reference의 차이점에 대해서도 알아볼 것이고, Wrapper에 대해서도 알아볼겁니다.

자 이제 전체적인 그림을 그려봤으니 자세하게 알아보도록 하겠습니다.

Number
다른 언어에서는 Integer와 floating-point를 따로 구분해서 사용하고 있습니다. 허나, 자바스크립트에서는 따로 구분하지 않습니다. 쉽게 var num = 10 도 되지만 var num = 3.14 도 된다는 이야기지요. 앞선 예제처럼 직접적으로 숫자를 사용하는 것을 numeric literal이라고 부릅니다. Number는 3가지의 Literals를 가집니다.
1) Integer Literals : 다들 아시다시피 10진수 기반의 모든 숫자를 이야기합니다.
2) Hexadecimal 과 Octal Literals : 16진수(ex : 0xff or 0Xff)와 8진수(ex : 0377)를 사용하는 number입니다
3) Floating-point Literals : 소수점을 사용하는 number입니다. 형식은 [digits][.digits][(E|e)[(+|-)]digits]입니다.
위의 예제는 따로 구성하지 않겠습니다. 뒷편에 조금씩 다룰것이니까요 ^^
혹시 여러분들은 Number.MAX_VALUE / Number.MIN_VALUE를 아시나요? 혹시 파이어버그를 사용하신다면 console창에 한번 찍어보세요. 자바스크립트에서 사용할 수 있는 최대/최소값을 알려줍니다. 그리고 isNaN()이라는 함수가 있습니다. 숫자인지 판별하여 그값을 boolean형태로 돌려줍니다. isFinite()라는 함수는 주어진 값이 Number.MAX_VALUE 또는 Number.MIN_VALUE 사이에 값이 존재하는지의 여부를 boolean형태로 알려줍니다.

String
프로그램을 짜면서 가장 많이 사용되는 데이터타입이 아닐까 합니다. String literal은 원칙적으로 한줄에 써야하는건 아시죠? ㅎㅎ String literal에 대해서는 특별한건 없구요 한번 집어보는 정도로만 하겠습니다.
여러분들은 숫자를 문자로 어떻게 변경(converting)하시나요? 보통 toString()을 많이 사용하시죠? 네 그렇습니다. 저도 그렇지요 ㅎㅎ 그렇다면 아래의 예제를 보세요.

var n = 123456.789;
n.toFixed(0) // "123456"
n.toFixed(2) // "123456.78"
n.toExponential(1) // "1.2e+5"
n.toExponential(3) // "1.235e+5"
n.toPrecision(4) // "1.235e+5"
n.toPrecision(7) // "123456.8"

평소에 사용해본 적이 있으신 함수인가요? 중요한건 아닙니다. 이런것도 있다~ 정도만 아시면 되겠습니다. 그래도 실제로 한번씩은 실습을 해보시기 바랍니다.

그렇다면 반대로 문자를 숫자로 변경(convertin)을 해보셨나요? 어떤 방법을 사용하시나요? 보통은 아래처럼 사용합니다.

var num = Number(string_value) 또는 var num = parseInt(string_value)
둘의 차이점을 아시나요? 다음의 예제를 보시죠

var txt = "3 blind mice"
var num_1 = Number(txt)
var num_2 = parseInt(txt)

num_1과 num_2의 값을 예상하시나요? 네~ num_1은 undefined이고 num_2는 3이 나옵니다. 직접해보세요 ㅎㅎ 그렇다면 아래의 경우는 어떨까요?

var txt = "3.14입니다"
var num = parseInt(txt)
답은 3입니다. 너무 쉬웠나요? ㅎㅎ 답은 parseInt의 Int에 있습니다. Int는 Integer의 약자이고 앞에서 Integer는 10진수를 기반으로 한다고 했습니다. 하지만 이것은 기본값이구요, 만약 parseInt("11", 2)라고 한다면 답은 3이 됩니다. 왜냐하면 11이란 값을 2진수의 값으로 변경하기 때문입니다. 그리고 한가지 팁아닌 팁을 알려드리면,

var txt = "$72.34"
var num = parseInt(txt) // return NaN

입니다. ^^ 자세히 설명하지 않아도 느낌이 오셨을거라 생각합니다.

오늘은 여기까지하고 다음 강좌는 Boolean 데이터타입부터 하겠습니다.
좋은밤 되세요 ㅎㅎ

posted by blankus

Dialogue in the dark [어둠속의 대화]

(블랭커스) — Sat, 17 Nov 2007 23:04:34 +0900

오늘은 예술의전당에 갔습니다.

NHN직원들에게 무료로 볼 수 있도록 회사측에서 제공을 해줘서~ 다녀왔드랬습니다.

제목처럼 "어둠속의 대화"란 주제로.. 시각장애우 체험을 하는것이지요.

저도 군시절 눈을 크게다쳐서 군의관도 시력회복에 장담을 못하던 때가 있었는데..

그때 저도 두눈을 모두 가린채 암흑속에서 살아야했지요, 지금은 다행이도 주님의 도움으로 이렇게

밝은 세상을 살아가고 있답니다..ㅎㅎ

그래서 인지 이번 체험은 조금더 제겐 소중하고 귀한 체험이 아닐 수 없었습니다.

12월 말까지 하는거라, 여러분들도 시간내어 꼭~ 다녀오시길 바랍니다.

아~! 거기 가시면 아무것도 안보이는 암흑인데요, 거기서 관람객들을 안내하고 진행하시는 요원들이 계시는데

그분들은 아주잘~ 움직이시고 저희를 이끌어 주시는데요... 어떻게 그게 가능할까요?

그렇다고 적외선카메라를 사용하는 것도아니고 어떠한 장비도 사용하지 않는다고 합니다.

궁금하시죠? 직접 체험해보세요~ ㅎㅎ 한시간동안 앞못보는건데.. 시간이 어떻게 흐르는지 알수없을 정도로

재미있고 유익한 시간이였습니다.

여러분들도 꼭 체험하길 바랍니다..ㅎㅎ

posted by blankus