새해복 많이 받으세요 ^^

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

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

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

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

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

posted by blankus

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

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

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

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

posted by blankus

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

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

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

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

posted by blankus

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

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

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

>>바로가기

posted by blankus

어느덧 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의 드래그가 가능하다.

사용법

스크린샷

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

posted by blankus

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

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

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

상세한 부분을 알아보기 전에 전체적인 그림을 그려보도록 하겠습니다.
여러분은 데이터타입에 대해서 잘알고 계신가요? 자바스크립트에서 사용하는 데이터타입은 크게 세가지로 나눌 수 있습니다. 원시타입(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

오전에 Ajaxian.com을 보다가 좋은 정보가 있어 퍼왔습니다..^^;
저 블로그에도 일부 아래의 정보가 있긴하나 아직 미완성 포스트라서...-0-
아래 플래시를 참고하면 좋을듯합니다. ;)


--원문 ------------------------------------------------------------------------
Joe Walker gave a standout talk on Web Application Security at The Ajax Experience.

I love to watch people leaving this talk as they are usually gasping as they realise that we are not secure :)

Joe has posted the slides from his talk, and has provided some great resources:

날이 어제보다 더 추워졌습니다... ㅎㅎ 이젠 겉옷을 입고 다녀야겠어요..
오늘은 책을 하나 소개해볼까 합니다.
"Ajax 인 프렉티스"입니다.

2006년 아마존에서 선정한 인터넷 부분 1위에 올랐던 책입니다. Ajax 인 액션의 다음 버전으로 나왔지만 단순한 증보판이 아닌 확실히 내용이 알차졌습니다.(물론 Ajax 인 액션도 내용은 훌륭합니다)

위 책에서는 Ajax의 기초보다는 라이브러리를 이용한 활용에 중점을 두었구요, 요즘 인기상승중닌 jQuery 라던지 잘 사용해보지 않았떤 qooxdoo라던지 rico등의 라이브러리를 이용한 내용이 볼만합니다.

물론 사이트 이곳저곳을 돌아다니다 보면 보실 수 있는 예제이긴 하나 한곳에서 편하게 비교를 해가면서 볼 수있는 것이 이책의 장점이라고 볼 수 있겠네요.

사실 저는 이책을 산건 아니구요, 회사옆자리 동료가 샀길래 잠시 훔쳐보고 있습니다..ㅎㅎ

그동안 블로그에 무심했는데..바쁘다는 핑계로...이젠 다시 열심히 관리하려고 합니다..

오늘도 기분좋은 하루 되세요~

posted by blankus

오랜만에 글을 올리는 것 같군요.. ^^

한창 더울때 post를 시작한 것 같은데 벌써 날이 제법 찹니다.. 감기조심하세요.

오늘은 제목처럼 자바스크립트에서 주로 사용하는 객체 생성방식에 대해서 알아보려고 합니다. 또한 생성할시에 필요한 메모리도 한번 체크해보도록 합시다.

자바스크립트에서는 클래스라 불리우는 객체를 두가지 방식으로 선언할 수 있습니다.
첫번째는 function으로만 선언하는 방식이고, 다른하나는 function과 prorotype을 이용하여 선언하는 방식이 있습니다.

function Foo(){
   this.name = "foo";

   this.getName = function(){
      alert(this.name);
   };

   this.setName = function(name){
       this.name = name;
    };

    this.act = function(){
 
    }
}

보시다 시피 위의 소스는 function으로 Foo객체(클래스)를 생성한 모습입니다. 일반적으로 위의 방식을 주로 사용합니다.

그리고 저는 후자의 방식을 사용하는데요... 소스는 아래와 같습니다.

function Foo(){
   this.name = "foo";
}

Foo.prototype = {
   getName : function(){
      alert(this.name);
   },
 
   setName : function(name){
      this.name = name;
   },
 
   act : function(){
 
   }
}

먼저 function으로 필요한 부분은 멤버로 넣고 각 인스턴스마다 공통으로 사용될 것같은 놈들만 골라서 prototype으로 처리했습니다.
(여기서는 그냥 가상이므로 getName과 setName, act메소드에 대한 내용은 언급하지 않습니다)

그리고 아래의 소스를 돌렸습니다...위의 두가지 방식의 소스 모두...

for(var i=0; i<10000; i++){
    eval("f_"+i+" = new Foo();");
}

결과는 어떻게 될거라 생각하나요??


우선 아무것도 없을때의 화면입니다.


두번째는 function으로 선언하고 위의 소스를 돌렸을때의 화면입니다.



다음은 prototype과 function을 함께 사용했을때의 화면입니다.



예상하셨나요??

제가 위에도 잠시 언급했지만.. function으로 생성된 인스턴스는 해당 클래스에 존재하는 모든 멤버를 모두 설정하여 생성됩니다.

허나, 필요한 멤버는 function으로.. 각 인스턴스마다 공유될 멤버 메소드같은 경우는 prototype으로 선언하면 function으로 생성된 인스턴스는 function의 멤버인 하나만 설정하여 생성되고 나머지 필요한 것은 Foo로부터 찾아서 사용하게 됩니다.

많은 분들이 function형태의 클래스 생성과 prototype으로 생성한 것과의 차이점을 간과하시는 듯하여 작성한 post가 되겠습니다.

갑자기 추워진듯 한데 감기조심하시구요. 다음 포스트때 다시 뵙도록 하겠습니다.

posted by blankus

추석연휴는 잘 보내셨나요? ㅎㅎ 저는 조부모님댁이 서울이라... 회사서 휴일당직도 하고, 휴일같지 않은 휴일을 많이 보냈답니다.ㅎ

오늘은 자바스크립트 하이잭킹에 대해서 소개하겠습니다. Hijack이란 단어는 "강탈하다", "뺏다"의 뜻이 있습니다.
단어에서 느끼듯이 주제는 그러합니다. ^^. 이번 글은 www.fortifysoftware.com에서 제공한 pdf의 내용이며,
오역이 있더라도 잘봐주세요. 그리고 중요치 않다고 생각되는 부분은 과감하게 생략토록 할것이고, 문장의 매끄러움을 위해 의역도 포함했습니다.

Javascript Hijacking

요약

Ajax어플리케이션이라 불리우는 리치 웹 어플리케이션들은 데이터 전송기술로서 자바스크립트를 사용하여 만든다. 이번 지면에서는 제목처럼 자바스크립트 하이잭킹, 즉 취약성에 대해서 다룬다.
공격은 웹브라우저의 강제 SOP(Same Origin Policy)를 우회하는 <script>태그를 사용하여 시작된다.
전통적인 웹어플리케이션들은 취약하지 않았다. 왜냐하면, 과거의 것들은 데이터 전송기술로 자바스크립트를 이용하지 않았기 때문이다.

우리는 유명한 12개의 Ajax프레임워크를 분석했다.[ 서버사이드용 4개 : DWR(Direct Web Remoting), Atlas(ASP.NET Ajax), xajax, GWT(Google Web Toolkit), 클라이언트용 라이브러리 8개 : PrototypeJS, Script.aculo.us, Dojo, Moo.fx, jQuery, YUI, Rico, MochiKit]  
위의 것들중 유일하게 DWR 2.0만이 자바스크립트 하이잭킹을 막기위해 구현한 것이 존재했다. 대부분의 프레임워크들은 어떠한 보호장치도 제공하지 않았고, 그들의 문서에서 조차 보안에 관련된 내용을 언급하지 않았다.

우리는 두가지의 완화법에 대해서 논의할 것이다. 악의 있는 요청을 줄이는것과 자바스크립트를 직접실행하는 공격자에 대한 방어가 그것이다.

1. 소개
비록 'Web 2.0'이란 단어가 정확한 정의를 가지고 있지는 않지만, 최근엔 일반적으로 두가지로 사용되고 있다. 첫번째는 'Web 2.0'이 웹 어플리케이션으로 하여금 사회적 상호작용 또는 일반적 합의점을 제공하는 것이고 두번째는 웹 프로그래밍 기술이 풍부한 사용자의 인터페이스를 이끌도록 제공하는 것이다.
이러한 기술들이 때로는 Ajax라는 이름으로 구현되고 있다. 여기서는 자바스크립트 하이잭킹의 단어처럼 취약성에 대해서 논의할 것이다.  이것은 많은 리치 웹 어플리케이션에 의해 사용되는 데이터 전송기술을 이용하는  공격이다. 자바스크립트 하이잭킹은 비인증 공격자가 생성된 매쉬업중 하나를 사용하여 취약한 웹 어플리케이션으로부터 중요 데이터를 읽을 수 있도록 허용한다. 이러한 취약점은 이미 논의되었지만 웹프로그래머들은 이러한 문제점을 좌시했고, 심지어 많이 알려진 이 단어(하이잭킹)조차 모르고있다.

자바스크립트 하이잭킹은 널리 알려진 취약점의 다른 형태로 변형된다 : cross-site request forgery.
cross-site request forgery 공격은 취약한 웹사이트에게 HTTP Request를 하나 또는 여러개를 submit할때 공격이 시작된다. 일반적은 cross-site request forgery 공격은 데이트 무결점을 훼손시킨다. 이는 공격자에게 취약한 웹사이트의 저장된 정보를 수정할 수 있는 능력을 준다.

취약한 웹사이트는 이미 많은 곳에 존재한다. 자바스크립트 하이잭킹에 대해서 주장한 사람들중 하나인 Jeremiah Grossman은 Gmail의 취약성을 발견했고, 구글메일은 이문제를 수정했다.

posted by blankus