마이크온블로그닷컴 ::Just Quit your Job!::

RegExp.test() - Boolean 값을 리턴
RegExp.exec() - 매칭된 값을 Array로 리턴
String.split() -
String.match() -
String.replace() -
String.search() -

var str = "테스트 테스트1 테스트2 테스트3 테스트4";
var regx = /테스트\d/;

regx.test(str);   // true
regx.exec(str);  // ["테스트1"]

var str = "테스트 테스트1 테스트2 테스트3";
var regx = /(테스트\d)/;

regx.test(str);   // true
regx.exec(str);  // ["테스트1", "테스트1"]
RegExp.$1;       //  "테스트1"    - test(), exex() 모두 같음.

var str = "테스트 테스트1 테스트2 테스트3";
var regx = /(테스트)\s(테스트\d)/; 

regx.exec(str);   // ["테스트 테스트1", "테스트", "테스트1"]

var str = "테스트 테스트1 테스트2 테스트3";
var regx = /(?:테스트\d)/;

regx.test(str);   // true
regx.exec(str);  // ["테스트1"]
RegExp.$1;       //  ""    - test(), exex() 모두 같음.

var str1 = "No pain, No gain!";
var str2 = str1.replace(/ain/g, "XXX");
// str2 = "No pXXX, No gXXX!"

var str = "테스트 테스트1 테스트2 테스트3";
var regx = /(테스트\d)/g;

regx.exec(str);  // ["테스트1", "테스트2", "테스트3"] 일까요???????

var str = "테스트 테스트1 테스트2 테스트3";
var regx = /(테스트\d)/g;

regx.exec(str);  // 1번 실행, ["테스트1", "테스트1"]
regx.exec(str);  // 연속해서 두번 실행, ["테스트2", "테스트2"]
regx.exec(str);  // 연속해서 세번 실행, ["테스트3", "테스트3"]
RegExp.$1;  // "테스트3"

imeMode 속성은, IE 전용 속성인데,
FF3 에서부터는 해당 속성을 지원해주는듯하다..
https://developer.mozilla.org/En/CSS/Ime-mode

하지만.. 테스트는 안해봤다. 테스트 해본 사람들에 의하면,..
아직 안된다고 하더라..ㅎㅎ

그래서 좀더 크로스 브라우징이 가능한 방법이 없을까?
생각하다가.. Flash 인터페이스를 이용하는건 어떨까 생각해봤다.
아래 링크를 참조하고..
http://kimkijeung.com/entry/IME-Input-Method-Editor

위 링크처럼 가능하다면, 플래시컨테이너 하나 로드해놓고,
인터페이스 함수만들어서, 자바스크립트로 해당 함수를 호출하면
간단히 해결될것같은데..

오늘 집에가서 한번 만들어봐야겠당..ㅋ

반대로, FF에서 한글을 입력 안하게 하는 방법도 있을수 있겠다
편법이지만..
http://blog.hooriza.com/1049

앞으로 오픈베타까지 5일 남았다.
그동안 반 미친듯이 코드만 짜다가, 요즘은 막바지라 한결 여유를 찾은듯하다.
어제부터 코드 프리징을 위한 막바지 최적화 작업에 들어가고 있다.

오늘은 여유롭게, 그동안 못한 블로깅을 하면서, 얘들은 먼 얘기를 하고 있을까..
검색을 좀 해봤다. ㅎㅎ
많은 사람들이 기대반 우려반, 그리고 일단 까고보자 반, 아무생각없다 반인거 같다. ㅎㅎ
머 결국 어느정도 관심은 있다 정도로 정리가 되는군.
머 일단, 각설하고...

개편되는 메인페이지 로딩속도를 최적화하기 위해 고민한 것들을 공유해본다.

사용자에게 있어서 첫 페이지 로딩속도는 굉장히 크리티컬한 요소다.
그렇기 때문에 최적화 작업을 하면서, 가장 신경썼던 부분이 바로 요청회수 줄이기였다,

클라이언트 영역에서 요청횟수를 줄일수 있는 방법은 3가지로 볼수있겠다.
외부링크로 걸려있는 css 파일 갯수 줄이기..
외부링크로 걸려있는 js 파일 갯수 줄이기..
그리고, 이미지 갯수 줄이기..

하지만, 실상 요청횟수 줄이기가 만만치는 않았다.
특히, 이미지가 주가 되는 대부분의 포탈이나 웹사이트의 경우는 정말 불가항력에 가깝지 않을까?

그래도 뭐 어떻게든 요청횟수를 줄이기위해, CSS Sprite도 적용했지만, 접근성 문제로 인해,
전면적으로 CSS Sprite을 적용할수는 없었다.
"CSS Sprite은 의미없는 배경 이미지에만 적용할 것을 권한다."
CSS Sprite은 검색을 해보면, 아마도 구글 코리아 메인 페이지의 애니메이션 효과를 예제로 들고 있는 글들을 쉽게 접할수 있다. 바로 구글 코리아가 적용한 애니메이션 효과가 대표적인 의미없는 배경이미지가 되겠다.
 
여기엔 단순히 접근성 문제만은 아니고, 대부분 캐시 서버에 이미지를 올려놓기때문에, 운영이슈도 함께 고려되어야한다. 이미지에 수정사항이 생기면, 전체 그리드 이미지를 새로 업로드하고, 경로를 수정해줘야한다. 안그럼 캐시된 사용자의 브라우저에선 제대로된 이미지를 볼수없을테니 말이다. 이럴때마다, 정말 구글과 같은 텍스트 기반의 웹사이트들이 어찌나 부럽뜬지..ㅎㅎ
그러나 , 여기는 한국이고, 구글이 우리회사도 아니다! ㅎㅎ

한편 모듈별로 작업하면서 크고작은 최종 js 파일의 갯수는 총 20개나 됐다.
물론, 배포툴을 이용해 파일을 2개로 합쳤고, 압축을 하지 않았을 경우, 대략 200KB 정도의 크기였다.  그리고 압축을하고, 아파치 gzip 모듈을 적용하면, 대략 40KB 정도의 크기가 나왔다.
요청횟수는 1/10로 줄였고, 파일크기는 대략 1/5 정도로 줄였다.

과연 이렇게 최적화한 결과는 어떠했을까?
FF3 의 FireBug 를 통해서, 대략적인 로딩 시간을 비교해봤다.

[그림으로 넣으려고 했으나.. 귀찮아서 생략하고 대략의 결과는 다음에...ㅋㅋㅋ]

파이어 폭스 일명, FF 로 통하는 이 브라우저에는 엄청난 디버거 툴이 있다.
바로 FireBug 라는 놈인데, 플러그인으로 붙어서, 갖가지 일을 해준다.

내가 이제까지 써본 디버거 중의 최고는 단연 비쥬얼 스튜디오 2005 였지만,
브라우저라는 특이한 상황에서는 역시, FireBug 만한게 없는거 같다.

반면, MS 계열의 인터넷 익스플로러는 스크립트 디버거 라는 놈이 존재한다.
사실 스크립트 디버거는 쓸모딱지가 없고, 스크립트 에디터라고 오피스 프로그램에 탑재된 놈이있다. 이것을 깔면, 약간은 비쥬얼 스튜디오 틱한 디버거 환경을 사용할수있다.

머, 내가 오늘 왠만한 UI 개발자라면, 다 아는 얘기를 꺼내놓고 싶어서 떠드는건 아니다.
그냥 오늘 하루종일 삽질한, 그 민감한 사안에 대해 얘기해보고자한다.

당신의 주무기는 무엇입니까?

나는 주로 IE6 기반에서 개발을 시작한다. 왜냐면, IE6이 가장 많은 브라우저 점유률..
특히 우리나라에서는 거의 95% 이상의 IE계열이고, 그중에서 IE6이 또 가장많은 점유률을 찾이 하고 있으므로, 어떻튼간에 난 IE6을 지원해야하는 수밖에 없다. 그게 내가 하는 일이니까..

그런데, 요며칠, 그놈의 IE8 때문에, IE8 beta2를 깔고 나면서 부터, 평소 하던 개발 스타일에 변화가 생겼다. IE8에 엄청난 브라우저 버그들을 탑재하고 있어서, 아무리 좋은 개발툴을 IE8이 기본으로 장착하고 있어도, 사용을 할수가 없었다.

그래서, 어쩔수없이.. 주무기를 FireBug로 갈아탈수밖에 없었다. IE8을 깐이상 지우기전까지는 IE6으로 돌아갈수도 없었다.

파이어폭스 과연 얼마나 똑똑한가?

그렇게 한참을 개발하고, QA에 임박한 상황이다. 그러나...그런데.. 흐흑...
FF 계열에서 잘 돌아가던 놈이, IE6에서 돌아가지 않는다. (결국 IE8은 지워버렸다..)
이놈때문에 하루 종일 삽질했다. -_-

결론, 문제는 이놈의 FireFox 가 너무나 똑똑해서,.. 혹은 반대로, IE가 너무나 민감해서..
라는 결론이 난다.
즉, FireFox에서는 대표적으로 아래와 같이 배열의 마지막에 콤마를 찍어도 문제가 없다.

배열 = [  A, B, C, D, ]

하지만 위처럼 마지막 인덱스에 콤마를 찍어버리면, IE에서는 어김없이 에러는 내버린다.

이런 특성, 어떻게 봐야하나? 누가 더 좋다고 할수있나?...
저 콤마때문에 빈번히 삽질을 하는경우가 많다. 특히나, JSON으로 통신을 하다보면,
서버쪽에서 실수로 저런 콤마를 하나 넣었을경우, 그 사실을 모르는 우리들은 하루중일 원인을 파악하느라.. 삽을 들수밖에 없다.

두번째,..
비슷한 내용인데, 이번에 태그와 관련이 있다.

파이어폭스에선, 아래와 같이 사용해도, 특별한 문제없이 랜더링을 해준다.

<a href="#" class='nvc_happy ><span></span>이거 문제 없어요.!!</a>

하지만, IE에서 위와같이 쓸경우, 역시나 에러는 아니고, 랜더링을 제대로 못해준다.
왜냐,.. class 이름을 적을때, 닫는 싱클쿼트 하나가 빠져있기 때문이다.

FireBug로는 저런 문제를 잡아낼수가 없다. 왜냐? FF에서는 문제가 안되기때문이다.

저걸 또 잡아내기란 쉽지가 않다. -_- (난 어떻게 잡아낸걸까? ㅎㅎ)

스크립터 에디터를 통해 스택을 하나하나 밟아가며,.. 결국 찾아냈다.
IE 만세~!!

오늘부터 나 다시 IE6 + Script Editor 로 주무기를 바꿨다!!

이 부분을 번역할까 말까 한참을 고민했다.
대략 A4 한장 분량의 번역작업이 대충 2시간이 걸렸기 때문이다.
머이리 오래 걸려? 라고 묻는자에게 말하고 싶다.. 당신이 해봐~!! -_-

내가 알고 번역하는 것과,.. 모르고 번역한 것은 천지 차이다.
주위에 한글 번역서만 봐도 이건 금방 안다. 대부분이 아마도 원문을 보라고 권할 것이다.

나도 그렇다. 내가 모 취미반 공부반으로 번역은 하고 있지만, 원문을 꼭 다시 볼것을 권하는 바이다. 분명 이렇게 이야기 해도 안보는 사람들을 위해, 최대한 메끄럽게 번역할려고 노력중이다.
왜냐면, 나도 나름 영문꽈 학위 받은 남자기 때문에.. ㅋㅋㅋ
작년말에, 영한번역 수업을 들어놓은게 참 많이 도움이 되는거 같다..

여튼 각설하고,.. 시작해보자!!

원문 번역: http://www.jibbering.com/faq/faq_notes/closures.html
A4 용지로 출력하면, 15페이지중에 7번째 페이지가 되겠다!!

자동으로 일어나는 가비지 콜렉션

ECMA 스크립트는 자동으로 일어나는 가비지 콜렉션을 사용한다. ECMA 262 스펙 명세서에는 어떻게 가비지 콜렉션이 작동하는지에 대한 자세한 정의는 없지만, 일반적으로 "어떤 객체가 자신을 가르키는 참조자가 없을 경우에 그 객체는 가비지 콜렉터에 의해 가비지 콜렉션될수 있다." 라는것이 일반적인 내용이다. 그러나 가비지 콜럭터에 의해 어느순간 콜렉션이 실제로 일어나는지 일어나지 않는지는 장담할수 없다.

(역주) 첫단락 해석이 이상해 의역을 많이 했다. 그리고 현재 ECMA 스펙을 확인중이다. 실제로 구현에 대한 아이디어가 있는지 없는지.. 확인 해봐야겠다..ㅋㅋㅋ

ECMA 스펙을 한창 보았다. 물론 처음부터 끝까지 보고 있는건 아니고, 필요한 부분만 참조해서 봤다. 그런데.. 오호라~ +_+_+_+ 스펙문서가 역시나 도움이 많이 됐다. 몰랐던 구현에 관한 아이디어가 너무나 많다. 물론 가비지 콜렉션에 대한 내용은 없었다. ㅋㅋㅋ

스펙문서를 보고, 처음에 이 문서 번역을 하면서 난해했던 부분이 상당부분 이해가 되고 있다 +_+_+ 이것도 차차 정리해둬야겠다.. 아~ 고수의 길은 멀고도 험하구낭..여튼 이어서~!!

클로져 만들기

클로져는 함수 객체가 리턴 되면서 형성되는데, 여기에는 2가지 조건이 있다.
먼저, 중첩된 함수가 다른 객체의 프로퍼티로 참조되거나 아니면, 전역변수나 전역적으로 접근 가능한 객체 혹은 외부 함수(중첩된 함수를 감싸는 함수)의 인자로써 넘겨지는 객체로 참조 되어질때, 클로져가 만들어진다. 아래 예제를 보자.

function exampleClosureForm(arg1, arg2){
    var localVar = 8;
    function exampleReturned(innerArg){
        return ((arg1 + arg2)/(innerArg + localVar));
    }
    /* return a reference to the inner function defined as -
       exampleReturned -:-
    */
    return exampleReturned;
}

var globalVar = exampleClosureForm(2, 4);

위에 exampleClosureForm 실행문맥 안에서 생성된 함수 객체는 가비지 콜렉션 되지 않는다. 그 이유는 전역변수에 의해 참조 되고, 여전히 접근 가능하기 때문이다. 또한, globalVar(n) 과 같은 형식으로 호출되어 실행할수도 있다.

하지만 위에 경우는 새로 생성된 실행 문맥 안에서 만들어진 함수객체가 globalVar 변수에 의해 참조되고 있고, 그 함수 객체의 [[scope]] 프로퍼티가 스코프 체인의 Activation/Variable 객체를 가르키고 있기 때문에 약간 복잡한 경우에 해당한다. 즉, 새로 생성된 exampleClosureForm 실행 문맥의 스코프 체인의 Activation/Variable 객체 역시 가비지 콜렉션이 되지 않는다.

현재 클로져가 형성되었고,위에 중첩된 내부함수 객체는 자유로운 변수들( 역주: free variables가 무엇을 의미하는지 정확히 알수 없으나, 다른 일반 변수들 보다 제약이 적다는 의미로 해석된다. 그런데 왜 저럽게 free variables라고 표현했는지 아직은 모르겠다. )과 스코프 체인에 있는 Activation/Variable 객체를 가진다.

그 Activation/Variable 객체는 globalVar 변수에 의해 참조되는 함수 객체의 [[scope]] 프로퍼티에 의해 참조되어 묵여 있는 상황이다. 그래서 이 Activation/Variable 객체는 그것의 프로퍼티의 값들이 그대로 보존된 상태로 있다. 중첩된 함수를 호출하는 실행문맥 안에서의 스코프에 대한 해석은 식별자로 해석을 한다.  즉, Activation/Variable 객체의 프로퍼티들이 식별자가 된다는 의미다. 그리고 이것은 여전히 set 과 put 두 가지를 모두 수행할수 있고, 실행문맥이 끝나더라도 여전히 존재하게 된다. 왜냐?.. 클로져로 묵여있는 상황이기 때문이다.

위 예제에서 외부 함수(내부 함수를 감싸는)가 리턴될때, Activation/Variable 객체는  공식적인 파라메타 그리고 중첩 함수 정의와 지역 변수로써 대표되는 상태를 가지고 있다. 즉, Activation/Variable 객체의 arg1 프로퍼티는 값 2 를 가지고 있고, arg2 프로퍼티는 값 4를 그리고  localVar 변수는 값 8을 그리고 exampleReturned 프로퍼티는 중첩된 내부 함수 객체를 가르키는 참조자를 가지고 있다. (앞으로 요 Activation/Variable 객체를 편의상 "ActOuter1" 이라고 부를것이다.)

만약에 exampleClosureForm 함수가 아래처럼 다시 호출되면,

var secondGlobalVar = exampleClosureForm(12, 3);

function callLater(paramA, paramB, paramC){
    /*  
     함수 표현식을 갖는 익명 내부 함수를 만들고 이것을 참조자로 리턴한다.
    */
    return (function(){
        /* 이 내부 함수는 setTimeout 과 함께 실행 되어진다.
            그리고 이분이 실행되어 질때, 이것은 읽을수 있고, 수행되고,
            파라메타들을 외부 함수에 넘겨준다.
        */
        paramA[paramB] = paramC;
    });
}

...
/*
   함수를 호출한다. 이 함수는 실행문맥안에서 생성된 내부 함수 객체를 가르키는 참조자를 리턴해줄것이다. 넘겨준 파라메타들은 결과적으로 외부함수의 인자로 실행될때, 내부함수가 사용할것이다. 내부 함수객체를 가르키는 리턴된 참조자는 지역변수에 할당된다.
*/
var functRef = callLater(elStyle, "display", "none");
/*
  setTimeout 함수를 호출하고, 첫번째 인자로 할당한 내부 함수를 참조자를 functRef 변수로 넘겨준다.
*/
hideMenu=setTimeout(functRef, 500);

/* 
이벤트 핸들러와 연관된 객체 인스턴스의 일반적인 함수.

내부 함수는 이벤트 핸들러로써 사용되는 내부함수를 리턴 한다.
객체 인스턴스는 obj 파라메타를 넘겨받는다. 그리고 그 메소드 이름은 
객체가 methodName 파라메타를 넘겨줄때 호출된다.
*/
function associateObjWithEvent(obj, methodName){
    /* 
     그 리턴된 내부 함수는 DOM 엘리먼트를 위한 이벤트 핸들러로 사용된다.
    */
    return (function(e){
        /* The event object that will have been parsed as the - e -
           parameter on DOM standard browsers is normalised to the IE
           event object if it has not been passed as an argument to the
           event handling inner function:-
        */
        e = e||window.event;
        /* The event handler calls a method of the object - obj - with
           the name held in the string - methodName - passing the now
           normalised event object and a reference to the element to
           which the event handler has been assigned using the - this -
           (which works because the inner function is executed as a
           method of that element because it has been assigned as an
           event handler):-
        */
        return obj[methodName](e, this);
    });
}

/* This constructor function creates objects that associates themselves
   with DOM elements whose IDs are passed to the constructor as a
   string. The object instances want to arrange than when the
   corresponding element triggers onclick, onmouseover and onmouseout
   events corresponding methods are called on their object instance.
*/
function DhtmlObject(elementId){
    /* A function is called that retrieves a reference to the DOM
       element (or null if it cannot be found) with the ID of the
       required element passed as its argument. The returned value
       is assigned to the local variable - el -:-
    */
    var el = getElementWithId(elementId);
    /* The value of - el - is internally type-converted to boolean for
       the - if - statement so that if it refers to an object the
       result will be true, and if it is null the result false. So that
       the following block is only executed if the - el - variable
       refers to a DOM element:-
    */
    if(el){
        /* To assign a function as the element's event handler this
           object calls the - associateObjWithEvent - function
           specifying itself (with the - this - keyword) as the object
           on which a method is to be called and providing the name of
           the method that is to be called. The - associateObjWithEvent
           - function will return a reference to an inner function that
           is assigned to the event handler of the DOM element. That
           inner function will call the required method on the
           javascript object when it is executed in response to
           events:-
        */
        el.onclick = associateObjWithEvent(this, "doOnClick");
        el.onmouseover = associateObjWithEvent(this, "doMouseOver");
        el.onmouseout = associateObjWithEvent(this, "doMouseOut");
        ...
    }
}
DhtmlObject.prototype.doOnClick = function(event, element){
    ... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
    ... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
    ... // doMouseOut method body.
}