그런데 이 과정에서 여러명의 개발자가 협업을 하게 되면 서로간의 코딩 규약을 지키고 일정을 맞추고 재사용성이 가능한 콤포넌트를 개발하는데 집중하게 된다.

더 나아가 팀내에서 공용으로 사용하게 되는 라이브러리를 개발하는 경우 신경 써야하는 것들이 늘어나고 다양한 언어와 환경을 고려해야 하는 상황에 직면하게 된다.

최근 Ajax 관련된 공용 라이브러리를 만들고 있는데 정말 머리에 쥐나는 작업이다. prototype.js 기반으로 클라이언트 예제 파일과 asp로 작성된 서버쪽 예제를 작성하고 있다. asp용 JSON 라이브러리가 없기 때문에 XML parser 를 추가하고, DOM 객체를 다루는 예제 코드를 작성 중이다.

그냥 개인적으로 또는 같은 프로젝트 내에서만 사용한다면 좀 더 마음 편하게 작업할 수 있을텐데, 개발그룹내에서 공통으로 사용할 코드를 만든다니 생각할 것이 많아진다. 최근 읽은 ‘TDD 개발 방법론’이나 ‘실용주의 프로그래머’의 영향 때문일까? 중복을 배제하고 가독성이 좋으며 독립된 형태로 만들어야 한다는 강박관념과 열심히 만들었지만 왠지 완성도가 떨어져 보이는 불안감이 계속된다. 그리고 결국 자신의 코드에 자신이 책임져야 한다는 무거운 압박.

아마도 이런 어려움을 겪는건 아직 내 실력과 경험이 부족하기 때문이 아닐까 싶다. 하지만 이런 경험을 통해 아키텍쳐로 발전해 갈 수 있을거라 생각한다. 역시 스트레스는 사람을 피곤하게 하지만 도전하지 않으면 발전도 없다. 계속해서 고민하고 완성도를 높여갈 수 밖에.

완성이라는 것은 더 이상 더할 것이 없을 때가 아니라, 더 이상 빼낼 것이 없을 때 얻게 되는 것이다.
- 생텍쥐페리Antoine de St. Exupery, [바람과 모래와 별들Wind, Sand, and Stars] 1939

1. JSON 라이브러리 : JSON(JavaScript Object Notation)은 텍스트 기반의 가벼운 데이타 전송 포맷이다. 값(문자, 숫자, boolean, null), 객체, 배열 세 가지 종류의 형태로 데이타를 전달할 수 있고, 웹 페이지에서 사용하는 json.js을 비롯해서 다양한 언어에서 사용가능한 라이브러리를 제공해주고 있다.

간단한 사용예를 보면 다음과 같다.

1) AJAX를 통해서 서버에 데이타를 보내는 경우

function getXmlHttpRequest() {
 if(window.XMLHttpRequest)
  return new XMLHttpRequest();
 else
  return new ActiveXObject("Microsoft.XMLHTTP");
}

function reqData() {
 var info = {};
 info['name'] = 'fantazic';
 info['url'] = 'http://fantazic.com';
 var encoded;

 try {
  encoded = JSON.stringify(info);
  //객체를 저장하는 경우
  //{"name":"fantazic","url":"http://fantazic.com"}
 } catch(e) {
  alert(e);
  return;
 }

 var xmlhttp = getXmlHttpRequest();
 xmlhttp.open("POST", "ajax_json.jsp", true);
 xmlhttp.setRequestHeader('Content-Type', \\
 'application/x-www-form-urlencoded');
 xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readyState == 4) {
   if(xmlhttp.status == 200) {
    try {
     var parsedObject = JSON.parse(xmlhttp.responseText);
     if(parsedObject.result == true) {
      alert('success');
     } else {
      alert(parsedObject.reason);
     }
    } catch(e) {
     alert(e);
     return;
    }
   }
  }
 }

 xmlhttp.send('info=' + encoded);
}

2) 서버쪽에서 데이타 처리 및 응답부분 (JAVA)

try {
 String info = request.getParameter("info");
 JSONObject getObj = new JSONObject(info);
 JSONObject returnObj = new JSONObject();

 if(getObj.get("name").equals("fantazic") \\
 && getObj.get("url").equals("http://fantazic.com")) {
  returnObj.put("result", true);
 } else {
  returnObj.put("result", false);
  returnObj.put("reason", "입력내용이 잘못됐습니다.");
 }

 response.getWriter().print(returnObj.toString());
} catch(Exception e) {
 e.printStackTrace();
}

JSON을 사용하면 직관적인 데이타 구성이 가능하고, 브라우져별 XMLParser 차이에 영향을 받지 않는 장점이 있다. JSON은 싸이월드 팀플의 참여자 정보, 다음 메일의 주소록 등에서 이미 많이 사용되고 있다.

2. Rico 라이브러리 : AJAX를 사용하는 경우 AJAX를 이용해 비동기적 통신을 하는 것보다 DHTML과 DOM을 사용해 동적으로 페이지를 구성하는데 어려움을 겪는 경우가 많다. 웹표준을 지키며 편리한 동적 UI를 쉽게 만들 수 있는 다양한 라이브러리가 공개되어 있는데 그중에서 Rico를 소개한다.

오픈 소스로 제공되는 Rico 라이브러리를 다운받은 후 사용할 수 있다. 데모에서 볼 수 있는 많은 기능 중 Drag&Drop 기능과 Live-Grid Search 기능을 예로 들어 살펴보겠다. (자세한 기능은 메뉴얼을 참고하면 된다.)

1) Drag&Drop : 구글 개인화 페이지 등에서 아이템을 마우스 드래그로 옮길 때 사용되는 기술로, Rico에서는 AjaxEngine 을 제공해준다. AjaxEngine을 통해 XML 형태로 데이타를 전달할 수 있고, html code를 지정된 target 영역에 대체할 수 있다. Rico 라이브러리는 javascript의 Class, prototype.js 기능을 사용하는데, Rico에서 사용된 Class를 확장해서 사용할 수 있다.

//Drag 가능한 영역을 추가한다.
function createDraggables(val) {
 for ( var i = 1 ; i <= val; i++ ) {
  dndMgr.registerDraggable( \\
  new CustomDraggable($('photo'+i)));
 }
}

//Drop 가능한 영역을 추가한다.
function createDropZones(val) {
 for ( var i = 1 ; i <= val; i++ ) {
  dndMgr.registerDropZone( \\
  new CustomDropZone($('photo'+i)));
 }
}

//Drag 시작할 때 처리하는 부분
CustomDraggable.prototype = ( \\
new Rico.Draggable()).extend( {
....
}

//Drop 됐을 때 처리하는 부분
CustomDropZone.prototype = ( \\
new Rico.Dropzone()).extend( {
....
}

2) Live-Grid Search : 기존의 숫자로 된 페이징을 스크롤 기능을 이용해 구현한 기능이다. Rico.LiveGrid Class를 사용해 데이타 요청을 하고 서버에서 XML 형태로 데이타를 전송한다. 보여지는 데이타 전/후의 일정 데이타를 캐쉬하는 기능도 제공해준다.

Rico 라이브러리를 사용할 경우 XML에 html code를 넣어서 지정한 특정 요소의 내용 전환이 가능하다. 이 경우 html tag 는 XML 형식에 맞춰야 한다. (예 <br />)

위에서 소개한 라이브러리 외에도 다양한 공개 라이브러리가 존재하니 개발에 활용한다면 AJAX 적용에 많은 도움이 될 것이다.