골때리는 자바스크립트의 세계 5탄

음.. 슬럼프 상태라서 그런지 머리에서 맴맴거리는군요. 이제 슬슬 매미 올때가 된 것을 알리는 신호인 듯 합니다..응???????????

프로그래머 되면 이렇게됩니다.

어쨌든, 오늘의 골때리는 자바스크립트는 변덕쟁이 장난꾸러기 this 키워드에 대해 알아보겠습니다.

예전에 문제를 하나 냈었죠.

a=0;

function p(){

  (function(){this.a=’b’;a=’c’;})();

  var a=’d’;

  this.a=’e’;

  (function(){var a=this;(function(){a=’f’})();})();

}

p();

음.. 너무나도 미칠것같아서 직접 돌려본 분도 계시겠죠.

아니면 머리로 한번 디버깅을 시도해보신 분도 있겠죠.

결과는 뭐가 나왔죠? a는 ‘e’가 나왔죠.

자 여기서 의문점이 있습니다.

‘e’는 this 키워드 소속인데. 그렇다면 그 키워드는 함수 안에 포함되있을텐데

어째서 상위 a 변수를 건드릴 수 있는건가?

음.. 이런 의문점을 남긴 분도 계실겁니다. 일단 함수를 호출한 부분을 보시면

p();

이겁니다. 최상위 상태에서 p 함수를 호출한 거죠.

그렇다면 최상위 객체는? 당연히 window죠.

이번엔 인라인으로 선언시키고 실행해볼까요?

a=0;

var p=function(){

  (function(){this.a=’b’;a=’c’;})();

  var a=’d’;

  this.a=’e’;

  (function(){var a=this;(function(){a=’f’})();})();

}

p();

이래도 this는 window 객체를 참조하기 때문에 e가 나오는군요.

대체 뭐가 문제입니까? p에게 참조하게 할 수 없습니까?

원인은 바로 호출 문제인 겁니다.

맨 아래 코드를 보시면 p();가 있죠. p를 호출할 때 객체는 참조를 안했습니다. 그러니 자연히 window 객체 아래서 호출하는 것이죠.

즉, 쉽게 말해 이런 환경에서 자스 코딩을 한다고 보시면 무방하겠군요.

with(window){

 //님의 자스코드 주르르르르르르…

}

난 다른 객체를 참조할래 하시면? p에게 객체 소속을 부여시키면 됩니다.

그렇다면 new p(); 이러면 어떨까요?

그렇게 되면은 p의 최상위 객체는 자기 자신으로 할당시키게 됩니다.

그렇게 되면 this가 가리키는건 p가 되겠죠.

그렇게 되면 결과값은? 어이없게도 b가 나옵니다………헐?

그렇다면 첫번째 람다함수에 있는 this가 설마????

this 키워드. 이렇게 변덕이 심합니다. 답이 없어요..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

하지만 중요한 것은 this 키워드가 어디를 가리키는 건지는 정확히 알아야 한다는 점이죠.

처음부터 어려운 예제를 접해보니 골때리죠? 골 때려도 유분수지..

하지만 이런 골때리는 this 키워드를 손쉽게 접해볼 수 있는 방법이 있습니다.

바로 자신만의 객체를 만드는 연습을 하면 됩니다.

function myobj(){

  this.food=’닭’;

  this.girlfriend=’김태희’;

}

myobj.prototype.gesori=function(){

  alert(this.girlfriend);

}

var a=new myobj();

a.gesori();

a.ge=’baby’;

a.girlfreind=’전지현’;

a.gesori();

프로토타입을 만들다보면 가끔 어이없는일에 부딪히기도 합니다.

동적 객체를 사용할때 setTimeout을 사용해야 할 때도 있고, DOM 객체를 건드려야 할 때도 있습니다. 왜 이 2가지를 대표로 뽑았는지 지금부터 들어갑니다.

function myobj(){

  this.food=’닭’;

  this.girlfriend=’김태희’;

}

myobj.prototype.gesori=function(){

  setTimeout(“alert(this.girlfriend);”,1000);

}

자, 개소리 메서드(..)에 1초 후에 경고창을 뿌리게 해놨습니다.

그리고 종전처럼 실행해봅시다. 에러납니다. girlfriend 변수가 없다는 이유로요.

왜그럴까요?

setTimeout에 첫번째 인자가 들어갈 건 문자열도 있고 함수도 있습니다.

하지만 문자열 따로처리 함수 따로처리 이렇게 하는 건 아닙니다.

setTimeout의 첫번째 인자 처리는 다음과 같습니다.

window.setTimeout=function(func,msec){

    func=new Function(func);

    …그 외에는 네이티브 객체이기 때문에 패스

}

여기서 Function 인스턴스에 들어갈 인자에서 문자열이 들어가도 그 문자열을 파싱해 함수로 만든다는 사실. 물론 function(){어쩌구}도 되고 파싱할 문자열을 넣어도 되고..

그렇다면 어째 eval과 비슷한 역할을 하겠네요? 당연히 다르죠.

eval은 식 자체를 평가하고, function의 문자열은 실행할 코드를 집합시키는 역할을 수행할 뿐이니까요.

근데 문제는 이게 아니죠. this가 가리킨게 대체 뭘 뜻하는건지 원..

그러면 개소리 메서드를 바꿔봅시다.

myobj.prototype.gesori=function(){

  setTimeout(“alert(this.alert(‘?’));”,1000);

}

alert은 window 객체에 있죠? 그래서 실행이 됩니다. 그것도 경고창이 4번씩이나 나오면서요. 물론 alert 메서드는 리턴값이 없기 때문에 첨엔 undefined가 나옵니다.

결국은 이 메소드는 최상위 객체에서 실행하는 꼴이 되는거죠. setTimeout은 숫자가 리턴됩니다. 그게 그냥 숫자는
아니죠. 그 코드를 실행시킬 메모리 주소를 알려주는 역할을 합니다. 그래야 clearTimeout에서 주소를 참조한 다음 그
주소에 있는 네이트브 함수를 삭제해주는 역할을 하죠.

얘기가 왜 자꾸 삼천포로 흘러가는겨?

어쨌든, setTimeout 실행시에 this를 참조하는 곳은 최상위 객체임을 알아주세요.

그래야 메모리 잡고 또다른 방에서 1초후에 경고창이 뜨죠. 근데 해당 객체에 뜨면 안되나 왜이리 불편하게 하는지 이런분도 계실까봐.. 하시는데. 직접 구현해보셈.

그렇다면 해결방안은? 당연히 인터넷에 널리고 널렸으니 직접 찾아보시구요.

DOM 객체를 불러올때. 특히 이벤트를 작성할때 this는 변덕쟁이가 됩니다.

myobj.prototype.gesori=function(){

  domobj.onclick=function(){alert(this.girlfreind);}

}

여기서 DOM 잡아주고 클릭 실행하면? 당연히 안뜹니다.

하아.. 얘 또 어디가나.. 여기서 this는 기본적으로 해당 DOM을 참조하게 됩니다. 그래야 해당 이벤트를 열었을때 자신을 어떻게 할건지 쉽게 구성할 수 있으니까요. 언제 없어지는 변수를 DOM으로 참조하는것보다 낫죠.

이거 해결하는것도 숙제로 남겨두겠습니다.

자, 그렇다면 이제, 함수 안에 있는 this를 최상위객체가 아닌, 원하는 객체에 참조하고 싶다면, this를 길들이고 싶다면 어떻게 하면될까요?

해답은 Function.prototype.call에 있습니다. 뭥미?

그냥 myfunc.call(); 이렇게 쓰는겁니다..

call 메소드의 첫번째 인자는 참조할 컨텍스트라고 하는데 대체 컨텍스트가 뭐냐? 그냥 객체입니다.

사용법은 간단합니다.

a=0;

function p(){

  (function(){this.a=’b’;a=’c’;})();

  var a=’d’;

  this.a=’e’;

  (function(){var a=this;(function(){a=’f’})();})();

}

p.call(p);

new p();대신 p.call(p);를 사용했습니다. 결과는 new p();와 똑같죠.

new는 새로운 인스턴스. 새로운 집을 하나 장만하는 키워드로 this는 p 안이 되겠구요.

p.call(p);는 그냥 p 함수를 실행시키는건데 참조할 객체를 강제로 p로 맞추었기 때문에 this는 p가 되겠습니다.

여기서 a가 왜 b가 되나면 첫번째 람다함수에 참조할 대상이 없기 때문이죠. 물론 참조할 대상이 생기면 좋겠지만 함수란
개념을 이해한다면 빠를겁니다. 구급가방에 반창고 찾는거라 생각하면 쉽겠죠. 일반인이 구급가방에서 반창고 꺼내는거와 의사가
구급가방에서 반창고 꺼내는 개념을 생각하면 되겠습니다.

여기까지 this의 변덕스러움과 그 변덕스러운 this를 길들이는 방법을 간단하게 늘어놓았습니다. 이번에 골때리는 팁은 어려워서 골때리는 팁같군요.

저도 어지럽습니다.

다음 이시간에는 더욱더 골때려서 돌아가시게 만들어드리겠습니다.

License:Public Domain

composite / 2010년 12월 13일 / 미분류 / 0 Comments

골때리는 자바스크립트의 세계 4탄

오랜만에 자바스크립트를 골때리게 하는 팁을 내놨습니다.

음.. 일단 먼저, 전 대통령의 서거를 애도합니다.

근데 문제는.. IT대통령이 역사속으로 사라졌으니 이제 대한민국 IT의 미래가 걱정되는군요.

어쨌든, 그런 의미에서 골때리는 자바스크립트를 통해 더욱 더 멋진 프로그램을 만들어야죠.

자, 아래 함수를 보세요.

somemethod()()()()()()();

…………………………………………………………………..??????????????????????????

자.. 처음부터 골때리죠? 하지만 이게 불가능할거라 생각하시면 뭐.. 그만 보고 나가도 좋습니다.

근데.. 가능합니다. 아니 대체 어떻게?

간단합니다. 음.. 어렵게 생각하실 필요는 없어요. 아래와 똑같으니까요.

somemethod();

somemethod();

somemethod();

somemethod();

somemethod();

somemethod();

음.. 똑같은 이름만 쓰는건 귀찮죠. 물론 컨트롤 씨브이 하면 되지만.. 용량 좀먹죠.

그래서 간단하게 괄호만 원하는 실행갯수만큼 주르르.

물론 재귀 함수는 맞습니다. 근데 재귀의 의미가 약간 벗어난다 싶지만

제가 워낙 삼천포를 가고 싶었거든요. 일단 소스는 다음과 같습니다.

function somemethod(){

  window.status+=”.”;

  return somemethod;

}

자. 보시면 함수 이름과 자기 자신을 리턴하는 모습입니다.

네. 자기 자신을 뱉어서 또 쓸 수 있게 되는거죠.

그렇게 되면 리턴값은 자신이 되는거고, 그리고 다시 불러올 수가 있죠.

이점이 뭐가 있냐면.. 일단 일반적인 재귀 함수를 봅시다.

var i=6;

function myfunc(){

  if(i>0){

    i–;

    myfunc();

  }

}

어째보면 이게 더 간단해 보이지만.. 왜 굳이 맨 위에방식을 쓰는겁니까.

글쎄요.. 저도 확연히 잡지를 않았지만 MVC 패턴에는.. 딱히 뭐라하기 그렇고..

그렇다고 눈에 확 띄는 코드라니 괄호만 도배하면 괄호세느라 뼈빠질테고..

결론은 그냥 이렇게 쓸 수 있구나 알아두세요.

차라리 재귀함수 쓸려면 이게 낫죠.

function myfunc(i){

  if(i<0){

    myfunc(i–);

  }

}

그래도 이게 그나마 숫자를 쓰니 보기도 쉽죠.

그래도.. 재밌게 코딩하는것도 남다른 자바스크립트의 재미가 아닐까요?

음.. 갑자기 분위기가 싸해졌군요. 자시 분위기 띄어보는 차원에서 골때리는 문제 하나 드리죠.

a=0;

function p(){

  (function(){this.a=’b’;a=’c’;})();

  var a=’d’;

  this.a=’e’;

  (function(){var a=this;(function(){a=’f’})();})();

}

p();

변수 a에 담길 값은 무엇일까요?

직접 머리로 디버그한번 해보세요. 다음에는 이 문제를 두고 다룰까 생각중입니다.

팁이 좀 짧군요. 제가 지금 슬럼프라 뭐라할말이 없지만..

다음 팁은 더욱더 무엇보다도 골때리도록 노력해보겠습니다.

License:Public Domain

composite / 2010년 12월 13일 / 미분류 / 0 Comments

골때리는 자바스크립트의 세계 3탄

음.. 이번 탄의 희생양은 클로저였지만 구글을 검색해보니..

골때리는 자바스크립트의 본 목적에서 벗어나는 듯 해서 잠시 미루도록 하겠습니다.

원래 골때리는 자바스크립트의 목적은, 말 그대로 골때리는 팁을 알려드리기 위해서지..

자바스크립트의 가식적이고 진지 오래먹는 강좌는 아니거든요..

하지만, 골때리는 스코프나 클로저는 없지는 않으니까 정리를 한 후에

언제 팁으로 올라갈지는 저도 장담은 못하겠습니다.

오늘 이시간 골때리는 자바스크립트의 희생양은 배열이 되겠습니다.

우흐흐흐흐흐… 배열에 대한 한가지 진실을 알려드리죠.

자바스크립트를 작성하시는 분들에게는 꼭 알아둬야 할 골때리는 팁입니다.

또한 아시는 분이야 아시겠지만 이번에 소개될 함수는 정말 골때릴지도 모르겠죠.

1. 배열의 진실

일단 자바스크립트는 객체지향언어에 속합니다.

그것도 모자라 객체에 재대로 쏠린 언어죠.

하지만 그래도 그덕분에 MVC. 모델 뷰 컨트롤러를 탄생시킨 장본어이기도 합니다.

자바스크립트가 그냥 부가기능에 그쳤던 시대에서 하나의 프로그램 언어(?)로 인정한

이 위대한(??) 자바스크립트 사전에 없는 배열의 진실은 무엇일까요?

먼저 아래 코드를 보겠습니다.

arr[0][1]

자. 이건 분명 2차배열에 쓸법한 문법입니다. 딱 봐도 2차배열이겠죠.

분명 2차적인 배열에 값을 정의하면 나오겠죠?

그렇다면 다음 코드를 보겠습니다.

element[‘style’][‘display’]=none;

음.. 배열에 이름을 달 수가 있었던가요? 거 참 신기하긴 하네요.

물론 프로토타입 라이브러리 쓴다면야 hash 기능을 이용하면 되겠지만..

이거 뭐.. 배열이라고 하기엔 애매하고 그렇다고 객체를 저따구로 쓰는것도 참..

자.. 이제 진실을 아시겠습니까?

음.. 감이 아직 잡히지 못한 분들께 힌트를 더 드리겠습니다.

먼저, 배열을 하나 만들겠습니다.

var arr=new Array();

그런 다음에 arr[0][1]=’string’ 이렇게 정의해 보세요.

만약 이게 가능하다면 이넘은 다차원 배열이고, 안된다면.. 병들의 신인거죠.

이제 감이 잡히셨습니까?

그렇습니다. 자바스크립트의 배열의 세계는 절대적인 1차 배열입니다.

2차..3차..다차원 배열 따위는 사전에 없다는 거죠.

하지만 실망하지 마세요. 우리에게는 객체가 있으니까요.

원하면은 배열을 하나 더 만들어내서 다차원 배열처럼 만들 수가 있지요.

arr[0]=new Array();

arr[0][1]=’string’

옹홍.. 잘되는군요. 초보분들의 이해를 돕기 위해

var arr=[];

이건 잠시 접어두겠습니다. 물론 요것도 배열을 만드는 편법입니다. 알아두세요.

어쨌든, 자바스크립트에 다차원 객체는 있어도 다차원 배열 따위는 없습니다.

다음으로 넘어가죠.

2. Array.prototype.length의 진실

배열의 길이를 구해주는 고마운 속성 length.

하지만 이녀석이 하는짓이 얼마나 골때리는데요.

물론 배열의 길이를 구해주는 스크립트는

var arrlen=arr.length;

이지만, length에 대한 3가지 골때리는 진실을 알려드립니다.

먼저, length 속성이 읽기 전용일까요?

아닙니다. length는 읽고 쓸 수가 있습니다.

지금 arr.length=3; 작성해보세요. 만약에 읽기 전용이라면 값을 지정할 때 에러가 발생합니다. 하지만 멀쩡한 이 배열의 자태를 감상하세요.

그렇다면, 만약에 length를 통해 배열 길이를 정했을때, 없던 새로운 배열은 뭐로 채워지죠?

물론 null로 체워집니다.

아니 그러면, length를 5가 나왔는데 3으로 줄이면 어떤 현상이 나오는겁니까?

뒤에 있는 배열 2개는 영영 작별인사를 해야합니다. undefined로 변하는거죠.

그래서 배열 안에 있는 내용을 모조리 비우는 메소드를 이렇게 작성합니다.

Array.prototype.clear=function(){

      this.length=0;

}

어때요. 쉽죠?

마지막으로, 배열을 선언했습니다.

var arr=new Array();

그런 다음, 배열 아무자리에 값을 넣어보겠습니다.

arr[4]=’arr4′;

자, 이제 arr.length 값을 구해보겠습니다. 몇으로 나왔죠?

5로 나왔습니다. 엉ㅇㅇ어어엉ㅇㅇ어어어어어엉?

아니, 하나밖에 정의를 안했는데 어째서 길이가 순식간에 5로 뿔어날 수 있습니까?

먼저, 위의 코드를 한줄로 표현하면 다음과 같습니다.

arr=[null,null,null,null,’arr4′];

즉, 배열의 5번째 자리를 만들기 위해 앞자리를 null로 채우는거죠.

어느 언어나 배열의 법칙입니다. 규칙이 엄한 언어는 갑작스레 아무자리에 배열을 정의하면 에러가 납니다.

이 약속을 지키는것도 자바스크립트도 예외는 아니죠.

만약 여러분이 원하는대로 길이가 1이 나왔다면은,

과연 아무개가 정의한 배열의 위치를 알 수 있을까요?

당사자 아니고선 모릅니다. 이런 혼란을 막는 센스인 것이죠.

골때리지만 유용한 자바스크립트의 세계는 오늘은 여기까지입니다.

다음 희생양은, 또 함수입니다. 1탄에 이어 함수는 동네북입니다.

네. 자바스크립트의 동네북은 역시 함수입니다.

클로저와 스코프란 어려운 개념을 만든 쇼키가 바로 함수죠.

다음에는 이 또 골때리게 만드는 함수에 대한 다른 세계를 보여드리겠습니다.

그럼 즐코딩~

License : Public Domain

composite / 2010년 12월 13일 / 미분류 / 0 Comments

골때리는 자바스크립트의 세계 2탄

오늘은 쓰잘데기는 없지만 이런 기능도 하는구나 하는 팁을 내놓았습니다.

JS도 delete문이 있다는거. 네. 있죠. 아시죠? 네. 있습니다.

뭐.. 일단 delete는 해당 변수를 삭제하는 용도로 주로 쓰입니다.

C언어에서는 클래스를 삭제하는 등등 뭐 여러가지로 잘도 쓰이죠.

하지만 JS에서는 그닥 delete문은 쓰잘데기 없습니다.

이 문법 자체가 쓰잘대기 없기때문에 쓸데없는 팁이라 머릿말에 붙였습니다…

………….ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

뭐 어쨌든, 기본적인 사용예제입니다.

var a=document.getElementsByTagName(‘div’);

for(i=0;i<a.length;i++){

    a.style.backgroundColor=’green’;

}

delete a;

a를 통해 div 태그를 모조리 뽑아온 다음 모조리 배경색을 초록으로 바꾸고 그변수를 버립니다.

물론 그 이후 a를 출력시키면 undefined로 나오죠.

뭐.. 객체 자체를 삭제할 수는 있지만 객체 안의 멤버를 삭제할 수는 없습니다.

delete a.member;

이래봐야 결과값은 각설이처럼 죽지도 않고 또출력되네~ 입니다.

하지만 a의 동적 멤버, 즉, 프로토타입은 delete문으로 지울 수 있습니다.

delete Integer.prototype.toUnsigned;

물론 객체 자체를 삭제해야 하기 때문에 괄호를 붙이면 안되겠죠.

그렇다고 객체 자체가 삭제되지는 않으니 안심하세요.

어쨌든 이렇게 되면 잠시동안 프로토타입을 선언한 후 쓰다가 지울 수 있는 괴기한 스크립트를 만들 수 있겠습니다.

Object.prototype.extend=function(obj){

      for(var x in obj)

          this[x]=obj[x];

      return this;

}

var ob={a:’가’,b:’나’,c:function(){return ‘다’;},d:4};

ob=ob.extend({e:5,f:’라마바’,g:(function(ret){return ret;})(‘사아자차카타파하’)});

delete Object.prototype.extend;

사실.. 이 팁의 목적은 prototype 멤버를 delete로 삭제할 수 있다는 걸 알려주는것 뿐입니다.

쩝.. 어쨌든, JS의 꽃인 프로토타입. 클로저때문에 햇갈리시죠? 햇갈리죠..네..

아마 골때리는 자바스크립트 3탄의 희생양은 클로저가 될지도 모르겠군요.

License : Public Domain

composite / 2010년 12월 13일 / 미분류 / 0 Comments

골때리는 자바스크립트의 세계 1탄

음.. 너무 오랜만에 팁을 직접 작성하는군요.

후훗.. 그닥 별로지만.

즉석 자바스크립트 평가기(JavaScript Evaluator)를 링크에 담았습니다.

즉석에서 자바스크립트를 실행해보면서 배워보시라고 구글에서 구했습니다.

오늘은 골때리는 자바스크립트란 제목으로 자바스크립트에 대한 재미있는 부분을 배워볼까 합니다.

아시는 분은 한번씩 되새기는 계기로, 몰랐던 분은 좋은 양식이 되었음 하는군요.

1. (function(){alert(‘a’);})();

처음부터 괄호를 보고 이게 멍미? 자. 이건 분명 함수입니다. 예. 함수죠.

음.. 그런데 맨 오른쪽에 왠 빈 괄호일까요?

궁금하면 한번 테스트를 해봐야겠죠? 결과는 경고창이 뜹니다. a라고요.

그렇다면 이렇게 한번 써볼까요?

(function(v){alert(v);})(‘메롱’);

이번엔 메롱이란 경고창이 뜰겁니다. 대체 넌 정체가 뭐냐?

네. 즉석 함수 스크립트입니다. 함수명도 정의조차 안하고.. 뭐 이거 그냥 딸랑 실행만

한번 하고 마는 이 불쌍한 함수는 그냥 즉석 함수죠. 한번 부르면 땡,.

정의된 변수가 없기에 한번 실행 후엔 영영 볼수 없는 일회용 함수죠.

그렇다고 해서 이게 일회용 역할만 할까요? 그렇지 않습니다.

element.onclick=function(){(function(ele){ele.innerHTML+=’메롱’;})(this);};

element란 변수가 담긴 엘리먼트를 클릭하면 메롱이란 글자가 들어갈겁니다.

클릭할때마다 계속 메롱메롱메롱… 뜨죠. 이로써 일회용 함수가 어떻게 쓰느냐에 따라

얘가 이렇게 쓰일 수도 있구나 함을 알겠죠?

그래도 얘는 함수라서 다행이죠. 함수와 관련된 메소드를 실행할 수 있으니까요.

element.onclick=function(){(function(){alert(this.innerHTML);}).call(this);}

이렇게 하면 경고창에 엘리먼트의 내용이 뜨죠. 물론 뻘짓이지만요;;

심지어는 이렇게까지 작성할 수 있습니다.

element.onclick=(function(){return function(){alert(this.innerHTML);};})();

오매..심오해져 가지만 신경안써도 됩니다. 그냥 이렇게도 할수 있구나만 알아두세요. 뻘짓이니까요.

어때요. 쉽죠? 좋아요. 그럼 다음으로 넘어가죠.

2. “This is a Apple”.replace(/a/gi,’e’);

이건 또 뭐지? 문자열에 왠 메소드 실행? 허 이것 참.

이걸 실행하면 다음과 같이 뜨겠죠? -> This is e epple

일단 따옴표 안에 들어간 건 분명 String이죠.

var str=’This is a apple’;

window.status=str.replace(replace(/a/gi,’e’));

이렇게 하면 상태바에 위와 똑같은 글씨를 띄우겠죠?

음.. 결과는 똑같군요. 이게 대체 뭡니까 이거?

네.. 아무리 상수라도 정의되면 그순간 멤버로 결속됩니다. 예를 들어 문자열을 작성했으면 바로 String 인스턴스 멤버로 들어가고, 숫자를 입력하면 Number 인스턴스 멤버로 들어가는거죠. 에이..설마? 정말입니다.

하지만 주의사항이 있습니다. 일단 아래 예제를 보실까요?

Number.prototype.toUnsigned=function(){return this<0?this*-1:this;}

음.. 일단 숫자에 대한 것들에게 음수를 양수로 바꿔버리는 메소드를 하나 만들었습니다.

자, 이제 실행해보죠.

-1326542.toUnsigned();

실행되나 보세요. 엉.. 멍미? 에러뜨자나???

네.. 숫자는 .도 쓰죠. 소수점으로 쓰죠. 뒤에 변수같은 것들이 들어가면 숫자는 혼란스럽겠죠? 이럴 때 해결 방안이 있다면 바로 괄호입니다.

(-135243).toUnsigned();

자. 이제 오류 없이 잘 뜨죠? 숫자뿐만이 아니죠. 함수도 마찬가지로 주의해야 합니다.

function(){alert(‘a’)}.call();

실행이 되나요? 안되죠? 구문 오류라고 뜰겁니다.

이쇼키가 JSON인지 함수인지 분간을 못하죠.

1번에서 봤듯이 이것도 괄호로 둘러싸야 실행이됩니다.

(function(){alert(‘a’)}).call();

그렇다면 JSON은 되겠지 하겠다 싶은분들. 한번 테스트해보세요.

var a=eval(“{a:’b’,c:’d’}”);

어때요. 실행이 되나요? 안되면 어떻게 하면 될까요? 이것은 숙제로 남겨두겠습니다.

음.. 이팁을 쓰다 보니 어느새 광랜의 밤에 찾아왔군요.

내일도 출근하기 위해 일단 잠을 청해야겠습니다.

자바스크립트의 골때리는 세계는 다음에도 계속될까 모르겠습니다.

그럼 다음에 봐주셈???

글쓴이 : 컴포지트 (public domain license)

composite / 2010년 12월 13일 / 미분류 / 1 Comment

composite / 2010년 9월 4일 / 미분류 / 0 Comments

작은 꿈을 현실로 전세계인들에게 보여줄 수 있는 다락방 서버

흠.. 다락방 서버를 사고 돌린지 어언 3개월이 다되간다.
넷북 크기와 성능으로 그냥 개인적인 사이트를 운영할까 생각하다가 50만원으로 투자한 다락방 서버.
사양은 다음과 같다.

인텔 ATOM D510 프로세서가 탑재된 GIGABYTE GA-D510UD
삼성 DDR2 RAM 2GB 2개
삼성 HDD 2.5인치 5400RPM 500GB 1개

끝.
메인보드는 일단 아톰 프로세서를 “오버클럭”할 수 있다는 매력에 구입을 했다.
하지만 문제는 하필 시피유가 정중앙에 위치한 탓에 쿨러도 중앙에 위치해 있고..
불행중 다행히도 정중앙에 케이스 뜯는 부분이 있어서 그냥 뚜껑 열어버렸다.
그리고 구멍만 나고 거기서 따뜻한 바람이 솔솔~
케이스는 미니케이스를 샀는데.. 시피유 통풍구가 조금 구석에 있었다.
뭐.. 돌리는데 문제는 없다.

그리고 램은 최저가를 부른 아져씨가 있어서 구입을 시도했는데, 원래 중고를 가지고 있었지만, 2개를 요구하자
재고가 없어서 결국 어디 가가지고 줬다. 한개당 51000원. 다른데는 52000~58000… 미안해서인지 한번 부른 가격을 변경안하고
새거를 살 수 있다는 거에 만족했다.
그대신 하드는 노트북용으로 제값주고 샀다. SSD도 생각했지만 서버에 맞는 용량을 봐도, 가격을 봐도 역시나 압박.

첫 세팅할때 원래 시피유 클럭이 1.6GB였는데. 아싸리 그냥 2GB로 오버해버렸다.
그리고 풀가동 했는데 지금도 멀쩡하다.ㅋ

그리고 구입하고 모자른 선은 선 따로 구입해가지고 조그마한 다락방 서버 완성. 내방에 고이 모셔두고 깔아버린 OS는
윈도우 2008 R2. 내가 아직 학생 신분인지라 드림스파크에서 얻은 정품을 거기에다가 깔아버렸다. 당당하게.ㅋ

그리고 닷넷을 공부하고 현재 닷넷 개발자다보니 IIS와 닷넷을 깔았고, MSSQL 깔려고했지만 어째 버티지 못할것 같아서
그나마 좀 가벼운 MySQL을 선택했다. 오픈소스인데다가 물론 공짜고 왠만한 SQL 기능은 만족을 해주니.
거기다가 옛날에 PHP와  MySQL 조합을 써서 그런지 MySQL은 내게 익숙한 DBMS다.
IIS 7.5와 .NET 4.0 그리고 MySQL 등 웹 서버에 필요한만한 요소는 다깔아버리시고.
그리고 드림스파크에서 얻은 비주얼 스튜디오는 거기다 까는 병맛같은 일은 없고 그냥 내 주PC에 까는거다.

그리고 돌려보았다. 조금 느리긴 하지만 만족스러웠다.
근데.. 여기서 과연 SSD로 돌리면 과연 웹사이트 띄우는 속도가 빨라질까? 그런 의문점이 든다.
겨울에 재정이 충분하면 윈도우 부팅용으로 SSD 40~80GB를 좀 투자해서 살려고 했는데
어느날 스팸메일을 뒤지다가 시게이트에서 SSD와 일반하드의 짬뽕버전의 하드디스크를 출시했다.
가격은 500GB에 약 11만원 내외로. 일반 하드보다 2배 비싸지만 SSD에 비하면…..ㅋㅋㅋㅋ풉..살인적인가격보단 낫네.
근데 다락방에 그 하드를 끼우면 내 다락방 서버가 한층 업그레이드 될까? 궁금하기도 하다.
아니면 그냥.. 겨울에 SSD 대신에 질러버릴까? 이런 생각도 든다. 흐음.. 일단 되는데로 운영해보면서 가는거다.

composite / 2010년 8월 11일 / 미분류 / 0 Comments