It's Myself

Server 끼리 동작되는 모듈 개발자나, 아키텍처 개발자는 별 상관 없는 이야기 일듯 싶다.
이 부분은 End-User 들이 직접 만지는 Presentation 영역을 개발하는 개발자들에게 해당되는 이야기이다. 요즘은 IE로 통일된 웹 브라우저 시장이 모조리 분할되어가고 있다. 사실 FireFox나 Chrome, 그리고 사파리가 대세가 되고 있는 상황이다. 이에 다급한 MS는 부랴부랴 8.0 을 만들어 배포하기는 했지만, 이제 마음 돌린 사용자들의 마음을 쉬이 돌리기는 어렵다. 국내와 미국 내 브라우저 시장을 보면 아래와 같다.

국내브라우저 시장(자료 출처 : Internet Trend)

미국내 브라우저 시장(자료 출처: Market Share)

자료를 보면 아직은 70%를 넘는(우리나라는 절대 다수가…) IE 이긴 하다. 그래서 모든 개발의 중심이 IE로 구성되어 있는 것도 사실이다. 그렇지만, Trend는 변하게 된다. 사실 MS도 IE 6.0 에서 여차하면 비표준 Javascript와 Active X 기술로 대충 매꾸고 넘어왔다. 그러나 지금은 보안적인 이슈 문제나 비 표준의 불이익을 하나씩 겪으면서 IE도 표준의 대열로 들어오고 있고 규칙을 지키기 위해서 안간힘이다.

그런데 우리나라 브라우저 시장은 전혀 그렇지 않다.

사실 게임 사이트와 은행 사이트에 들어가면 Active X가 3개 이상 설치되는 건 예사다. 게다가 IE가 아니면 Javascript가 비정상 동작하는 바람에 선택상자가 제대로 표시안되는 경우도 종종 있다.

그런데, 요즘 웹 트렌드를 쫒아 간다는 포탈(네X버)에서 조차 이런 현상이 발견된다. 아마도 Front 부분만 다른 브라우저와 동일하게 나오면 되지.. 이런 마음일까?

아니다. 이건 그 회사 잘못이라기 보다는 지금까지 일해오던 웹 프로그래머들의 생각자체가 문제라 생각이 든다. 한 사람이 한 회사의 메인 플랫폼이나 개발 프레임워크를 갈아 엎는건 불가능하겠지만,  최소한 자신의 모듈에 대한 개발 시에 표준을 지키기 위해 하나씩 맞추어 갔으면 이런 자잘한 오류는 발생되지 않을까?

실제로 우리회사 내 웹 프로그래머는 아직도 버릇 처럼 document.all[xxx']를 쓴다.
웃기기 그지 없지 않나? 뭔가 좀 생각을 바꾸고 하나씩 자신의 포지션에 대해 생각하면서,
막연히 남의 일처럼 흘려 보내지 말고 고쳐 보면 어떨까?

지금 당신 Javascript로 무언가 짜고 있다면 WebBrowser-Independency 하게 하나씩 구성해보는 건 어떨까? 불가능하다고 생각하고 있다면 한번 JQuery를 보고 그 말한마디 부탁한다.

관리도구 패널을 만들어야되는 시점. 우연히 켜 놓은 메신저를 통해 대구 동생(민수)이 넌즈시 건네준 말. "형 JQuery 알아요?".  예전에 문득 자바스크립트를 이용해서 XHTML에서 객체 Query 하는 기술인 줄 알고 답했더니, 피식 웃으며(물론 소리도, 모습도 보이지 않았지만, 그런 느낌?) JQuery 기술 관련 각종 URL과 문서를 건네주더군요.
자신이 만든 사이트와 함께 JQuery를 소개 시켜준 뒤 유유히 사라졌고(1년이나 지났는데 여전히 깨 쏟아져서 깨 볶아 먹는지 원....) 전 이 새로운 도구를 바라 보며, 먼 산 바라기를 했죠. 뭘 제대로 알아야지....

다행히 API 설명된 사이트를 알려줘서, 그 사이트에 적힌 내용을 하나씩 하나씩 보기 시작했습니다.(아.. 일어로 되어 있습니다 -_-;;) 그러나 역시 똥 한바가지 찬 제 머리로는 단빡에 이해되지 않았고, 다시 삽질 모드를 발동 했죠. 일단 지금 하던 작업과 연관 지어 Javascript 도배가 예상되는 그 페이지에 하나씩 하나씩 적용해 보기 시작했습니다..

왠걸.... 그 예전 Javascript 코드가 1/3 수준으로 줄고, 그 조작도 무척이나 편해져 버리더군요. 게다가 기능은 더욱더 풍부해진.....

이제 지금까제 제가 이해한 부분을 기반으로 이 JQuery를 소개하도록 하겠습니다.  단 Javascript로 자신이 직접 무언가를 짜기 보다는 네이년이나 다움을 통해 단순 Copy & Paste 수준에 머물고 있다면, 굳이 이 JQuery 세계를 이해하려 하는 만용은 조금 자제해 주세요.. 지금 부터 할 내용은 getElementById 라는 함수를 남발하고, AJAX를 좀 하면서, HTML 엘리멘트들을 이리 저리 옮기고 있는 분에게 새로운 도구를 GET 하시는 계기 정도의 글이 될 것 같군요. ( 물론 Javascript 전혀 몰라도, 그냥 읽어보는 것도 뭐 상관은 없지만 시간 낭비지 않을까 싶네요 (笑))

먼저 JQuery를 소개하기 앞서, JQuery가 가진 몇가지 장점들 중.... 제가 감동 먹은 베스트 2를 먼저 말씀드리겠습니다. 뭐 API나 각종 기능들의 소개는 다른 블로그들을 통해서 얻으실 수 있으니깐요. ㅋ

첫번째. null 걱정이 없다!

뭐 걍 직관적으로 javascript 짜시는 분들이야... 원래 신경 안썼다고 하시겠지만, 저 같이 결벽증이 있고, 뭐든 의심하고 보는 사람에게는 엄청난 스트레스 입니다.

예를 한번 들어보죠...

var linkbutton = doucment.getElementById("forNextPage");
linkbutton.style.display = "none";

라는 코드가 있을때... 과연 저 linkbutton 가 null 일까요? 아닐까요? 당연히 있으면 null은 아니겠지만, 만일에 저 "forNextPage" 부분이 변수로 처리되서 값을 만들어서 넣는다면? 과연 항상 null 이 아니라고 장담할 수 있을까요? 만일 null 이기만 하면, 바로 자바스크립트 오류 팍 뿜죠... 그게 걱정 된다고 밑에 if (linkbutton != null )을 넣기 시작하면 점점 코드가 점점 가관의 길을 걷게 됩니다.

자... 이걸 JQuery로 한다면....

$("#forNextPage").css("display", "none");

네.. 이 한줄입니다.  $("#forNextPage")가 null인지 아닌지 어떻게 아냐구요? 절대 null일리 없습니다. 단지, $("#forNextPage") 안에 객체가 있을까 없을까 정도이지, $("#forNextPage") 자체는 null 이 아닙니다. 만일 $("#forNextPage")로 JQuery 객체가 없다고 하면, 그냥 안이 비어 있는 JQuery 객체일 뿐입니다.  그래서 .css(.....) 부분은 실행되지 않고 끝나게 되겠죠. 믿어지지 않는다구요? 뭐 일단 제가 말씀드린 3가지 장점 설명 후에 JQuery 객체에 대해 제가 이해한 내용을 언급드리죠.

두번째, 다중 선택을 한줄로!!!

만일 <div> 라는 객체를 남발한다고 하죠. 그런데 그 div를 일괄적으로 색을 변경해야 된다고 할때... 어떻게 하시나요? 물론 다양한 방법이 있지만, 저 같은 경우에는 각 div 에 id를 할당 한뒤, 그 id를 기반으로 작업을 수행합니다.

예를 들어보죠....

<div id="parent001">
    <div id="display1"> 보여줍니다.</div>
    <div id="Rdisplay1" >이건 빨간색입니다.</div>
    <div id="display2"> 보여줍니다.</div>
    <div id="Rdisplay2" > 이건 빨간색입니다.</</div>
    <div id="display3"> 보여줍니다.</div>
    <div id="Rdisplay3" > 이건 빨간색입니다.</div>
    <div id="display4"> 보여줍니다.</div>
    <div id="Rdisplay4" >이건 빨간색입니다.</div>
    <div id="display5"> 보여줍니다.</div>
    <div id="Rdisplay5" > 이건 빨간색입니다.</div>
</div>

자 위와 같은 html이 있다고 하죠. 자 XHTML의 특징이 바로 저 id라는 항목인데, id는 전체 XHTML 내에서 고유하게 할당해 주어야 합니다. 뭐 저렇게 규칙적인 것은 Server-side-script 인, PHP나 ASP 또는 ASP.NET 으로 만들면 뭐 껌입니다. (껌이 쉬운지는 잘 모르겠지만요..)

자 위의 내용을 자바스크립트를 통해 "보여줍니다" 항목에 style을 모두 파란색으로 변경한다고 하죠.

예전 제가 했던 방식에 의거하면.. 이렇게 만들어지겠죠?

for(i=1; i<6;i++)  {
      document.getElementByIdl("display" + i).style.background-color = "Blue";
}

네 위와 같이 짰을 겁니다. 그러나.. 이 결벽증 어디로 갈까요? 다시 저 eval의 결과가 null 인지 아닌지 검사해야 합니다.

for(i=1; i<6;i++) {
      var target = document.getElementById("display" + i);
      if(target != null)
          target.style.background-color = "Blue";
}

3줄 짜리가 벌써 5줄로 거의 2배가 되버렸네요. 그래도 안전하면 뭐든지.. ㄷㄷㄷ

자.. 저것을.. JQuery로 승화시키면?

$("div[id^='display']").css("background-color","Blue");

조금더 다듬는다면,

$("#parent001']").children("div[id^='display']").css("background-color","Blue");

윗 줄은 전체 document에서 div를 모두 검색하되 단, id가 display로 시작하는 것을 검색하는 것이고, 두번째 줄은 parent001을 먼저 찾고, 그 하위에 있는 구성요소 중 div에서 id가 display로 시작하는 것을 찾는 것이죠.

for에 getElementById에 그것이 null인지 아닌지 ... 전혀 없고, 그냥 한줄로 끝납니다.

결론

정말 엄청난 녀석을 낚았다고나 할까요. 동생 덕에 근좌 자바스크립트 점점 간단해 지고 있습니다. ( 물론 동료들에게는 아직 알리지 않은 내용이니, 그 분들이 제 자바스크립트 소스를 보면 암호문 같아 당혹스러워 할 지는 모르겠습니다. -_-;;;;)

일단, 간단하게 제가 느낀 감상문을 먼저 적어보았고, 그 동안 제가 해보면서 느꼈던 각종 테크닉들을 정리해서 올려보도록 하겠습니다.

예전 포스팅 중 [ Javascript, 객체화 하기 ] 라는 제목으로 올린 것이 있다.
그 때 쓴 포스팅 방법에 의거해서 예제 소스를 하나 구성하면 아래와 같다.

var objTest = {
      valDisplay : "",
      displayValue : function () {
            alert(this.valDisplay);
      }
     
      setValue : function(val) {
            this.valDisplay = val;
      } 
};

위의 예제를 실행해 보려면, 적절한 위치에서 아래와 같은 코드를 실행해 보면 된다.

objTest.setValue("Go Go Objected Javascript World");
objTest.displayValue();

그런데, 위와 같은 코드를 하게 되면 문제가 하나 있다. 예를 들어 objTest와 같은 로직을 부르는 곳이 많을 때다. 여기서 부르는 곳이 많다는 의미를 단순히 호출 자체의 횟수가 아니고, valDisplay를 독립적으로 운영해야 되는 경우를 말하는 것이다.
예를 들어 아래와 같은 코드를 보도록 하자.

objTest0.setValue("Go Go Objected Javascript World");
objTest0.displayValue();
objTest1.setValue("No, I Want to new display valueGo Go Objected Javascript World");
objTest1.displayValue();

위와 같은 코드를 실행하려면 아래 처럼, 처음 코드를 두개 넣어야 한다.

var objTest0 = {
      valDisplay : "",
      displayValue : function () {
            alert(this.valDisplay);
      }
     
      setValue : function(val) {
            this.valDisplay = val;
      } 
};
var objTest1 = {
      valDisplay : "",
      displayValue : function () {
            alert(this.valDisplay);
      }
     
      setValue : function(val) {
            this.valDisplay = val;
      } 
};

처음에는 단순하게 생각했었다. objTest0 = objTest; objTest1 = objTest; 이렇게 하면 되지 않을까 하고....그런데, 그렇게 쉽게 되지는 않았다. 두개의 변수는 하나의 objTest를 바라보고 있어, 결국 값은 valDisplay를 공유한 꼴이 되버린 것이다.

이에 구글링과 테스트를 반복하여 그 방법을 드디어 찾아냈다.
즉 첫번째 소스를 이렇게 변경하면 된다.

objTest = function() {
     this.valDisplay = "";
     this.displayValue = function () {
            alert(this.valDisplay);
      }     
      this.setValue = function(val) {
            this.valDisplay = val;
      } 
};

실제 실행하는 코드는 아래 처럼 짜면 된다.

var objTest0 = new objTest();
objTest0.setValue("Test0 objTest!!!!");
var objTest1 = new objTest();
objTest1.setValue("Test1 objTest!!!!");

new 라는 것을 사용해서 만들기 때문에, 새로운 인스턴스가 생성되며 별개의 메모리 상에서 동작하게 되는 것이다. 이렇게 될 수 있는 건 자바스크립트의 미묘한 마법때문이다. 예전에 이런 문제 발생한적이 있지 않은가?

var realVar = "Init Data";
reelVar = "Update value!!!";
alert(realVar);

결과는 의도한 "Update value!!!"는 안찍히고 "Init Data"가 찍힌다. 그 이유는? reelVar 라는 변수 명이 잘못된 것이다. 그러나 씹고 그냥 진행되고 도리어 reelVar라는 변수가 하나 더 생기고 그 안에 값이 들어가 버린다. 맨 아랫줄에 alert(reelVar) 찍어보면 그제서야 "Update value!!!" 가 찍힌다. 자바 스크립트에서는 새로운 형태의 변수가 발견되면 일단 변수를 멋대로 만든다.

이런 기묘한 자바스크립트의 성질을 이용해 구성하는 것이다.
코드를 하나씩 뜯어 보도록 하자.

objTest = function() {      
};

일단 함수를 만드는 것이다. 함수 객체 자체를 objTest에 담는 것이다. 즉 objTest는 변수이긴 하지만 실제로 들어 있는 것은 함수인 것이다.

     this.valDisplay = "";

여기서 부터가 진짜 마법이다. this를 처음 접하신 분들은 순간 당황하실 것이고, 객체 지향을 하시던 분이라면 저 this가 어딜 가르키는 this인지 도무지 판단이 안서실 것이다. 저 this란 바로 function() 즉 objTest를 가르키는 것이다. 즉 objTest 라는 이름의 함수 내에 valDisplay 라는 변수를 정의하는 것이다. 이처럼 정의하는 이유는 아래의 또다른 함수의 형태 때문이다. 

     this.displayValue = function () {
            alert(this.valDisplay);
      }

이번에는 displayValue 라는 형안에 또다른 함수를 때려 박는다. 이 함수는 objTest.displayValue로 호출 된다. 그런데 만일 아까 this.valDisplay = ""; 가 아닌 var valDisplay = "" 라고 쓴다면 저 함수 안에서는 밖에서 정의한 변수를 쓸 수 없다. (물론 무한한 자바스크립트 세계에서 "완전 불가"/"절대" 란 없으니 "완전 불가"/"절대" 라는 말을 뺐다.) 즉 내부에서 사용하기 위한 변수로 쓰기 위해서 this. 라는 것을 붙여서 처리한 것이다.

여튼, 지금 필자는 MOSS 2007에 WebPart라는 개념이 있는데, AJAX 스럽게 만들려다 보니, 같은 스크립트를 여러 다른 웹파트들이 쓰게 되었는데, 일단 저렇게 간신히 해결하는데 성공했다. 미묘한 감동 찌리리링 상태다.

예전에 Javascript 예제 소스를 받기위해 이곳 저곳을 들리다가, Javascript 안에서

  MOA.Service.Open("aaaaa", "12"."55");

식으로 소스를 적어놓은 것을 보았다.
처음에는 무슨 Object를 New 한뒤, 그 안의 메소드가 그렇게 된 줄 알았는데,
Javascript를 구성할 때, Namespace 기반으로 마치 Class 처럼 구현하는 방법으로
만들어 진 것이였다.
지금도 그렇지만 그 당시 나에게 Javascript는 넘지 못할 산이였고, Copy & Paste만 한채
더 이상 분석 없이 그냥 넘어 갔었다.

이번에 AJAX 기반의 WebPart를 만들면서 Javascript를 하나씩 사용하기 시작했는데,
그 때 보아왔던 Class 처럼 구현한 Javascript 의 원형을 보게 되었고, 그 구조를 뜯어보는
기회를 갖게되었다.


Javascript 에서 저런 "." 으로 구분된 형태로 구성하는 이유중에 하나는,
Namespace 때문이다.
예를 들어 함수나 변수 이름들을 넣을 때,  이름이 겹치지 않을까 하는 우려가 발생했다.
예를 들어 addNode 라는 함수를 만들었는데, 이 함수가 다른 Javascript에서도 사용하지
않을까... 라는 우려감이 그대로 드는 것이였다. 그럼 어떻게 해결 할까?

Javascript에서는 var 라는 변수 형에는 뭐든지 들어갈 수 있다는데 착안을 하여 구성한 것 같다.

즉 var AAA = { 'aaa', 'bbbb'  ,'cccc'  } 라는 배열을 넣듯이 그 안에 구성요소들을 때려
넣는 것이다. 이 때 name과 value라는 형태로 넣는데, 굳이 표현하면 아래와 같이 된다.

var AAA = { name : 'aaaa', tel : 'bbbbb' , addr : 'cccc' }

요소 1개는 name : 'aaaa' 이고, 2번째 요소는 tel : 'bbbbb' , 3번째 요소는 addr : 'cccc' 를 의미하게 된다. 만일 'aaaa' 라는 것을 접근하려면, AAA.name 으로 하면 'aaaa' 이 나오게 되는 것이다.

예를 들면 아래와 같이 클래스를 구성하게 된다.

var HelloClass = {
       variableA : null,
       RunIt: function (param) {
            this.variableA = param;
            alert(HelloClass .variableA);
       }
}

HelloClass.HelloMethod('OK!');

위의 자바 스크립트를 실행하면 'OK!' 라는 Alert 창이 뜬다.

잠시 위의 코드를 살펴보자.
보면, 이름과 그 형이나, 값을 ':' 으로 구분하여 구성한다.
보면 변수 부분은 변수이름을 variableA 로, 그 값은 null 로 규정했다.
그리고 함수 부분은 이름을 RunIt로, 그 값은 function(....) {....} 이라고 규정했다.

이렇게 만들면 저 맨위의 이름(예에서는 HelloClass )만 안겹치면 끝이다.

그리고, HelloClass를 접근할 때, HelloClass 자체를 써서 접근할 수 있고,
HelloClass 내부에서 접근할 땐 this라는 지시어를 써도 된다.

뭐 실제 class 처럼 proecteed, private 등의 접근 제어나 생성자 이런 부분이
명확치 않아서 의미가 별로 없긴 하지만, 네임 스페이스에 겹치지 않는 문제를
해결한다는 입장에서 볼때는 획기적인 방법이 아닐 수 없다.