어제는 근로자의 날이라서 출근하지는 않았었다. 그리고 전날은 부부동반 모임이 있어서, 늦에 들어온 것을 핑계삼아 간만에 게으름도 피우고 그랬다. 아니 사실은 게으름을 피운 것운 것이 아니라, 감기인지 못살인지 몸이 좋지 않아서 누워서 오전을 보냈다. 선천적으로 늦잠을 좋아하지 않는 관계로 시간이 무척 아까웠다.

무엇을 할까 고민하다가, Google App Engine에 스프링으로 간단한 페이지를 한번 올려봐야지라는 생각이 들었다.
최근에 Google의 Eclipse 플러그인과 SDK는 이미 설치해서 간단한 것들은 적용해 본 상태여서, Google의 App Engine의 인증만 남은 상태이므로 남은 작업은 정말 간단하다.

만약 Eclipse에 Google App Engine Plugin과 SDK를 설치 하지 않았으며,
이전에 블로그에 올렸던 다음의  글을 "Google App Engine SDK 설치 및 실행" 를 참조 하기 바란다.

위와 같이 Google App Engine을 위한 기본 환경을 만들었으면, Spring Framework를 다운 받아야 한다.
이미 Spring Framework를 이용하여 개발한 경험이 있는 개발자라면, 기존에 가지고 있던 Library들을 그대로 사용하면 되지만, 그렇지 않은 개발자라면 www.springframework.org 에서 다운 받아야 한다.
                      - Spring Framework 2.5 Dependency Version Download

지금은 SpringFramework 3.0M3가 공개되고 있지만, 정식 Release된 2.5.5버전을 예제 작성에 사용할 것이다.
(물론 다른 버전을 사용해도 큰 영향은 없을거라 생각된다. 환경만 잘 맞추어 주면 말이다.)

자 이제 본론으로 들어가서, Google App Engine의 Eclipse Plugin을 정상적으로 설치하게 되면, Eclipse의 상단 메뉴텝에 다음과 같이 3개의 아이콘들이 생겨난 것을 볼수 있을 것이다.

   

위의 창에 생성할 프로젝트 이름을 입력하고, 기본적으로 생성할 패키지명도 입력한다. 만약 Google Web Toolket를 사용하기 원하지 않으면 체크박스에서 체크 표시를 지워주고 하단에 있는 "Finish"버튼을 클릭하면 된다.

프로젝트를 생성하면 기본적인 Servlet을 예제로 제공한다. 자 일단 테스트를 위해서 이를 실행해 보자.
아래와 같이 "Debug As" 메뉴의 서브 메뉴인 "Web Application" 를 실행시키면 웹서버가 실행된다.

common-log.jar 파일은 Google에서 제공하는 logging 패키지를 이용해도 되지만, Spring의 "DispatcherServlet"을 로딩할때 에러가 나기 때문에 넣어준 것이다. 위의 "step-by-step" 예제를 따라하면, 기본적인 웹페이지를 작성할 수 있을 것이다. 다만, "Ant Build"에 관한 내용과 "Unit Test"에 관한 부분은 크게 신경 쓰지 않아도 된다.

Spring의 "DispatcherServlet"을 이용한 기본적인 예제는 큰 에러 없이 작성될거라 믿는다. 만약 에러가 난다면, Google의 SDK없이 만들어서 돌려보기 바란다. 기본적인 개념을 익히는데 큰 도움이 될거라 믿는다.

일단 http://localhost:8080 을 이용해서 무리가 없으면,

최근에 프로젝트에 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 예제 참조)

/************************************************************
    * 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}});		
		}
	}