composite / 2011년 4월 17일 / 미분류 / 0 Comments

composite / 2011년 4월 9일 / 미분류 / 1 Comment

골때리는 자바스크립트의 세계 외전

  1. “string” instanceof String

    결과 : false

  2. [] == false;

    결과 : true

  3. “” == false;

    결과 : true

  4. null == false;

    결과 : false

  5. typeof null

    결과 : object

    뭬야? null도 object의 자손인게냐?

  6. null === Object

    결과 : false

    아버지를 아버지라 부르지 못하고,

    어머니를 어머니라 부르지 못하는 null.

  7. parseInt(’06’); //결과는 6

        parseInt(’08’); // 결과는 0?

    08를 8진수로 착각하는게 아니라 원래 약속이 그렇죠. 08은 곧 8진수니 8은 곶아가 됩니다. 당연한 결과죠.

  8. Number.MIN_VALUE > 0;

    결과 : false

    .. 무슨 십장생이 시베리아벌판에서 귤이나까는 결과가 나오는거지…

    MIN_VALUE 속성은 숫자 중 표현할 수 있는 가장 작은 값을 나타내는 상수입니다.

    근데.. 0보다 크다고? 앙?

  9. typeof NaN

    결과 : number

    숫자가 아닌녀석을 나타내는 상수인데 숫자가 아니면 숫자를 어떻게 찾겠는가?

  10. alert(111111111111111111111);

    결과 : 경고창에 111111111111111110000 이 나옴. 읭?

  11. (function(){ if(false) var window; return window }()) === window

    결과 : false

  12. (“foo” + + “bar”) === “fooNaN”

    결과 : true

    일단 먼저 + 사이에 아무것도 안들어가도 에러안나는게 신기.

  13. NaN === NaN

    결과 : false

    ………….할말이 없습니다.

  14. (x=[].reverse)() === window

    결과 : true

    …ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ


  15. NaN === ‘number’ // true

    Infinity === 1/0 // true

    0.1 + 0.2 === 0.3 // false

    1, 2 은 이해가 가는데 세번째는 뭥미?

    출처 : http://wtfjs.com/ 에서 자바스크립트의 개떡같은 결과가 커뮤니티를 통해 기재됩니다.

    제가 발견한 추가사항

  16. Number.MAX_VALUE instanceof Number

    결과 : false

    왜그럴까요?

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

골때리는 자바스크립트의 세계 번외편

자.. 5탄에 너무 어려워 골때리다는 분이 많아서 오늘은 그냥 번외를 준비했습니다.

오늘은 좀 재밌는 걸 준비했는데요.

자.. 먼저 이걸 보시죠.

mypage.html?page=write&where=isit

음.. 그냥 URL이죠. 그리고 ? 뒤에 질의문이 들어가있죠. 쿼리스트링이라 하지만 우리말로 하면 질의문이잖아요..ㅋㅋㅋㅋ

뭐.. 이걸 서버사이드에선 어떻게 처리할까요?

먼저 PHP요~

$_GET[‘page’];

ASP(.net)요~

VB:

Request.QueryString(“page”)

C#,JScript,J#…:

Request.QueryString[“page”]

JSP요~

…안해봐서.. 댓글로 참조부탁요.

그외에도 CF,Mac,Perl,CGI등등등.. 다채롭죠.

그렇다고 질의문을 내맘대로 꾸미고 싶다. 질의문 전체를 참조하려면 어떻게 해야합니까?

PHP요~

$_SERVER[‘QUERY_STRING’];

ASP(.net)요~

VB:

Request.ServerVariables(“QUERY_STRING”)

C#,JScript,J#…:

Request.ServerVariables[“QUERY_STRING”]

JSP요~

…………………몰라요.

이상 서버단이었습니다.

근데 자바스크립트 강좌인데 왜 난데없이 질의문 가지고 난리입니까?

오늘은 자바스크립트로 질의문 다루는 걸 하겠다는겁니다.

헐..자스도 질의문 다루는 기능이 있습니까?????????????????????????

아뇨. 없어요..자체적으론 없습니다..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

하지만 URL을 가공해서 처리는 할 수 있습니다.

location 객체. 음.. URL을 얻어올때 주로 쓰는 객체이죠. 네..

이 location에 href 속성으로 전체 URL을 얻어올 수 있죠? 파일명부터 질의문까지.

근데.. 이걸 가공하기엔 좀 귀찮고.. 하지만 하늘은 우릴 버리지 않으셧습니다.

앵커를 참조하라고 location 객체에 search 속성을 내려주셨습니다.

이 속성에는 # 뒤에 들어간 앵커. 우리말로하면 책갈피를 보여주지만 ?을 붙인 그 뒤에 질의문도 보여주는 친절함을 선보이고 있죠.

결국 location.search는 server variables의 query_string인 셈이죠.

이제 이걸 다룰 줄 알면 오늘 골때리는 강좌는 여기서 끝입니다…

자.. 먼저, search 속성의 ?부터 제거해보기로 합시다.

var qs=location.search.replace(‘?’,”);

자스의 replace는 기본적으로 정규식의 global 속성을 주지 않는 이상 첫번째 단어만 검색하면 그걸 대체하고 끝내버리는 속성이 있습니다. 하지만 서버단의 replace는 그 반대죠.

어쨌든 substring을 쓰던 replace를 쓰던 ?을 제거하면 일단 질의문을 가공할 준비는 끝입니다. 어떻게 가공할건지는 여러분의 자유에 맡기겠지만, 저는 split을 통해 그냥 쉽게 처리할 생각입니다.

먼저 &가 들어간 단어를 기준점으로 문자를 나눕니다.

qs=qs.split(‘&’);

이렇게 되면 질의문의 갯수만큼 나눠지겠죠. 단순히 &만 나누기때문에 &남용하면 물론 & 갯수만큼
나눠지겠지만 그건 큰 문제가 없습니다. 키=값 쌍만 있는넘만 등록하게 하면 되니까요. 그런다음에 = 기준으로 키=값을 분리해서
왼쪽은 키, 오른쪽은 값 이런식으로 하면 되죠. 그다지 어렵지는 않죠?

split 써도 되고. 정규식씨를 섭외해도 되고… 여러분이 원하는 방식으로 가공해서 처리하면 됩니다. 어때요. 쉽죠?

이렇게해서 querystring 값을 받아오는 함수는 다음과 같습니다.

function getQueryString(key){

  var qs=location.search.replace(‘?’,”);

  if(!key) return qs;

  qs=qs.split(‘&’);

  var qsr=”;

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

    if(!!qs[i]&&qs[i].indexOf(‘=’)>-1){

      var qv=qs[i].split(‘=’);

      if(qv[0]==key) qsr+=qv[1]+’|’;

    }

  }

  qsr=qsr.replace(/|$/,”);

  return qsr.indexOf(‘|’)>-1?qsr.split(‘|’):qsr;

}

만약 하나만 나오면 하나나온 값 문자열을, 복수면 배열로 리턴하게 친절하게 꾸몄습니다.

저 잘했죠?

만약 location과 같이 기억해두고싶다면 Location.queryString을 만들고 내용을 저걸로 집어넣어도 무관합니다.

만약 RewriteMod와 같이 쓰고 싶다면 자스는 ReWrite와 무관하게 URL을 수집하기 때문에 그에 맞게 꾸미면 되겠습니다.

오늘은 그냥 골때리다기보기엔 그냥 그렇다 하겠지만 자스로도 질의문을 받아 처리할 수 있다는 사실에 오늘 재밌는 감동을 얻었군요.

번외편은 여기까지구요. 다음엔 약속대로 골때려서 돌아가시게 해드리겠습니다.

각오하고 그럼 즐코딩하셈.

아참, 덧붙여서 검색창에 js querystring 쳐보셈. 즐비하게 나오는 팁입니다..

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

골때리는 자바스크립트의 세계 완결

실무에서 .NET과 자바스크립트의 조합으로 아주 뻘짓을 하고 있습니다.

닷넷한다면서 왜 별명이 JSPSCHOOL이냐면 ASPSCHOOL 보고 그냥 따라한것 뿐입니다.ㅋ

닷넷한다면서 태요에서 놀지 왜 여기서 노냐고 물으신다면. 지금 이 사이트를 방문하시덩가.

http://www.php-compiler.net/

대망도 아닌 대망의 골때리는 자바스크립트가 오늘로써 마지막 탄이 됐습니다.

오늘 그래서 아주 스펙터클하게 막을 내릴까 합니다. 아주 스펙터클하게 허무한 팁이죠.ㅋ

자바스크립트에서 많이들 다루는 부분은 어느 언어나 마찬가지겠지만 바로 타입이죠.

그러면서 암시적 변환할 때도 있고 명시적 변환할때도 있고 뭐.. 있죠.

오늘은 실무에서 알면 좋은 형변환 팁을 알려드리고자 합니다.

내용의 일부는 여기서도 소개된 팁이기도 합니다. 되새기는 느낌도 되겠죠?

먼저 문자열부터 다뤄보도록 하겠습니다.

일단 문자열은 뭐 많이들 쓰죠.어느 타입이나 문자열로 얼마든지 형변환 가능하죠.

그렇다고 해서 bool.replace(‘fa’,’tu’) 이렇게 하면 당연히 메서드 없다고 오류 납니다.

문자열은 암시적 변환은 불가능하니 당연히 명시적으로 형변환을 해야겠죠.

일단 자바스크립트에서 문자열로 형변환하는 내장 메서드는 toString() 입니다.

네. 문자열 클래스에도 toString()이 있습니다. 그래서…

‘string’.toString().toString().toString().toString().toString().toString().toString() …

이렇게 하면 변함없이 ‘string’이 출력되죠.

자바스크립트에서는 + 연산자에 앞 또는 뒤에 문자열이 들어가면 게임오버입니다. 바로 문자열로 변환해버리죠. 그래서 + 연산자를 숫자와 혼용하려 쓰려면 괄호를 씌워줘야 합니다.

이건 당연한 규칙이니 다들 주의하고 있겠죠. 그래서 이렇게 형변환하면 되겠습니다.

var a=false;

var b=a+”;

이렇게 하면 a는 어쩔수없이 toString() 메서드를 작동시켜 해당 타입에 맞는 문자열 값을 보내줍니다.

var a;

var b=a+”;

이렇게 하면 어떻게 될까요? 따로 무슨 말이 필요할까요. 그냥 undefined 나오는거죠. 거기서 undefined 란 이 문자열을 이제 문자열로 취급하여 컨트롤을 시작합니다. 그래서!

var a;

var b=a+”;

alert(b==undefined);//false

즉, 아무리 null이던 정의 안하던 문자열로 변환하는 순간 신세계(?)가 펼친다는 점 유의하시고 형변환을 하시기 바랍니다.

참, 그리고 가장 원시적인 객체 object 객체에는 toString 메서드가 있습니다. 그래서 어떤 타입이나 클래스던
모두 문자열로 표현하는 toString 메서드가 있죠. 익명 객체(JSON) 같은거? 일단 toString()의 기본 본문은
[object]를 출력하는게 그 목적입니다. 하지만 재정의를 하면 원하는 문자열로 출력할 수 있습니다. 내장객체는 대부분 재정의를
해놨죠. Date 객체 생성 후 toString 하면 날짜가 나오는 식으로요. 물론 직접 정의하거나 만든 객체도 재정의
가능합니다. 그냥 toString 멤버를 붙이고 함수로 만든 다음에 원하는 문자열 값으로 반환하면 됩니다. 별거 아니죠?

부울값

부울값은 true와 false 둘뿐입니다. 참과 거짓을 따지는 원시적인 타입이죠.

자바스크립트에서는 다른 타입을 부울로 따지려면 어떻게 해야 하는지 먼저 알아볼까요?

String : 빈 문자열이나 null은 false, 값있으면 true

Number : null이나 0이면 false, 그 외 숫자는 true, NaN이면 false, 하지만 무한상수 Infinity는 true.

그 외 객체 : 객체 본문이거나 객체 인스턴스가 생성되면 true. null이거나 선언 안되면 false.

뭐.. 그닥 흔히 쓰고 중요한 약속인거죠. 이걸 암시적으로 형변환을 해도 상관은 없습니다.

이런식으로요.

var a=’b’;

if(a){alert(a);}else{alert(‘뭥미’);}

네. 맞습니다. 기본적으로 그렇게 되있긴 하죠.

하지만 이건 약속에 의한 조건식일 뿐, 그대로 다른 곳에 갔다 쓰기엔 좀 그렇죠.

자바스크립트에서의 암시적 변환은 “잠시뿐” 이란 성격입니다. if문 같은 곳에는 위와 같은 약속을 정의해서 참과 거짓을 따지고 그 후로는 다시 자신의 타입으로 작동을 하기 때문이죠.

그렇다면 참과 거짓의 여부를 재대로 저장할 수 없나요? 당연하죠.

그래서 요리왕 비룡에서 요리를 맛볼때의 느낌을 살려서 명시적으로 형변환을 하면 됩니다.

var a=’b’;

if(!!a){alert(a);}else{alert(‘뭥미’);}

이렇게 하면 완전한 부울값으로 조건식을 체크합니다. 그리고 부울 변수에도 당연히 써먹을 수 있고, == 같은 논리
연산자에서 부울값으로 작용합니다. 그래서 피연산자가 어떤 타입이던 일단 잠시동안 부울값으로 암시적 변환 후 논리를 계산하게
되는거죠.

숫자

변수로 태어나서 재대로된 형을 만나보지 못하고 활동하다 지는게 바로 자바스크립트 변수입니다. 문자열로 갔다가 숫자로 갔다가 배열로 갔다가 왔다갔다 할수 있으니까요.

뭐.. 그런 등의 지나친 유연성이 자바스크립트의 매력이기도 하죠.

문자열 안에 있는 숫자를 변환하려면 parseInt나 parseFloat을 씁니다. 일단 문자열이 숫자로 시작하면 해석을
시작해 숫자로 변환해주죠. 중간에 문자가 들어가면 거기까지 해석합니다. 만약 문자가 첫글자부터 있다? 그럼 없는줄 알고 NaN이
나옵니다. 문자열 없으면 당연히 해석 못하죠.

그래서 ID 체크에 영문자가 먼저 들어갔는지 여부를 체크하는 조낸 간단한 식이 여기있습니다.

if(parseInt(value)!=NaN){

    alert(‘첫번째 문자는 반드시 영어로 해 주삼.’);

}

숫자는 여러가지 연산자를 쓸 수가 있습니다. 기본적인 사칙연산부터 증감 연산자도요.ㅋ

그 중에서 + 연산자는 문자열에도 써먹기 때문에 문자열이 중간에 들어가면 문자열이 우선적으로 먹혀들면서 피연산자가 모두 문자열로 변환하죠. 그렇게 되면 연산은 개뿔이 되는 거죠.

하지만 + 외의 연산자는 숫자에만 있습니다. 그래서 –/ 이 세개의 연산자가 들어가면 문자열이 아닌 숫자가 우선시
되는겁니다. 그래서 문자열이 들어가면 그 문자열을 숫자로 해석하는 시도를 합니다. 숫자가 아니면? 당연히 NaN이 나옵니다. 만약
문자가 숫자 연산에 중간에 들어갔다? 연산 다 집어치우고 NaN이 나옵니다. 숫자는 암시적 형변환은 없습니다. 명시적으로
해줘야죠. 이렇게요.

‘123’-0 //123

‘456’
1 //456

‘789’/0 //Infinity

쉽죠? parseInt 언제 다씁니까?

그리고 숫자는 양수와 음수가 있죠. 피연산자가 없는 + – 연산자는 곧 이넘은 숫자니 숫자로 양수와 음수로 표현해달라
입니다. + 연산자의 경우 피연산자가 문자열이면 문자열부터 합쳐버리지만, 피연산자가 없으면 얘는 그때부터 숫자인생을 펼칠 수
있습니다.

그래서 이렇게 명시적 형변환을 해도 되는거죠.

+’123′ //123

-‘456’ //-456

그리고 부울값. 아까도 말했듯이 0이면 false, 그 외 숫자는 true인거 아시죠?

이걸 역이용해서 숫자로 표현할 수 있습니다. 명시적 형변환을 이렇게 합니다.

+true //1

+false //0

-true //-1

-!false //-1(==-true)

이렇게 허무해서 골때리는 팁을 마무리로 골때리는 자바스크립트의 세계 이것으로 마치도록 하겠습니다.

1탄부터 나오고 머리 지끈거리면 번외편 나오다가 며칠 꿇다가 이렇게 10탄까지 여기 사이트에 게시를 하고 나니까 속이 후련한건지 아닌건지.

지금까지 골때리는 자바스크립트를 봐주셔서 감사합니다. 많이 골때리셨나요? 아니라구요? 그러면 저한테 오시면 제가 골을 때려 드립니다.

너무나도 획기(?)적인 스크립트 언어인 javascript. 이녀석이 Ajax(AJAX로 쓰면 바보취급받습니다.
그럼나도여태까지 바보였음ㅋ) 기법이 소개된 이후 이 녀석이 겨우 부가적인 언어에서 어플리케이션을 만드는 하나의 언어로 순식간에
격이 올라간 언어도..ㅋㅋ 그래서 응용 프로그램에서도 가끔 스크립팅 언어로 쓰기도 하며(그렇다고 ActionScript는
아닙니다. 자바 기반이죠.) JSON이 XML보다 간단하고 가독성이 쉬운 하나의 데이터 체계를 만들어서 웹과 응용의 벽을 깨고 참
위대한 스크립트 언어로 급부상한 javascript는 언제 끝나냐구요? 웹이 사라지지 않는 이상 이녀석도 사라지지 않을겁니다.
그렇구말구요.

이글쓰느라 제가 골때립니다.ㅋ

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

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

오랜만이군요. 자. 다시 골때리는 자바스크립트의 세계가 돌아왔습니다.

오랜만에 돌아온 만큼 오늘은 조금 골이 살짝 때리는 팁을 드리도록 하겠습니다.

HTML5가 성행하기 시작하면서 새로운 태그와 새로운 속성이 우후죽순 나오고 있습니다. 그런 만큼 크로스 브라우저에 대한 노력은…

굳이 안해도 될것같긴 하겠지만ㅋ

배열에 push란 함수가 있는지 없는지 확인해보기 위해서는 몇가지 방법이 있겠죠.

!![‘my’,’name’,’is’,’array’].push

!!Array.prototype.push

‘push’ in [‘me’,’too’]

‘push’ in Array.prototype

1번꺼는 만들어진 배열에 push란 메서드가 있나 확인해보는 거고

2번꺼는 배열 동적 메서드에 push가 있는지 확인해보는 거고,

3번꺼는 만들어진 배열에 push란 메서드가 있나 확인해보는 거고

4번꺼는 배열 동적 메서드에 push가 있는지 확인해보는 거죠.

어때요. 참 쉽죠?

다들 표정이 왜그래요? 자바스크립트로 배열만드는게 쉼표하나빠져서 배열 다뒤지는사람처럼?

‘push’ in [‘me’,’too’] 이건 뭥미?

in 연산자가 무엇일까요?

in 키워드는 해당 객체에 키 또는 하위 요소가 있는지 알아내주는 녀석입니다.

in 키워드는 주로 이럴때 쓰죠.

for(var x in object) …

자바스크립트를 시작할때쯤 반복문 배울때 한번씩은 배워봤을겁니다.

여기서 주로 JSON 키를 얻거나 특정 객체의 속성을 검색하는데 주로 쓰였죠.

네 맞습니다. 반복문 외에도 쓸거리는 있죠.

근데 왜 쓰는 방법이 ‘string’ in object 인데 속성이름을 문자열로 할까요?

반복문을 쓰다보면 받아오는 변수는 키를 문자열로 받죠? 그거와 똑같은 효과입니다.

그럼 어떨때 쓰는 게 좋을까요?

일단 !![‘array’].push 보다는 ‘push’ in [‘array’] 이게 거 가독성이 있어보이죠.

거기다가 반환되는값은 bool값이라 true나 false기 때문에 속성 찾는데 있어서 안전하죠.

즉, 속성 검색하다 쓸데없는 현상으로 오류날걱정은 전혀 안해도 된다는 겁니다.

이상입니다. 오늘은 경험자들에게 골때려서 되새기고, 초보에게는 골때려서 또다른 기능을 얻어가는 골때리는 자바스립트의 세계.

다음에는 더욱더 골때려서 머리 깨지는데 더욱 더 도움이 될 수 있는 컨텐츠로 찾아뵙겠습니다.

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

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

뭐. 8탄이라. 점점 골때려져 가겠는데 이게 웬 8탄이냐..

이번엔 어려워서 골때릴 것 같다구요?

뭐.. 아무렴 어때요.ㅋㅋ

제가 6탄에서 스크립트 난독화에 대해 설명을 한 적이 있었습니다.

그기서 난독화 테크닉에 괄호한테 십쇼키라고 욕했죠.

ㅋㅋ 근데 가끔씩 유용합니다. 왜그럴까요?

그전에 있어서 괄호가 어디어디 쓰이는지부터 보도록 하죠.

var s=0;

for(i=1;i<=100;i++){

  s+=i;

}

alert(s);

뭐. 일단 쉽게 1부터 100까지 더하는 반복문입니다.

그렇다면 이걸 일반적인 다른 방법이 있다면,

var s=0,i=1;

while(i<=100)

  s+=i++;

alert(s);

그럼 함수는..

function(a,b){

  return a+b;

}

그리고 또는 1탄에서 언급한 기술..

(function(a){alert(a);})(‘안녕’);

아니면

alert(({a:’b’,c:’d’}).a);

괄호는 우리 코딩이나 프로그래밍 생활에 정말 유용하게 쓰이는 녀석입니다.

자 그렇다면, 6탄에서 본적 있죠?

var a=(b=’이런’,b+’젠장’);

alert(a);

이 스크립트를 실행하면 이런젠장이란 글씨가 뜹니다.

a는 함수인가요? 아닌뎁쇼.

그럼 뭡니까? 몰라요. 그렇다는데요?

저보다 자스천재님이 가르쳐주실지도…ㅋ

어쨌든, 난독화에 쓰이기도 하고, 일회성도 있기 때문에 잠시 써먹는 식으로도 그만이죠.

예를 들어,

while(Math.round(Math.random())){

  a=1;

  window.status+=a;

}

이 a는 어자피 while 문 안에서만 쓸 거 아닙니까? 그럼 그냥 이렇게 하세요.

while(a=1,Math.round(Math.random())){

  window.status+=a;

}

어째보면 좀 의미가 있군요. 여기서 지역변수 a는 1로 정의했다고 보이기도 하고,

그리고 조건문은 뒤에 썼죠. 실제로 while 문이 인식할 건 마지막 인자니까요.

6탄에서도 말했지만 (1,2,…,n) 이런 괄호 연산자 실행시 결과는 무조건

마지막에 쓴 n이 나옵니다.

그래서 이걸 활용한 별 희한한 식이 나오기도 하죠.

v.push((c=arguments[i],l=c.length>4?2:1,parseInt((h=c.substr(1+j*l,l),h+(l>1?”:h)), 16)));

이걸 제가 직접 작성했다고 자랑하긴 좀 뭐하죠.

이걸 풀어보면 어떻게 될까요? 풀어봅시다.

c = arguments[i];

l = c.length > 4 ? 2 : 1;

h = c.substr(1 + j * l, l);

h = h + (l > 1 ? ” : h);

v.push(parseInt(h,16));

이렇게 나오는군요.

오늘 골때리는 자바스크립트는 여기까집니다.

괄호 연산자로 잠시동안 쓸 지역변수를 정의하거나, 아니면 잠시 해야 할 연산을 한 다음에, 마지막에 진짜 연산식을 넣는 가방 역할을 하는 이 괄호 연산자.

그다지 쓸데는 없습니다. 왜냐하면 이건 코드 축소하거나 난독화에 쓰이거든요.

거기다가 이건 고급 테크닉입니다. 이거 작성하는데 에러 잡기 정말 힘들겁니다.

먼저 코드를 어떻게 진행해 나갈지부터 확실히 잡힌 다음에 리팩토링하는 게 좋겠죠.

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

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

안녕하십니까? 먼저 누구누구의 결혼을 축하드립니다. 낄낄.

자, 오늘 알아보는 골때리는 녀석은 바로… 이번에도 프로토타입입니다.

내장 객체들. Date, String, Function, Number…등등

이들은 객체 자체도, 그리고 그 안에 프로토타입도 모두 “원시 객체”죠.

저놈과, 그리고 저 프로토타입을 텍스트로 뜯으면 이렇게 나오죠.

function(){

    [native code]

}

이거 뭔 개소리야?

어쨌든, 이녀석들이 어떻게 되있는지는 알 바는 아니지만,

하지만 이 원시객체도 복사해서 쓸 수 있는 기적을 우리에게 선사해 줬습니다.

먼저, 함수를 만들때부터 보도록 하겠습니다.

함수를 만들다 보면 여러개의 인자를 받아서 처리해야 하는 경우가 생기겠죠.

뭐 예를들어 add(1,2,3,4,5,…,100); 이런 함수가 있다고 칩시다.

1부터 100까지 인자로 작성하는 병맛은 없겠지만, 가정입니다.ㅋㅋ

그러면 이렇게들 작성하겠죠.

var a=0;

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

  a+=arguments[i];

}

return a;

네. 정석입니다. 뭐 희한하게 코드를 작성해도 되지만, 정석은 정석입니다.

하지만 이런 경우로 작성하다 보면 아마 대부분 이렇게들 생각할 겁니다.

“아하, arguments 지역변수는 배열이었구나…”

이렇게 하면서 arguments instanceof Array 해봤더니 false.

굳이 그거 안해도 arguments.concat(new Array(101,102)); 해봤더니 에러.

정작 length 속성은 있는데.. 이게 다… 뭐야 이거.

배열인지 꼽사리객체인지 이거 영.. 이렇게 실망하셨던 분들 많으실 겁니다.

하지만 요즘 그런걸로 머리아파할 필요 없잖아요.

우리 마음속에 라이브러리가 있잖아요~

라이브러리로 한줄 코드하는 시대에 사는게 우리가 행복한겁니다~

YMCA~

prototype 에는 Object.extend 함수로,

jQuery에는 $.extend 함수를 통해 객체를 확장합시다.

Object.extend(arguments,Array.prototype);

이렇게 하면 Array의 동적 멤버들을 arguments로 옮겨지게 됩니다.

이렇게 하면 arguments는 배열의 역할을… 수행할 수 있을까?

아래에 제가 콜백함수로 댓글을 단 거 보셨습니까?

여기 그 증명이 있습니다.

function callback(a, b) {

    alert(a + b);

}

function caller(func) {

    this.called = ‘you’;

    if (func.apply === Function.prototype.apply) {

        arguments.shift = Array.prototype.shift;

        arguments.shift().apply(this, arguments);

    }

}

caller(callback, 1, 2);

어자피 shift 함수만 쓸거니까 이 경우는 shift 멤버에 배열 shift 동적 함수를 넣었습니다.

예. 이건 분명히 원시 객체죠. 제가 아까 말했지만 원시객체는 복사 됩니다.

이미 많은 분들이 알고 있겠죠? 많이들 원시객체들 맘대로 조종 가능하다는거.

그래봤자 해당 페이지 또는 그 자바스크립트 파일 내에 한정된다는 거지만.

배열 shift 함수는 배열의 첫 자리 객체를 빼서 밀고 그 첫자리 객체를 반환하는 함수입니다.

만약 shift 함수의 리턴값을 못받았다면 그때부터는 배열 첫자리에 있던 객체는 영영 안녕~ 이렇게 되는거죠.

어쨌든, 이 객체에 shift 함수를 실행하니까.. 되네요?

이거 뭐.. 너 배열이었어?

결국 arguments 변수는 배열이긴 합니다. 배열 역할은 하지만…

배열아닌 배열… 헐… 뭐지…

자, 결론적으로 말하자면 원시 객체를 활용해서 부족한 객체를 2% 채울 수 있다는

이 엄청나지도 않은 별거 아닌 사실이 골때리기 때문에 이렇게 팁으로 올렸습니다.

다음 골때리는 자스는 어떻게 해면 골때릴까 연구하는 쪽으로 해보도록 하겠습니다.

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

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

흠. 오랜만에 6탄이 왔군요.

요즘들어서 실무들어 보안에 대한 관심도 높아진 가운데.

오늘 시간에는 그런 부분을 좀 다루고자 합니다.

오늘은 생각할게 많아서 그런지 왜이리 생각할게 많아지는지 모르겠군요.

자바스트립트의 단점부터 알아봅시다.

자바스크립트에서 가장 눈에 띄는 단점이 뭐라고 생각하십니까?

인터프리터 언어?

어디서 굴러떨어진 객체지향?

가장 두드러지는 단점은 아무래도 “소스가 공개되어 있다”는 것이죠.

원하지 않는 정보를 클라이언트상에서 가공하려고 해도 소스 분석 하면은

어떤 데이터를 가공하는지 뽀록나는데.. 막상 하자니..

그러니 서버 언어로 눈을 돌리게 되는거죠.

또한, 자신이 고생해서 만든 자바스크립트를 어떤 이가 훔쳐서 자기 것인양 사용하는 행위.

이거 참 골치가 이만저만이 아닙니다.

그렇다고 저작권을 명시하자니, 누가 배껴서 패킹질하고 지꺼라구 우기면 이거 답도 안나오고..

AJAX에서 가장 두드러진 점은 바로 보안이라는 것이죠.

왜냐하면은 클라이언트에서 정보를 주고받는데. 허점이 드러나 서버 언어를 간파하면 어떡하나 이런 고민들 에젝스 만지는 분들이라면 한번씩 고민해봤을 문제입니다.

거기다가 사용자 아디와 비번을 요구하는 경우에도 이거 그대로 드러나니 이거 참..

이런 고민을 해결하기 위해 dean edwards가 만든 Javascript Packer가 있습니다.

http://dean.edwards.name/packer/

네.. 물론 자바스크립트 압축을 하지만 base62를 통해 당최 뭔소린지 난해한 코드로 패키지화를 시키는 것이죠. 다들 한번씩을 써봤을 겁니다.

이렇게 해서 자신이 만든 스크립트를 좀 알아보기 어렵게 해서 자신의 지적 재산을 지키는 거. 별로 어렵지 않게 되기는 개뿔 어느새 언팩하는 툴도 나왔습니다.

http://jsbeautifier.org/

이녀석은 개행문자와 쓸데없는 스페이스 등등을 제거해서 최적화했지만 보기 난해한 자바스크립트를 보기 쉽게 바꿔주는 역할을 합니다.

하지만 여기서 이녀석은 unpack 기능까지 추가해서 패킹한 자바스크립트가 보안에 좋다고 생각한 로망을 깨버리고 말았습니다. 원망스럽죠?

ㅋㅋ 나온지 좀 된녀석이라 이미 원망은 개뿔이라고 말하는 분도 있겠죠.

아무래도 자바스크립트를 난독화해서 자신의 재산을 지키고 싶은 갈망은 있겠죠.

그래서 자바스크립트를 난독화해서 알아보기 조낸 어렵게 만드는 툴이 생겼죠.

http://javascript-source.com/

http://www.jasob.com/

근데 니네들 상용툴이야 아오……………………………………………

네.. 금전적으로도 이거 참 다가가기 힘든 난독화 툴.

근데 효과는 있다고 하는군요. 저걸 이용한 자바스크립트 도구 중에 이게 있으니까요.

http://www.amplesdk.com/

소스를 들여다보면 패킹질한것처럼 보이지만 한번 풀어보세요 풀리는지.ㅋ

어쨌든, 이렇게 지적 재산권을 지키기 위한 자바스크립트의 몸부림.

하지만 개인적인 재산을 보호하기엔 한계가 있겠죠?

하지만 걱정하지 마세요. 무료로 자바스크립트를 난해하게 만드는 툴은 다음과 같습니다.

YUI Compressor(http://developer.yahoo.com/yui/compressor/)

Dojo ShrinkSafe(http://dojotoolkit.org/docs/shrinksafe)

Open Source Javascript Obfuscator(http://www.usefulsnippets.com/open-source-javascript-obfuscator.html)

셋 다 자바를 사용합니다. 위에 2개는 최적화도 시켜주지만 난독화도 시켜주기 때문에 포함을 시킨거죠. 세번째껀 말 그대로 난독화 기능을 수행하는 도구입니다.

네. 맞습니다. 난독화한다고 해서 아주 징글징글한 해커라면 뚫릴 수도 있겠죠. 세상에 완벽하게 가릴 수 없는 방법은 없습니다. 커텐에 누군지 알 수 없는데 불을 키고 나니 여자라는 것을 알 수 있는 것처럼 말이죠.

마지막으로, 자바스크립트를 난독화하는 테크닉으로 끝을 맺겠습니다.

1. 객체를 동적으로 부여

객체를 정적으로 window.onload 이런 식으로 정의 및 선언도 할수 있겠지만,

window[“onload”] 이런 식으로도 정의 및 선언도 가능합니다.

이 방식을 이용해 이런 식으로 난해하게 만들 수 있습니다.

var aeg2=”sty”;

var wgbe32=”le”;

var aegw3=”back”;

var asgage=”ground”;

element[aeg2*wgbe32][aegw3+asgage]=”black”;

즉, 엘리먼트 스타일 중 배경을 색으로 까맣게 만드는 건데,

이런 식으로 뭔소린지 난해하겠끔 만들 수 있습니다.

2. 괄호 십쇼키.

괄호를 사용한 훼이크를 통해서도 만들 수 있습니다.

var a=(“ㄱ”,”ㄴ”);

이렇게 쉼표로 구분해서 만들 수 있습니다. 거짓말같으면 한번 실행해보세요.

결과는 어떻게 나올까요? 네. “ㄴ”이 나오겠죠?

당최 무슨 식이라고 하기도 난해한데 저렇게 쉼표로 구분한 식을 나와봐야 결국 출력되는건 마지막에 지정된 값 뿐입니다.

이걸 응용해서 이렇게도 만들 수 있습니다.

var where=(odi=”school”,”php”+odi);

그럼 where는 phpschool 이라는 엏헣헣한 결과가 나옵니다.

3. 삼항 연산자의 훼이크다 병맛들아!

삼항 연산자. 이거 그냥 보면 뭐가몬지 좀 힘들겁니다.

var a=b?”a”:”b”;

이걸 이용해서도 훼이크를 만들 수 있겠죠.

var where=((12e9>4e8)?”php”:”asp”+”server”)+”school”;

물론 결과는 phpschool 이 나옵니다.

이걸 응용하면 좀 더 난해한 스크립트를 만드는 기술이 나오겠죠?

그걸 활용해 리팩토리한다음에 여러 언어를 통해 템플릿 만들어서 만들어도 되고…

이렇게 잘만 하면 사용자가 절대적으로 뚫지 않는다는 보장은 없지만

난해하게 만든 코드를 풀다가 중도 포기할 수도 있다는 거죠. 심리전입니다.

정말 힘들긴 하지만, 여러분이 프로그램으로 먹고살고자 한다면,

아무래도 이런 과정도 거쳐야 할 부분이 아닐까 싶습니다.

세상에 그 어떤 것도 뚫는 창도 없고, 세상 어떤 것도 막는 방패는 없지만,

점점 강해지면 뒤따라 점점 강해지듯이 이런 세상에서 우리는 살고있죠?

이렇게 되면 골때려서 돌아가실 것 같은 약속은 한 셈이 되겠습니다. 응?

아차, 그리고 웹딜 PHP 보안 만드신 분께 죄송한데 말씀드려야겠습니다.

클라이언트쪽에서 PHP 암호화 복호화 하려고 만드신 자바스크립트 있죠?

제가 뚫어보니 그냥 뚫리더군요. 좀 더 견고한 난독화가 필요하겠습니다.

링크 #1은 자바스크립트 난독화 기법이 소개된 글이고,

링크 #2는 무료로 즉석에서 자바스크립트를 난독화해주는 툴입니다.

License : 해당 링크에 대한 라이센스에 따릅니다.

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