Google Trend를 이용해서, 최근에 사용되고 있는 웹 기술들을을 한번 살펴 보았다.
기술이라는 것이 단지 인기에 의해서 흥하고 망하는 것은 아니지만, 사람들이 관심을 끌고 있는 기술들이 무엇인지 안다면, 분명히 그 이유가 있다. 그리고 이를 안다면 개발하고자 하는 프로젝트에 적용할 때, 적지 않은 도움이 될거라고 생각된다.

내가 회사에서 관련 있는 프로젝트는 ExtJS를 기본 Javascript Framework로 사용하고 있는데, ExtJS는 라이센스가 유료이다. 그리고 많은 Component를 개발자에게 제공하지만, 이를 숙달할수 있도록 익히기 위해서는 약 2달정도의 공부할 수 있는 시간이 필요하다. 왜냐하면, Javascript와 CSS의 기본을 충분히 알지 못한다면, 각 Componet를 원하는대로 쉽게 제어하기 힘들기 때문이다.
그래서, 최근에는 JQuery를 검토하고 있고, 이는 생각보다 개발자드의 코드를 많이 줄여주고, 코드를 단순화 시키는데 도움이 된다. 

Google Trend를 통해, 이러한 기술들에 대한 사람들의 관심도를 알아보기 위해서 검색을 해보니, JQuery에 대한 관심도가 상승곡선을 타고있고 Prototype과 ExtJS는 상대적으로 낮은 traffic을 보여주고 있다.

     jquery: 6.40    prototype: 9.80    extjs: 1.90

 위 그래프는 JQeury의 관심도가 ExtJS보다 약 6배정도 높다는 것을 보여주고 있다. (ExtJS를 1이라고 볼때, JQeury는 6.40의 traffic을 보여주고 있다.)  Prototype의 traffic은 초기부터 현재까지 거의 일정하다. 이를 사랑하는 사람들이 꾸준한 애정을 가지고 있다고 할 수 있다.

다음은 개인적으로 관심을 가지고 있는 Microsoft의 ASP.NET MVC에 대한 사람들의 관심도를 알아볼 것이다.
최근에 ASP.NET 3.5의 Extention으로 마이크로소프트 사는 MVC프레임워크를 개발하고 1.0버전을 공식 발표했다.
이에 대한 사람들의 관심도는 기대 이상으로 보인다. 향후에 이를 이용해서 개발하는 개발자들이 꾸준하게 늘거라 생각한다. 그리고 MS에서는 Asp.net에서 제공하는 기본 Javascritp framework으로 JQuery를 제공하고, 이를 Visual studio에서 툴로서 지원하고 있다. 

최근에 많이 사용하고 있는 Spring MVC와 Structs를 비교해서 검색해 보았다.
Spring MVC는 꾸준하게 관심도를 유지하는 반면에, Structs는 시간에 지남에 따라 상대적으로 관심도가 줄어 들오 있다. 이에 반해 MS의 ASP.NET MVC는 최근에 발표된 이후로 많은 관심을 끌고 있음을 아래 차트를 통해서 알수 있다.
 
    spring mvc: 2.10    struts mvc: 1.00    asp.net mvc: 1.40  

위의 차트가 모든 것을 다 말해줄수는 없다. 최근에 발표되었기 때문에 MS의 ASP.NET MVC가 사람들의 관심을 끌고 있을 수도 있고, 검색 조건에 따라서 차트의 결과가 달라질 수도 있기 때문이다.
그러나 분명한 것은 개인적으로는 MS에서 발표한 MVC 프레임워크와 Scheffold 기능은 오픈 소스에서 진행되었던 여러 프로젝트의 장점들을 따서 만들었기 때문에 개발자들에게 도움이 될거라는 점이다.

어떤 기술을 선택할지는 개발자의 몫이다. 기간과 리소스와 개발자들의 기술 수준을 고려해서 프로젝트 초기부터 잘 검토한다면, 효율적인 개발이 이루어질거라 믿는다. 초기에 제대로 검토하는 시간과 노력없이 프로젝트를 진행해서 나중에 땜빵으로 누더기를 만드는 프로젝트를 여러번 보아왔다. 이 또한 개발자의 양심과는 대치대는 것이지만, 후 작업과 품질 좋은 코드를 원한다면, 초기에 많은 시간이 들여야 한다.

항상 하는 이야기지만, 개발자는 코드로 이야기 해야한다.

최근에 프로젝트에 ExtJS를 비록하여 몇가지 JavaScript 프레임워크를 검토한 적이 있다.
내부적으로 ExtJS를 사용하고 있지만, 결코 주변의 다른 프로젝트를 진행하고 있는 사람들에게는 적극적으로 권하지 않는다. 왜냐하면, 한국은 HTML, CCS 그리고 JavaScript를 웹 프로그램의 한 부분으로 생각하지 않고 있을 뿐더러, 그렇다고 디자이너의 역할 중의 하나라고도 생각하지 않는다. 그렇게 때문에 HTML, CSS 그리고 JavaScript의 전문가를 찾아 보기가 쉽지 않다.

ExtJS를 권하지 않는 이유는 처음 이를 사용할 때는 Windows에서나 제공할 수 있었던 많은 기능들이 컴포넌트화 되어 있어서, 사용하기 편할거라는 생각을 하는데, 이를 응용한 새로운 컴포넌트를 만들거나 제대로 기능을 사용하려면, 약 2달정도의 학습시간이 필요하기 때문이다. 개발 초기에 이를 감안한다면, 사용하는 것은 별 문제 없지만, 기존의 HTML과 CSS만을 이용할 때보다는 전체 개발시간이 늘어날 거라고 반드시 예상하고 개발 플랜을 잡아야 할 것이다.

최근에 기존에 개발되어 있던 기능을 살펴볼 일이 있었다.
개발자가 ExtJS의 코드를 그대로 가져다 써서 인지 사소한 버그가 있었다. ExtJS의 버그나 잘못은 아니라고 생각한다. Ajax와 ExtJS의 그리드 컴포넌트를 이용하였는데, 마지막 페이지에 있던 Rows를 모두 삭제하면 이전 페이지로 이동해야 하는데, 마지막 페이지 그대로를 표시하는 것이었다.

그래서, 몇가지 자료를 찾아보았더니, 관련된 예제는 아래와 같은 Link에 있었다.
그리드에 데이터 목록을 가져오고, 목록에 추가/수정/삭제에 대한 예제가 있다.

예제: Tutorial:Using Ext grid form dialog to achieve paging list, create, edit, delete function 

이중에서 delete에 대한 예제는 아래와 같았다. (아래 Delete Function 예제 참조)

Delete function Delete function will get the selected id(s) and create JSON data and send JSON data to Java server-side for handle. /************************************************************ * Action - delete * start to handle delete function * need confirm to delete ************************************************************/ function doDel(){ var m = grid.getSelections(); if(m.length > 0) { Ext.MessageBox.confirm('Message', 'Do you really want to delete it?' , doDel2); } else { Ext.MessageBox.alert('Message', 'Please select at least one item to delete'); } }   function doDel2(btn) { if(btn == 'yes') { var m = grid.getSelections(); var jsonData = "["; for(var i = 0, len = m.length; i < len; i++){ var ss = "{\"id\":\"" + m[i].get("id") + "\"}"; //alert(ss); if(i==0) jsonData = jsonData + ss ; else jsonData = jsonData + "," + ss; ds.remove(m[i]); } jsonData = jsonData + "]"; ds.load({params:{start:0, limit:myPageSize, delData:jsonData}}); } } And delete parameter to server side with JSON data like this: delData=[{"id":"5"},{"id":"6"}]

위 예제를 보면, 서버로 데이터를 요청할 때, 파라메터로 start 값과 limit값을 보내줌을 알수 있다.
상기 예제 소수의 하단을 보면,    ds.load({params:{start:0, limit:myPageSize, delData:jsonData}});
라는 코드가 눈에 들어올 것이다. 이를 이용하여, 서버에서 DB에 쿼리를 수행해서 현재 페이지에서 필요로 하는 첫 번째 인텐스 값과 현재 페이지에서 표시할 수 있는 데이터의 갯수를 가져오는 것인데, 위 예제는 기본적으로 "0"번 인덱스를 서버로 보내서 매번 1페이지만 가져오는 것이다.

만약 이를 해결하려면, 두가지 방법이 있는데

첫번째는 위에서 사용했던 함수 ds.load({params:{start:0, limit:myPageSize, delData:jsonData}});
의 start 파라메터에 이전 페이지의 첫번째 인덱스를 넣어주는 것이다. 이를 위해서는 전체 Total Counter를 이용하여 총 페이지 수와 인덱스를 찾는 로직이 필요한데, 이미 많이 사용되는 코드라 쉽게 찾고, 만들수 있을 거라 생각된다.

두번째는 페이지 네이션을 모두 서버에서 담당하는 것이다. 이 경우는 동시에 사용자들이 수정 추가 삭제에 대해 부분도 충분히 고려되어 질 수 있다. 이에 필요한 계산 로직은 위의 첫번째 방법과 별로 다르지는 않고 단지 책임에 대한 부분만 책임을 지면된다. 이때는 서버에 현재 페이지의 첫번째 인덱스 번호를 서버로 보내주는 것이 바람직하다.
이를 이용하여 서버에서는 전제 개수와 페이지를 계산하고 마지막 페이지가 존재하지 않는 경우 이전 페이지의 목록을 보내주면 되기 때문이다.