IE7 나온지가 얼마나 됐다고 IE8 사용성 테스트를 해야 한다니..복장이 터질지경이다.

현재 프로젝트에서 사용자중 가장많이 차지하는 부분이 IE6인데..기본 개발 브라우저는
IE6,IE8,IE9, FF2,FF3, Opera9에서 까지 잘 보여야 한다니.....

일전에 포스팅한 IE8출시에 따른 호환성테스트 글에서 언급했지만
IE8에서 IE7과 같이 쓰려면 다음과 같은 Meta태그를 넣어주면된다.

출처 : MS IE Compatibility Site


아래 내용은 MS의 고객지원센터에서 발췌한 글이다.

[출처 : PHPSchool]

쩝..IE7에서 보안이 강화되면서 미리보기 기능이 구현안돼서 헤매고 당기다 아지트에서 발견하다...

소스 :

invalid-file

프로젝트가 바빠서 한동안 들리지 않았더니만...
extjs 2.1 이 릴리즈됐다.

많은 변화가 있었는데 가장 큰 변화라면 라이센스정책이 기존의 LPGL에서 3가지로 구분되어 나뉘어졌다. YUI에서 출발한 extjs는 아닐거라고 생각했는데 유료로 전환해 버렸네~
우선 가장 이번 2.1버전에서 달라진 점(Release Note)을 찾아본다면 아래와 같다.

1. 라이센스 정책 변화
2. Full REST 지원
3. Ext.StatusBar 컴포넌트 추가 (IE7,FF에서 보안정책때문에 애먹어서 구현하고 있었는데.. ㅠ.,ㅠ)
4. 컴포넌트 Config옵션 Remote Loading지원
5. Grid 필터링 추가
6. Layout Browser Sample 추가
7. Spotlight 기능추가
8. 아이콘 팝업 추가
9. 슬라이드기능 추가
10. validation기능 추가(향상이라고 해야 하나?)
11. Card Panel Layout추가 (Wizard기능)
12. Markup re-Rendering기능 향상
    

라이센스정책
많은 개발자들의 활발한 활동과 커뮤니티의 활성화로 Ext가 안정화 되면서 Ext개발자와 공헌자들이 계속 개발을 할수 있게 하기위해 라이센스 정책을 변경함 ( 뭐~ 다들 일케 말하더라~ )  여기서 말하는 듀얼 라이센스 정책이라는것은 개발된 애플리케이션의 소스를 공개하지 않는다면 commercial License이고 공개한다면 Open Source가 된다는 거다.. ㅡ.,ㅡ;
둘다 Open Source이긴 하지만.. 돈있으면 소스공개하지 말고 commercial로 쓰고 돈없으면 소스 공개해서 OpenSource로 까발리라는 얘기다~~

1. Commercial License :
 Quid Pro Quo 원칙에 근거하여 배포할 목적으로 애플리케이션을 개발한다면 적정한 수 만큼의 라이센스를 구입해야 함. (듀얼 라이센스정책)
 - 구매한 소스에 대해서는 상업용으로 전환 가능.
  - GPL에 의해 소스를 수정할수 있음.
2. Open Source
 기존의 LGPL에서 GPL에 따른 라이센스 정책
3. OEM / Reseller License




샘플보기 : http://www.extjs.com/deploy/dev/examples/samples.html


헉... Firebug를 켠 상태로 들어갔더니만 이런 메세제가 ㅡ.,ㅡ; firebug detecting기능을..

다른 분들은 어떨지 모르나 UI 개발자인 데꾸벅의 경우는 프로젝트를 할때 마다 느끼는 거지만 어떤 Ajax framework를 쓸지 고민을 많이 하는 편이다.
그냥 규모가 좀 되는곳이라면 jQuery나 prototype을.. 그리고 내부 애플리케이션이라면 extjs를... 혹은 작더라도 struts2를 쓸때는 dojo를...
근데 문제가 되는것은 아주 작은 소규모 프로젝트의 경우는 이러한 ajax framework나 libraries를 사용하기가 좀 그래서 단순 XHR Wrapper를 만들어 사용한다



[데꾸벅이 사용하는 Ajax Wrapper 01]

function createHttp() {
 try {
  return new XMLHttpRequest();
 }
 catch (e) {
  var objectNames = ["MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
  for (var i = 0; i < objectNames.length; i ++) {
   try {
    return new ActiveXObject(objectNames[i]);
    break;
   }
   catch (e) {
   }
  }
  return null;
 }
}


var loading = false;
function getResponse(uri,content) {
 try {
  loading = true
  var body = document.body;
  var oHttp = createHttp();
  if(uri.indexOf('?') ==-1) aux = '?';
  else aux = '&';
  oHttp.open("POST", uri + aux+"time=" + (new Date()).getTime(), false);
  if(content == undefined) {
   content = '';
  } else {
   oHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  }
  oHttp.send(content);
  result = new Array();
  if(isSafari || isOpera) {
    resultNodes = oHttp.responseXML.firstChild.childNodes;
    for(var i=0; i';

  return false;
 }
}

function requestHttp(uri) {
 try{
  var oHttp = createHttp();
  oHttp.open("GET", uri + "&time=" + (new Date()).getTime(), false);
  oHttp.send("");
  if(isSafari || isOpera) {
   var returnValue = oHttp.responseXML.firstChild.firstChild.nextSibling.firstChild.nodeValue;
   delete oHttp;
   return returnValue;
  } else {
   var returnValue = oHttp.responseXML.selectSingleNode("/response/error").text;
   delete oHttp;
   return returnValue;
  }
 } catch (e) {
  window.status = e.messge;
 }
}

function requestHttpText(uri) {
 var oHttp = createHttp();
 oHttp.open("POST", uri + "&time=" + (new Date()).getTime(), false);
 oHttp.send("");
 var returnValue = oHttp.responseText;
 delete oHttp;
 return returnValue;
}

function requestHttpXml(uri) {
 var oHttp = createHttp();
 oHttp.open("GET", uri + "&time=" + (new Date()).getTime(), false);
 oHttp.send("");
 var returnValue = oHttp.responseXML;
 delete oHttp;
 return returnValue;
}

function requestPost(uri, content) {
 var oHttp = createHttp();
 oHttp.open("POST", uri + "&time=" + (new Date()).getTime(), false);
 oHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 oHttp.send(content+ "&time=" + (new Date()).getTime());
 var returnValue = oHttp.responseXML.selectSingleNode("/response/error").text;
 delete oHttp;
 return returnValue;
}

function requestPostText(uri, content) {
 var oHttp = createHttp();
 oHttp.open("POST", uri + "&time=" + (new Date()).getTime(), false);
 oHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 oHttp.send(content);
 var returnValue = oHttp.responseText;
 delete oHttp;
 return returnValue;
}


function setRequestBody(elementName, elementValue, boundary){
 var body = "";
 body += "--" + boundary + "\r\n";
 body += "Content-Disposition: form-data; name=\"" + elementName + "\"" + "\r\n\r\n";
 body += elementValue + "\r\n";
 return body;
}

[모 프로젝트에서 사용했던 예~ ]

/**
 * HTTP 혹은 HTTPS 방식의 통신을 제공하는 클래스객체를 생성합니다.
 * @class EnHttp
 *
 */
function EnHttp(){

 this.dialBack ="";    //컴포넌트와 컨테이너 인증에 사용합니다.
 this.extraInfo ="";    //Url의 추가 정보를 지정합니다.
 this.host = "127.0.0.1";  //호스트 이름을 지정합니다.
 this.method = "POST";   //메쏘드(HTTP의 Verb)를 지정합니다.
 this.optionalHeaders = "";  //HTTP요청의 추가 헤더를 지정합니다.
 this.password = "";    //패스워드를 지정합니다.
 this.port = "80";    //포트를 지정합니다.
 this.postData ="";    //POST, PUT 요청에 사용되는 데이터를 지정합니다.
 this.protocol ="HTTP";   //프로토콜을 지정합니다.
 this.proxy ="";     //프록시가 설정된 환경인 경우, 프록시설정 정보를 지정합니다.
 this.referer = "";    //HTTP요청의 Referer를 지정합니다.
 this.responseContents="";  //응답 내용 문자열을 전달합니다.
 this.responseHeaders ="";  //응답헤더 문자열을 전달합니다.
 this.responseStatusCode =""; //응답상태코드를 문자열로 전달합니다 (예: "404")
 this.responseStatusText =""; //응답상태를 문자열로 전달합니다.(예: "Not Found")
 this.ssl = false;    //SSL 사용여부를 지정합니다.
 this.timeout = 0;    //HTTP요청의 timeout을 지정합니다.
 this.urlPath="";    //경로를 지정합니다.
 this.user ="";     //사용자 이름을 지정합니다.
 this.version ="";    //HTTP버전 문자열을 지정합니다.
 this.url = "";     //전체 URL을 지정 합니다.


 /**
  * 실제 HTTP요청을 서버에 전송합니다.
  * @return true/false
  */
 this.SendRequest = function(){
  this.url = this.protocol + "://"+ this.host + ":" + this.port + this.urlPath;

  var xmlhttp = createHttp();
  xmlhttp.open(this.method, this.url,false);

  var headers = this.optionalHeaders.split("\r\n");
  for(var i=0; i < headers.length; i++){
   var oneHeaders = headers[i].split(":");
   xmlhttp.setRequestHeader(oneHeaders[0],oneHeaders[1]);
  }


  var varResponseStatusCode = "";
  var varResponseHeaders = "";
  var varResponseContents = "";

     //도착하는 이벤트 핸들러 걸어주고
     xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState==4) {
    varResponseStatusCode = xmlhttp.status;
    varResponseHeaders = xmlhttp.getAllResponseHeaders();
             if (xmlhttp.status==200) {
     varResponseContents = xmlhttp.responseText;
    }
         }
     }
     xmlhttp.send(this.postData);
  this.responseStatusCode = varResponseStatusCode;
  this.responseHeaders = varResponseHeaders;
  this.responseContents = varResponseContents;
 }


 /**
  * 쿠키를 읽어옵니다.
  * @param {Object} url - 쿠키를 읽어올 Url주소
  * @return Cookie
  */
 this.getCookie = function(url){

 }

 /**
  * 쿠키를 설정합니다.
  * @param {Object} url- 쿠키를 설정할 Url주소.
  * @param {Object} cookie- 설정할 쿠키.
  * @return ture@false
  */
 this.setCookie = function(url,cookie){

 }


 /**
  * 파일을 form 형태로 업로드합니다.
  * @param {Object} file- 업로드할 파일명(경로).
  * @param {Object} url- 업로드할 경로.
  */
 this.upload = function(file,url){

}
}

Kris Zyp's 블로그에 Future Ajax Wrapper라는 포스트에서 cross-browser와 cross-domain을 지원하는 100라인 짜리 ajax wrapper 소스를 선보였다.

W3C에서 제안한 cross-site acess 를 사용하는 대신에 IE8의 XDR(XDomainRequest)와 새로운 cross-site request를 추가하였다고 한다. 이번에 출시된 IE8은 표준을 모두 따른다고 하더니만....   또다시 IE8용으로 분기를 해줘야 한다.. ㅡ.,ㅡ;

invalid-file

function doRequest(method,url,async,onLoad,onProgress) {
    var xhr;
    if ((onProgress || isXDomainUrl(url)) && window.XDomainRequest) {
         if (url.match(/^https:/) && !onProgress) {
            loadUsingScriptTag(url); 

            return;
	}
        xhr = new XDomainRequest;
	if (!url.match(/^http:/)) {
            url = absoluteUrl(location.href,url);

          }
	if (!(method == “GET” || method == “POST”)) {
	    url += “&method=” + method;
	    method = “POST”;
	}
	function xdrLoad() {
	   if (xhr.contentType.match(/\/xml/)){
		var dom = new ActiveXObject(”Microsoft.XMLDOM”);
		dom.async = false;
		dom.loadXML(xhr.responseText,200);
		onLoad(dom);
	   }
	   else {
	   	onLoad(xhr.responseText,200);
	   }
	}
	if (async === false) {
	    var loaded;
	    xhr.onload = function() {
		loaded = true;
		xdrLoad();
	    }
            xhr.open(method,url);
	    xhr.send(null);
	    while(!loaded) {
		alert(”결과를 기다리는 중입니다.”);
	    }
 	    return;
	}
	else {	// do an asynchronous request with XDomainRequest
            xhr.onload = xdrLoad;
            xhr.open(method,url);
            xhr.onprogress = onProgress;
	}
    }

    else {
        xhr = new XMLHttpRequest; 
        xhr.open(method,url,async);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 3) 
                onProgress(xhr.responseText);
            if (xhr.readyState == 4) // finished
                onLoad(xhr.responseText,xhr.status);
        }
    }
    xhr.send(null); 


	function absoluteUrl : function(baseUrl, relativeUrl) {
		if (relativeUrl.match(/\w+:\/\//))
			return relativeUrl;
		if (relativeUrl.charAt(0)==’/') {
			baseUrl = baseUrl.match(/.*\/\/[^\/]+/)
			return (baseUrl ? baseUrl[0] : ”) + relativeUrl;
		}
		baseUrl = baseUrl.substring(0,baseUrl.length - baseUrl.match(/[^\/]*$/)[0].length);
		if (relativeUrl == ‘.’)
			return baseUrl;
		while (relativeUrl.substring(0,3) == ‘../’) {
			baseUrl = baseUrl.substring(0,baseUrl.length - baseUrl.match(/[^\/]*\/$/)[0].length);
			relativeUrl = relativeUrl.substring(3);
		}
		return baseUrl + relativeUrl;
	}
	function loadUsingScriptTag(url) {
		… do JSONP here if we want
	}
}

오늘따라 많이 포스팅한다는 느낌이... ( 데꾸벅 무리하다... ㅡ.,ㅡ; )
사실 뒤에 앉아 있는 울 겸댕이 윤부장의 친구분이 이 블로그를 보고 계신다기에 팁으로 올려본다.

RESTFul 한 Web application을 개발하기 위하여 부단히 노력하고 계신분들을 위한 포스트~
크헬헬~


먼저 이곳을 먼저 보세요.. : RESTful Web Services (번역중~ 크헬헬)



이제껏 RESFul하다고 하면서 개발할때 사실 2.0이전 버전에서는 모든 데이타를 parameter값들에 의해서 일일이 encodeURIComponent까지 친절히 적어주면서 작업을 하였으나 2.0 버전부터는 REST를 Full 지원하게 되면서 상당히 작업하기가 편해진것은 사실이다.

Request를 보낼때 다음과 같이 보내면 된다.....

단, 아직은 완전한 REST 같지 않아서 다음과 같이 오버라이드해야 한다.

참고 : extjs.com 포럼글 중에서





 

HTML작업을 하다 보면 Tooltip을 사용할 일이 많아진다.
예를 들어

<img src="이미지 주소" alt="이미지설명"  title="이미지설명" /> 
<a href="" title="링크설명">
<table summary="테이블에 대한 간략한 소개"> 

 와 같이 사용하는데 사용자 마음대로 원하는 형태로 나오기가 어렵다는 단점이 있다. 또한 일정시간이 지나면 자동으로 없어지므로 사용하기가 까다롭다.

단 이미지가 없을 경우 엑박(엑스박스)을 없애기 이미지에 대한 내용이 들어가게 해주는 기능이 있으나 이럴경우 ExtJS를 사용하여 다음과 같이 작성해 줄수 있다.

 MARKUP

<div id="아이디" ext:qtitle="툴팀 타이틀" ext:qtip="데꾸벅<br />머리아포">

 JAVAScript (ExtJS)

Ext.QuickTips.init();
Ext.QuickTips.getQuickTip(); 

 과 같이 적어주면 자동으로 Ext.Tooltip() 과 같은 효과를 볼수 있다.

Basic Concept

각 각의 패널(Panel)에 대하여 알아본다. 기본적인 레이아웃은 이미 앞장에서 설명했던 소스를 이용하여 각각의 Region에 서로 다른 Panel을 붙여본다. 서로다른 패널들이 레이아웃에서 어떻게 붙고(append)되고 자동으로 생성되며(Create) 삭제(remove and destroy)되는지에 대해서 알아본다. 최종적으로 재사용할 컴포넌트모듈을 작성하여 적용하는 방법(Step4)을 소개한다.
각 패널들에 대한 상세한 옵션에 대해서는 장차 설명하기로 하고 여기에서는 기본적인 레이아웃에 패널을 넣는 방식에 대해서 알아본다.

최종소스 :

invalid-file

invalid-file

invalid-file

invalid-file

invalid-file

Step 1.  Basic Layout and BoxComponent

<html>
<head>
<title>Basic Layout</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-all.js"></script>
<script type="text/javascript" src="basicLayout.js"></script>
</head>
<body id="basicLayoutBody"></body>
</html>

 [basicLayout.js]

 위와 같이 각각의 region마다 별도의 파일로 클래스를 관리한다.

• WestArea.js
• EastArea.js
• CenterArea.js
• basicLayout.js

Step 2.  Tab Panel - center region

중앙컨텐츠 패널(center region : CenterArea.js )에 여러개의 TabPanel을 넣어보자

탭패널의 경우 한 화면에 여러개의 패널(Panel)이 필요할 경우 유용하며 연관된 다를 데이타를 사용할때 상당히 유용하다. 기본적인 event는 위에서는 3가지만 열거했지만 위 3가지 만으로도 충분히 다양한 효과를 낼수 있을 것이다. 또한 각 탭 마다 다양한 패널을 추가할수 있으며 기본 ContainerLayout도 추가할수 있으므로 여러가지형태의 레이아웃을 잡을때 상당히 유용하다.
예를 들어 이전장에서 기본레이아웃에 그리드를 추가하는 방법을 배웠는데 첫번째 탭패널에 그리드 레이아웃을 넣어 해당 레이아웃을 테스트 해보기 바란다. 또한 각 탭이 activate될때 그리드의 데이타스토어를 다시 로드할수 있도록 이벤트를 걸어주거나 다른 액션을 취할수 있다.

참고: Ext.TabPanel은 Ext.layout.CardLayout을 사용하므로 deferredRender의 경우 Ext.layout.CardLayout의 deferredRender를 참조한다.

위의 소스중 탭패널이 바로 borderLayout에 속한(region:center)일 경우에는 title 이 나타나지 않는데 기본 Layout에 Nested된 TabPanel일 경우는 기본 Layout의 region에 title을 넣으면 된다. 실제로 작업을 하다보면 위의 방법보다 아래방법을 많이 사용하게 된다. 탭패널안의 탭패널이 들어갈 경우도 발생할수 있으므로 Nested된 패널로 기본 cotainerLayout을 잡은후 넣는 방법이 좋다.

  위 소스를 응용하면 탭안의 탭패널, 그안의 탭패널을 넣는 방식으로 계단식 탭패널이 가능하다.

accordion Layout으로 바꿨으니 이제 각각의 패널에 알맞은(?) 패널들을 넣어보자. 우선 첫번째 패널에 TreePanel을 넣어보자

Step 4. Common Modules

이미 Step1,2,3 에서 접해봐서 알겠지만 각각의 패널에는 기본 ContainerLayout만 있으면 어떤 패널이던지 가져다 붙일수 있다는것을 알았을 것이다.
그럼 각각의 공통적으로 사용되는 패널의 경우 공통모듈화 하여 사용자가 정의한 모듈로써 사용하게 된다면 어느 패널에서든지 마음대로 붙였다 떼었다 할수 있을 것이다.


[basicLayout.html]

[Modules.js]

[WestArea.js]

IE전용으로 프로젝트를 진행하다 보니 Jscript를 사용할 일이 생겼다.
Ajax를 이용하지 않고 Jscript만 사용한다면 아래 방법도 괜찮을것 같다.

Xpath사용시 흔한 잘못

Xpath는 XML DOM(Document Object Model) 문서에서 특정 조건을 만족하는 노드를 찾는 표준적인 방법을 제공한다. 보통 하나의 노드를 찾고, 다시 부모를 찾거나 혹은 얻어진 값으로 다시 다른 Xpath 쿼리를 작성하는 경우가 많다. selectSingleNode() 혹은 selectNodes()등을 자주 호출하여 성능이 저하되고, 작성된 코드도 길어진다. Xpath의 조건을 잘 이용하면, 여러 번에 나누어 조회하지 않고 한번에 원하는 노드를 찾을 수 있는 경우가 많다.

[예제 XML. sample_message.xml]

위의 XML 문서는 예제를 위한 테스트 문서 이다. 조회의 조건과 결과로 얻고 싶은 노드를 잘 구분하는 것이 좋다. 다음 세 개의 Xpath 문장은 비슷하지만, 리턴 하는 노드가 다르다.

/Message/Body/Family/SSN[.="001202-2024433"] // SSN 노드를 리턴 
/Message/Body/Family[SSN="001202-2024433"]   // Family 노드를 리턴 
/Message/Body[Family/SSN="001202-2024433"]   // Body 노드를 리턴

XML 문서가 가진 노드의 특정한 값을 찾고, 그 값으로 다른 노드를 검색하고자 하는 경우가 있다. 예를 들어, 위 XML 문서에서 /Message/Body/Child 의 SSN(주민번호)가 Family/SSN 값과 같은 Family 노드를 찾고자 한다면, 다음과 같이 쿼리를 작성할 수 있다.

/Message/Body/Family[SSN=string(/Message/Body/Child/@SSN)]

이와 같이 쿼리를 잘 작성하면 두 번 이상 조회를 한번에 하도록 할 수 있다. 다음 예는 의도적으로 selectNodes()를 사용하여 두개의 노드를 한번에 얻도록 쿼리를 작성한 것이다. /Message/Body/Child 노드의 SSN(주민번호)값과 같은 SSN 속성을 가지는 Family노드를 찾아 LastName과 FirstName 노드의 text를 얻는 코드이다. (xpath_01.htm 참조)

var xpath = '/Message/Body/Family[SSN

          =string(/Message/Body/Child/@SSN)]/LastName 

          | /Message/Body/Family[SSN=string(/Message/Body/Child/@SSN)]

           /FirstName'; 
var nodes = xmldoc.selectNodes(xpath); 
var name = nodes[0].text + nodes[1].text; 
alert(name);

Xpath 성능향상

Xpath 역시 쿼리조건을 기술하는 방법과 사용하는 방법에 따라 많은 성능의 차이를 보인다. 가장 좋은 방법은 쿼리 회수 자체를 줄이는 것이며, 두번째는 쿼리의 대상이 되는 범위를 줄이는 것이다. 다양한 비교를 통해 성능 향상을 위한 구체적인 방법을 살펴보자. 이 글에서 사용한 예제 XML은 아래의 [sample_message.xml]이다.

시간 측정을 위해 LapTime.js 클래스(첨부파일 참조)를 사용하였다.

성능향상 – ‘//’를 쓰지 말 것

‘//’로 시작하는 쿼리는 XML DOM전체를 full-scan하기 때문에 좋지 않은 성능을 보여준다. [sample01.js]의 예제는 ‘//’를 쓴 경우와 절대 경로를 쓴 경우를 비교하고 있다. [sample01.js]의 코드에서 각각의 함수는 다음과 같은 내용을 가지고 있다.

1. 1. f1() – ‘//’로 시작하는 쿼리를 사용하였다.
   2. f2() – 먼저 부모노드를 찾고 그 다음 하위노드를 찾아 비교하였다.
   3. f3() – 절대 경로를 사용하였다.
   
   

[sample01.js]

f1은 두 개의 조건을 한번에 사용하였고, f2()는 한 개의 조건에 해당하는 노드를 찾은뒤 다시 하위 노드에서 두번째 조건을 사용하였다. f3()는 절대경로를 사용하였다. [그림1]은 f1()~ f3()함수를 각각 10,000씩 수행하는데 걸린 수행 시간을 보여주고 있다.

[그림1 – sample01.js 결과]

결과적으로 ‘//’로 시작하는 쿼리보다 절대 경로를 사용한 쿼리가 빠르다는 것을 알 수 있다. 이 차이는 XML DOM 문서가 크면 클수록 차이가 크게 생긴다.

성능향상 - 쿼리대상의 범위를 줄일 것

절대 경로를 사용하더라도 사용하는 횟수가 많으면 좋지 않은 성능을 가져올 수 있다. 매번 절대경로를 사용하는 것보다, 조회할 하위 노드 부분이 정해지면 상위 노드를 한번 찾아놓고, 하위 노드를 찾는 방식이 빠르다. 또한 특정 범위의 상위 노드를 처음 참조할 때 한번 찾아놓고, 다음 부터는 찾아놓은 노드를 활용하는 것도 성능 향상을 위해 좋은 방법이 될 수 있다.

[sample02.js]

[sample02.js]는 header1()과 header2(),header3() 함수로 구성되어 있다. header1()은 매번 절대 경로를 사용하여 속성값을 얻오는 것을 보여주고 있고, header2()함수는 부모 노드를 찾은 뒤 노드의 함수들을 이용하여 하위 노드(혹은 속성)값을 가져오는 방법을 보여준다.

header3()은 조금 더 진보한 방법을 사용하고 있다. 처음에 속성 노드를 찾아 놓고 JavaScript에 멤버를 추가하여 유지하도록 하는 방식(header3.attrs는 Java 혹은 C#의 static 멤버와 같다. 이와 관련하여 Object Oriented JavaScript (2)를 참조하라)을 사용하고 있다. 반복하여 호출하는 경우 즉, XML노드를 반복하여 참조하는 경우에 매우 유리하다. header1()과 header2(),header3() 함수의 수행속도를 비교한 결과는 아래 [그림2]와 같다.

[그림2 – sample01.js 결과]

성능향상 – 객체지향 JavaScript와 BOM 활용

JavaScript의 객체지향을 잘 이용하여 BOM(Business Object Model)을 생성하고 활용하면, 속도의 개선 뿐만 아니라 어플리케이션의 구성을 유지보수하기 좋은 형태로 구성할 수 있다. 앞서 이야기한 것과 같이 Xpath를 이용하여 XML DOM을 매번 조회하지 않고, 초기에 한번만 조회하도록 하였다. header1()과 header2()는 그러한 차이를 보여준다.

 
function header1(){

 this.getResultText = function _getResultText(){

  var result_text = '';

  var node = xmldoc.selectSingleNode("message/header/svc");

  result_text += "name=" + node.attributes.getNamedItem("name").nodeValue + ",";

  result_text += "mtd=" + node.attributes.getNamedItem("mtd").nodeValue + ",";

  result_text += "resid=" + node.attributes.getNamedItem("resid").nodeValue + ",";

  

  return result_text;

 }

}
function header2(){

 var result_text;

 this.update = function _update(){

  var node = xmldoc.selectSingleNode("message/header/svc");

  result_text += "name=" + node.attributes.getNamedItem("name").nodeValue + ",";

  result_text += "mtd=" + node.attributes.getNamedItem("mtd").nodeValue + ",";

  result_text += "resid=" + node.attributes.getNamedItem("resid").nodeValue + ",";

 }

 this.getResultText = function _getResultText(){

  if(result_text == undefined)

    this.update();

  return result_text;

 }

}

[sample03.js]

header2()는 두개의 멤버함수를 가지고 있다. getResultText()는 결과 값을 DOM으로부터 가져와 result_text에 기록하는 역할을 수행한다. 즉, DOM에 대한 Xpath 쿼리를 수행한다. 아래의 코드는 결과가 정의되어 있지 않을 때(undefined) Xpath 쿼리를 수행하도록 하고 있다.

if(result_text == undefined) this.update();

update() 멤버함수는 필요에 따라 호출될 수 있다. (예를 들어 XML DOM을 새로 읽었거나 변경된 경우). 이런 구성을 잘 활용하면, 속도의 증진 뿐만 아니라 복잡한 XML DOM과 템소를 Wrapping 하여 유지보수하기 좋고 이해하기 좋은 구성을 가지도록 코드를 작성할 수 있다. [그림3]은 반복하여 수행한 결과를 보여준다. (header2의 경우 Xpath 쿼리를 1회만 수행하므로, 반복적으로 Xpath 쿼리를 수행하는 header1에 비해 비교가 되지 않을 정도로 빠르다)

결론

Xpath 쿼리를 잘 작성하면, 여러 번에 나누어 쿼리하지 않아도 되므로 코드를 간결하게 유지할 수 있을 뿐만 아니라, 잦은 쿼리의 부하도 줄일 수 있다. XML DOM을 효과적으로 다루는 첫번째 방법은 쿼리회수 자체를 줄이는 것이고, 두번째는 검색 대상 범위를 줄이는 것이다. DOM 전체를 크게 몇 개의 논리적인 단위로 나누고, 각각의 상위 노드에 대한 참조를 가지고, 그 참조에 대해 Xpath 쿼리를 하는 것도 하나의 방법이다. 또한, BOM을 잘 구성하여 Xpath와 관련된 operation을 wrapping 함으로써, 속도의 개선뿐만 아니라 유지보수하기 좋도록 어플리케이션을 구성할 수 있다.

invalid-file

basicGrid.html

<html>
<head>
<title>Basic Grid</title>
<link rel="stylesheet" type="text/css" href="http://techbug.tistory.com/resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="basicGrid.js"></script>
</head>
<body id="basicGridBody">
	<div id="DIV_GRID_HERE"></div>
</body>
</html>

basicGrid.js

ActionScript

또한 FlashPlayer9에서 <form>태그내에서 쓸때 버그를 해결하기 위해서는 다음과 같이 작성한다.

 이달(2008.4월말)에 다시 보안 업뎃 된다는데 어케 바뀔지는 두고봐야 게따.. 다시 바꿀일이 없길 바라믄서...

2.1 (2008 봄)

• RESTFul 지원 (그리 RESTFul 하지 않던데.. ㅡ.,ㅡ;)
  
• 원격컴포넌트 로딩
• 전통적인 비Ajax적인 Submit 지원클래스
• 다른 JS라이브러리 Adapter 업그레이드
• AIR 플랫폼 지원추가
• 그리드 필터링
  
• 체크박스/라이오 그룹
  
• 상태바

2.2 (2008 여름)

• Ext.Ajax 기능향상
• Ext컴포넌트만의 초점을 맞춘(scoped) reset style지원
• XML을 포함한 추가적인 TreeLoader 데이타로딩
• 슬라이더 컴포넌트
  
• 파일업로드 필드
  

3.0 (2008 겨울/2009 초)

• Ext 이벤트 등록모델 업데이트
• 플래쉬 챠트 API ( Gwt-Ext에는 구글 챠트를 이용하던데..)
• Comet/Bayeux 지원
• 통합된 client-server 데이타 바인딩/marshaling for Ext components
• Browser history support (흠.. window.event.hash값을 이용한걸까? 기대되네..)
  
• ListView
• Section 508(장애자 지원정책:웹접근성) 기능향상
• 
  

XML은 기존의 훌륭한 Formatter와 개발툴들이 많이 있으나(가량, XMLSpy와 같이..) JSON에서는 해당하는 포맷터를 찾기 힘들었다.
Visualizer같은것이 있다면 좋을텐데 라는 생각에 검색을 보니 아래와 같이 좋은놈(?)이 있었다.. Search is life ㅡ.,ㅡ;

Formatter
http://curiousconcept.com/jsonformatter

Visualizer
http://www.codeplex.com/JsonViewer/Project/ProjectRss.aspx (이넘은 Fiddler Plugin까지 있다.)
http://www.epocalipse.com/blog/2007/06/03/json-viewer/

이놈은 StandAlone형태, Visual Studio Plug-in, Fiddler에서 Plug-in형식으로 볼수 있게 해준다 
Fiddler에서 사용하는 방법은 아래와 같다.

Fiddler2 (http://www.fiddler2.com) 를 설치하고 해당 디렉토리의 fiddler.exe.config파일을 열어서 아래와 같이 추가한다.

<configuration> 


  <runtime> 


    <legacyUnhandledExceptionPolicy enabled="1" />


 <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">


     <probing privatePath="Inspectors" />


 </assemblyBinding>


  </runtime> 


</configuration> 

과 같이 설정후 Inspectors  디렉토리에 다운로드 받은 dll파일을 추가한다. 

FireFox에서의 사용
FireFox에서 Fiddler를 사용하려면 설정의 고급->네트워크->연결->프록시설정에서 아래의 프록시 자동설정주소에서
file:///C:/사용자문서위치/Documents/Fiddler2/Scripts/BrowserPAC.js 을 입력후 새로고침한후 실행하면 된다. (아래 다시 설명.. ㅡ.,ㅡ;)

참고적으로 IE7 에서 실행이 안되거나 Fiddler2에서 폰트가 깨져나올때
Tools > Fiddler Options 에서 Enable IPv6 항목을 uncheck 해주면 된다.

Fiddler는 브라우저와 서버와의 HTTP 통신 상태를 보여주는 HTTP Debugging proxy이다. Fiddler에 대해서는 다음을 참조한다. (http://www.fiddlertool.com)
Fiddler를 사용할 경우 IE나 Opera 또는 그 외의 HTTP 통신은 모두 잡는다. 그런데 유독 firefox의 HTTP 통신은 잡지 못한다.

다음과 같은 방법으로 firefox에서도 fiddler를 사용할 수 있다.

1. Fiddler를 설치하고 실행한다.

2. "내 문서" 폴더 밑에 보면 "Fiddler2"라는 폴더가 있다. 그 하위 폴더에 Scripts라는 폴더가 있으며 이 디렉토리 경로를 복사한다.

3. Firefox를 열어 "도구 > 설정" 메뉴에서 "고급"을 선택한다.

4. 고급메뉴에서 "네트워크" 탭의 연결의 "설정" 버튼을 선택하여 "프록시 자동 설정 주소"를 선택하고 위에서 디렉토리 경로를 붙여넣고 마지막에 "BrowserPAC.js" 파일을 추가한다.
    예)  C:\Documents and Settings\stan\My Documents\Fiddler2\Scripts\BrowserPAC.js

6. Firefox를 restart하면 firefox의 HTTP 통신이 fiddler에 잡힌다.

• Firebug (in browser)
• HTTPWatch (in browser)
• Fiddler (proxy based)
• Netmon (network level)
• Wireshark (network level)
• Charles (proxy based)

httpwatch.zip

NM33_x86.zip

wireshark-setup-1.0.7.part1.rar

wireshark-setup-1.0.7.part2.rar

wireshark-setup-1.0.7.part3.rar

invalid-file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

		<title>Ext.ux.PasswordMeter</title>

		<link rel="stylesheet" type="text/css" href="../ext-1.1.1/resources/css/ext-all.css" />

		

		<script type="text/javascript" src="../ext-1.1.1/adapter/ext/ext-base.js"></script>

	    <script type="text/javascript" src="../ext-1.1.1/ext-all.js"></script>

		<script type="text/javascript" src="Ext.ux.PasswordMeter.js"></script>

		<script type="text/javascript" src="passwordmeter.js"></script>

		<link rel="stylesheet" type="text/css" href="passwordmeter.css" />


		<!-- Common Styles for the examples -->

		<link rel="stylesheet" type="text/css" href="../ext-1.1.1/examples/examples.css" />

	</head>

<body>

<div style="width:300px;">

    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>

    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">

        <h3 style="margin-bottom:5px;">Simple Form</h3>

        <div id="form-ct">


        </div>

    </div></div></div>

    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>

</div>

<div class="x-form-clear"></div>

</body>

</html>

[Javascript]



Ext.onReady(function(){


    Ext.QuickTips.init();


    // turn on validation errors beside the field globally

    Ext.form.Field.prototype.msgTarget = 'side';


    /*

     * ================  Simple form  =======================

     */

    var simple = new Ext.form.Form({

        labelWidth: 75, // label settings here cascade unless overridden

        url:'save-form.php'

    });

    simple.add(

        new Ext.form.TextField({

            fieldLabel: 'First Name',

            name: 'first',

            width:175,

            allowBlank:false

        }),


        new Ext.form.TextField({

            fieldLabel: 'Last Name',

            name: 'last',

            width:175

        }),


        new Ext.form.TextField({

            fieldLabel: 'Company',

            name: 'company',

            width:175

        }),


        new Ext.form.TextField({

            fieldLabel: 'Email',

            name: 'email',

            vtype:'email',

            width:175

        }),

		new Ext.ux.PasswordMeter({

            fieldLabel: 'Password',

            name: 'password',

            width:175

        })

    );


    simple.addButton('Save');

    simple.addButton('Cancel');


    simple.render('form-ct');

});






[JQuery로 만든 Password Meter ]

invalid-file



<html>

	<head>

		<title>Jquery</title>

		<style type="text/css">

		<!--

			.password {

				font-size : 12px;

				border : 1px solid #cc9933;

				width : 200px;

				font-family : arial, sans-serif;

			}

			.pstrength-minchar {

				font-size : 10px;

			}

		-->

		</style>

	</head>		

	<script type="text/javascript" src="jquery.js"></script>  

		<script type="text/javascript" src="jquery.pstrength-min.1.2.js"></script>

		<script type="text/javascript">

			$(function() {

			$('.password').pstrength();

			});

		</script>

	<body>

		<INPUT class="password" type=password name="Password">

	</body>

<html>






[참고 사이트]

http://justwild.us/examples/password/

http://www.codeandcoffee.com/2007/07/16/how-to-make-a-password-strength-meter-like-google-v20/

http://testcases.pagebakers.com/PasswordMeter/

http://www.passwordmeter.com/

http://ajaxorized.com/?p=14

http://simplythebest.net/scripts/ajax/ajax_password_strength.html

http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/