달력

3

« 2024/3 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

'javascript framework'에 해당되는 글 2

  1. 2009.04.11 ExtJS의 그리드 기능 간단 분석
  2. 2009.02.05 [도서] Pro JavaScript Techniques 1
2009. 4. 11. 08:53

ExtJS의 그리드 기능 간단 분석 Tip & Tips/JavaScript2009. 4. 11. 08:53

최근에 프로젝트에 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를 이용하여 총 페이지 수와 인덱스를 찾는 로직이 필요한데, 이미 많이 사용되는 코드라 쉽게 찾고, 만들수 있을 거라 생각된다.

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

:
Posted by 행복상자
작년에 진행하던 프로젝트를 마무리하고 나서 틈틈히 공부하는 책이 있다.
사실 웹 개발을 오래하다 보면, 쉽게 간과하기 쉬운 부분이 Javascript와 CSS와 같은 부분이다. 왜냐하면, 요즘에 나오는 HTML Editor 툴과 개발에 사용하는 IDE의 성능이 상당히 향상되어서 양질의 코드를 생산할 수 있기 때문이다.
그러나 요즘에 사용하는 자바스크립트는 이전의 그것과 전혀 다른 모습을 띄고 있다. 한 마디로 스크립트 언어이기에 배우기 쉽고, 인터넷의 웹에서 비슷한 Sample들을 쉽게 가져 올 수 있기 때문에 별로 배울 가치가 없다라고 생각하면 큰 코 다친다.

AJAX라는 기술이 Web 2.0을 대표하는 기술로 이야기 되어진 이후로, Javascript를 좀도 체계적이고, 라이브러리처럼 쓸수 있는 많은 Javascript Framework들이 만들어 졌다. Yahoo의 YUI, Roby on Rails에서 기본적으로 사용할 수 있는 Prototype, 최근에 마이크로 소프트의 ASP.NET을 위해서 Visual Studio에서 지원하는 JQuery 그리고, ExtJS와 같은 상용 프레임워크까지 셀수 없이 많은 새로운 Javascript Framework가 나타나고 있다.

하지만 자바 스크립트라는 언어의 근간을 이해하지 못하면, 좀더 효율적으로 사용하지 못할 거라고 생각 한다. 그렇기 때문에, 공부의 우선순위가 떨어져서 한번을 공부해야지 했던것이 이제야 살펴 볼수 있는 기회를 갖게 되었다.

책을 읽어가면서 내가 느낀것은, 한마디로, 내가 10여년전에 사용하고 이해하던 자바스크립트와는 전혀 다른 세계였다. OO를 적용한 객체지향적인 속성과 재활용을 위한 여러가지 기능과 속성들을 이해해야만 한다.  너무나도 자유롭고 쉬운 문법을 가지고 있지만, 확장과 변경을 위해서는 언어의 특성을 완전히 이해해야만 한다.

위의 보이는 사진속의 책이 내가 최근에 공부하고 있는 책이다.
책은 각 쳅터의 주제에 맞는 쉬운 예제들을 보여주고 있다. 이를 통해서 기본 원리들을 익힐 수 있도록 구성되어 있다. DOM을 통한 Object를 찾고 접근하고 제어하는 방법과 Dynamic HTML의 속성들을 이용하여 접근할 수 있는 Object들의 사용법도 익히면, 책의 내용을 이해할 수 있는 기본적인 소양을 갖추고 있다고 할 수 있다.

책의 내용을 결코 어렵지 않지만, 이전에 알고 있던 자바스크립트에 대한 선입견을 버리지 않는다면 쉽게 이해하기 어려울 것이다.

나와 같이 개발에 참여하고 있는 개발자는 ExtJS를 이용하는데, 큰 어려움을 가지고 개발 작업을 진행했다. 사실 ExtJS를 구매하고 개발에 이용하는 목적은 개발의 효율성과 리소스를 절약하려는 목적이었는데, 이에 대한 효과는 전무하였다.
나름 대로 분석을 해보면, 주어진 컴포넌트는 API 다큐멘트를 찾아보면 알수 있지만, 이의 변형이나 새로운 형태로 변형을 가할 때는 Javascript와 Prototype 라이브러리에 대한 이해가 적었기 때문이다. 그렇기 때문에 다른 컴포넌트를 이용할 때도 기본기는 항상 중요하다.

약 380페이지의 책중에서 현재 110페이지를 읽고, 코드를 짜보고 있다. 책 속에는 개발시 필요한 디버커 툴을 소개해 주고 있는데, 개인적으로는 Firefox의 plug-in인 Firebug를 좋아하고 자주 사용하고 있다. 이외의 다른 툴들은 책의 내용을 참고하면 된다. 그리고 Junit와 유사한 Javascript Unit 테스트 툴들도 소개하고 있다. 아직은 별로 관심 없는 부분이다.




:
Posted by 행복상자