저의 전공들입니다. 배워도 배워도 끝도 없는 세상. 언제쯤 마무리 지을런지..

오픈 소스, Maven, Hibernate, Spring ,Stripes , Spring, Spring Security, Java,Css,Web 2.0,iBatis,EJB,J2EE,Dojo Toolkit, Prototype.js, Script.aculo.us, jQuery, Trac, Eclipse

 

이젠 저 혼자 아는 것도 외로워서리, Java 개발자라면 Java 개발자다운 세상을 만들어 가보고 싶네요.

궁금한게 있으시다면 질문 언제나 환영입니다. 비록 포스팅은 많이 하지 않지만..;;


Spring

이제 거의 모든 프로젝트에 스프링을 필수 입니다. 물론 스프링 프레임웍이 최고라고 단정할 수 없겠습니다만, 세계적으로 이만한 기반을 쌓아놓았다는 것 자체가 힘입니다.

스프링은 그저 Dependency Injection(Inversion of Control), AOP(Aspect Oriental Programming) 밖에 없습니다. 이2개로 다 해결하죠. 

또한 이놈을 씀으로서 자연스럽게 소스를 구조화시키죠. 스파게티로부터 일단 한단계는 벗어나는겁니다.

묻지 마시고, 일단 이건 시작하십시오.

 

Maven

정말 이놈을 만난 순간 이런 세상에 내가 태어났다는게 참으로 감사했죠. 이놈이 나오기전에 내가 있엇으면 참 얼마나 뻘짓들을 하면서 살았을련지.

Ant 를 대체하며, 태스크 중심이 아닌 프로젝트 빌드에 초점을 맞춘 툴입니다.

전세계의 97% 오픈소스가 Maven 으로 기반으로 되어있다고 합니다.

우리 회사는 오픈 소스 아니니깐 상관없어?

무슨 그런 말씀을..ㅡㅡ;;; Maven 을 도입하고 조금 더 게을러져봅시다. 

Hibernate

오랜 시간동안 하이버네이트를 다뤄왔습니다. 국내에서는 별로 쓰이지도 않음에도 불구하고, 그 매력에 빠져 헤어나오지를 못하네요..^^

이제 하이버네이트에 대한 부담감이 없지만, 초창기에는 국내 커뮤니티가 참으로 작아 힘들었더랬죠.

이젠 제가 여러분에 도움을 드릴 수 있지 않을까 합니다.

 

 

Stripes

스트라이프를 써보셨나요? 들어본 적도 없으시죠?

스트럿츠, 스프링 웹MVC 모두 저리가라입니다. 프레임워크에 학을 때시나요?

현재는 스트라이프가 답일 거라 생각합니다. 이또한 국내 커뮤니티가 전무하군요..

워낙 쉬워서 사실 국내문서화가 얼마나 필요할까 싶기도 합니다만..^^

스트러츠를 갈아버리는 그 날까지 제가 일조를 했으면 하는군요


Prototype.js, jQuery, Dojo Toolkit, Ajax

사실 Ajax 라는 것은 무척쉽습니다. 한줄이면 끝나는 말인걸요.

비동기적으로 서버에 메시지 보내서 받아오는 것

이미 알고 계신가요ㅎㅎ 그저 자바스크립트가 싫을 뿐인거죠? 

이러한 자바스크립트 라이브러리를 사용해 보십시오. 자바 스크립트도 나름 재밌구나라는 생각도 듭니다.

지긋한 스크립트 지옥으로부터 탈출하는 습관을 만들어 줄겁니다.



이 글은 스프링노트에서 작성되었습니다.

Dojo Toolkit 이 제공하는 위젯들을 굉장히 쓸만한다.
대표적으로 사용되는 위젯들은 dijit.form 위젯들인데, Textbox, Date, Time 등 폼에 관련된 많은 것들이 깔끔하고 편하다. 예전에 동적으로 Tree 를 생성하는 글을 작성한 바있는데, 이번엔 정적/동적 및 동적으로 만들어진 widjet 을 prototype 으로 다루는 방법에 대해서 설명해보겠다. 물론... 이 글을 쓸만한 가치가 없을 정도로 쉽다.

1. 동적으로 위젯 생성하기
스크립트 로드는 당연한 일이므로 작성하지 않는다.
동적이든, 정적이든 해당 위젯을 임포트해야한다.
여기선 버튼을 예로 들어보겠다.

{{{
// import dojo class
dojo.require("dijit.form.Button");

// create object
var button = new dijit.form.Button('clickMeButton', {
label:'눌러주세요',
onClick:function() {
alert('Thank you, touch me.^^');
}
});
}}}

// append document
$('buttons').appendChild(button.domNode); // 이게 중요하다.
// button 자체는 dojo 에서 몇개의 element 감싸버리기 때문에 모든 dijit widjet 을 특정 엘리먼트에 포함시키려 한다면 domNode 속성을 이용하여야한다.

<div id="buttons">
</div>

2. 정적으로 추가하기
정적으로 추가하는 것은 더욱 쉽다.

// import
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // 정적 파싱은 이 부분이 필요하다.

<div id="buttons">
<button id="clickMeButton" dojoType="dijit.form.Button" onClick="alert(Thank you, touch me);">날 클릭해줘요</button>
</div>

3. 왠만하면 정적으로 추가하는게 보기도 편하고 좋다.
그러나 ajax 를 이용한다든지 하여서 동적으로 페이지를 인클루드하면 도조 파싱이 이미 끝난지라 소용이 없다.
따라서 로딩을 다 한후에는 다시 파싱을 할 필요가 있다.

다음 예제는 prototype.js 의 Ajax 기능을 이용하여 buttons 레이어에 동적으로 페이지를 로드한 후, dojo 파싱을 하는 예제다.
new Ajax.Updater($('buttons'), "/button.tpl", {
                onComplete:function(request) {
                    dojo.parser.parse(dojo.byId('buttons'));
                }
            });

야호! 이제 도조랑 프로토타입으로 못할 짓이 없다!
DojoToolkit.org 의 가이드북에 제공된 방법은 정적인 방법이다. [이전 글 참조]
(<div >박스에 설정해놓고 문서 로딩시에 트리를 구성하는 방식)

이제 지금 동적 트리 구성하기에 대해서 설명하겠다.
문서 찾기 힘들어서, 소스 분석을 해야했다니..쩝-_-;

1. 트리 구성에 필요한 라이브러리(?)를 불러들인다. dojo.require
2. 데이타 저장소를 구현한다. 예제로 든 소스는 json 을 출력하는 url 이다.
3. 모델을 생성하고, 기본 트리 설정 및 저장소를 설정한다.
4. 트리를 생성하며, 이전에 생성한 모델을 등록하며, 트리조작에 대한 옵션을 설정한다.
model 을 제외하고는 모두 옵션이다.
5. 만들어진 트리를 문서에 등록한다.
6. 등록한 트리를 실행하여, 실제 데이타를 가져와 화면을 구성한다.


<script language="javascript" someProperty="text/javascript">

// 1. Load Tree

dojo.require("dojo.data.ItemFileReadStore");

dojo.require("dijit.Tree");

 

dojo.addOnLoad(function(){         

       // 2. create data store

       var myStore = new dojo.data.ItemFileReadStore({url:'<c:url value="/category/struct.json" />'});           

       // 3. store 및 tree 설정

       var myModel = new dijit.tree.ForestStoreModel({

             store: myStore,

             //query: {type:'continent'},

             rootId: "__temp_id__",

             rootLabel: "트리",

             childrenAttrs: ["children"]

       });

      

       // 4. create Tree

       var tree = new dijit.Tree({

             model: myModel, /* 필수 */

             showRoot :false,

             getIconClass : function(item) {

                    if(item && this.model.store.isItem(item)) {

                           if(this.model.store.hasAttribute(item, "type")) {

                                 return  this.model.store.getValue(item, "type");

                           }

                    }

                    return;

             },

             getLabelClass : function(item) {

                    if(item && this.model.store.isItem(item)) {

                           if(this.model.store.hasAttribute(item, "type")) {

                                 return  this.model.store.getValue(item, "type");

                           }

                    }

                    return;

             },

             onClick : function(item) {

                    if(item && this.model.store.isItem(item)) {

                           alert(this.model.store.getValue(item, "id"));

                    }

             }

       });

      

       // 5. 문서에 등록하기      

           

       dojo.body().appendChild(tree.domNode); // dojo style

       // $('viewTree').insert({'top':tree.domNode}); // prototype.js style. 나는 dojo toolkit 보다 prototype.js 를 더 선호한다.

       // 6. 트리 실행

       tree.startup();

});

</script>


다음에는 동적으로 자식을 생성해보겠다. 언제 할련지는..-_-;;
복잡한 dojo 같으니. 그냥 prototype.js 로 내 트리를 만들어버릴까?



+ Recent posts