블로그 이미지
머드초보
개발자는 끊임없이 노력하지 않으면 아니된다. 라는 모티브를 가지고!

calendar

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

Notice

Tag

    '분류 전체보기'에 해당되는 글 12

    1. 2011.04.28 이클립스 Remote Systems Explore1253
    2. 2011.04.28 jQuery 유틸리티931
    3. 2010.08.05 jQuery 응용하기494
    4. 2010.08.02 jQuery로 요소 선택하기
    5. 2010.08.01 jQuery 들어가 보기
    6. 2010.07.31 jQuery 의 API
    7. 2010.07.31 jQuery Intro1
    8. 2010.07.31 스프링 DI 관련 요약
    9. 2008.12.15 Spring 2.5 를 시작하며..
    10. 2008.04.30 Hudson을 이용한 빌드와 테스트의 자동화1
    2011. 4. 28. 13:34 Eclipse
    이클립스 자체로도 막강하다고 생각하는데 이번 Object Aid Explore 를 써보기 위해 찾던중
    Remote Systems Explore 를 접하게 되어 함 남겨 본다.

    이클립스에도 ssh / telnet 이 접근 가능하다니.. 유료 Telnet 프로그램 만큼 되는지는 아직 잘 모르겠으나, 소개차 함 적어본다.
    사용하는 Eclipse 버젼은 3.6.1 (Helios) 버젼이다.

     

     


    우선 Window -> Show View 를 클릭하여 Remote Systems 로 Explore 를 연다.


    그후 오른쪽 마우스를 클릭하여 New Connection 을 선택하면 위 New Connection 이 뜨게 된다
    그후 FTP / SSH / Telent 등이 제공 되게 되는데 SSH 로 접속을 해본다.

    SSH 로 접속 하게 되면


    커넥션 정보를 입력하는 창이 뜨게 된다. 여기서 원하는 IP 를 입력하고 Next 를 입력



    다음 화면은 Sftp Files / Shells / Terminals 설정을 정할수 있는 창이 뜨는데 Next 를 쭉 누르던지
    아니면 Finish 를 입력하게 되면 우선 접속 정보 입력은 끝이다..




    그후 Remote System Explore 가 뜨게 되며 접속 할수 있게 된다.



    또한 여기서 Port 변경 및 접속 언어 변경이 가능하다.
    하는 방법은 오른쪽 마우스를 클릭하여 Properties 를 클릭하게 되면 창이 끄게 되며 Subsystem 을 클릭하여 보면 변경 할수 있는 창이 뜨게 된다. 여기서 변경 하고 OK 를 클릭하면 완료.


    함 접속을 해보면 Ssh Terminals 버튼 위에서 오른쪽 마우스를 클릭하게 되면
    Lunch Terminal 메뉴를 클릭하게 되면 로그인 창이 뜨게 된다.
    여기서 로그인 하게 되면 된다.


    이클립스 플러그인 좀더 공부해보자..

    posted by 알 수 없는 사용자
    2011. 4. 28. 12:52 카테고리 없음
    jQuery에 대해 거론하는 경우 주로 떠오르는 개념은 DOM과 스타일 조작, 그리고 이벤트일 것이다.
    하지만 그밖에도 개발자들에게 유용한 숨겨진"핵심"기능들 및 유틸리티 함수들도 상당히 존재한다.
    이번장은 일반적이지 않은 jQuery 유틸리티 메서드들을 끄집어내어 본다.
    1. jQuery.support 로 기능 찾기
       어트리뷰트 설명 
       boxModel  브라우저가 W3C CSS 박스 모델 명세에 따라 렌더링하면 True를 반환 
         
         
         
         
         
         
         
         
         
    2. jQuery.each를 사용하여 배열과 개체를 반복하여 처리하기
      $.each( value1 , 콜백함수 ) => value1 은 배열데이터 , 콜백함수는 실행될 함수
      ex ] var months = {'January','February','March','April','May','June','July','Augst',
      'September','October','November','December'}
      $.each(months , function(index , value){
           $('#months').append('<li>' + value+ '<li>' ));
      });
      $.each(months , function(){
           $('#months').append('<li>' + this+ '<li>' ));
      });
    3. jQuery.grep 을 사용하여 배열 필터링하기
      $.grep(months , function(value , i){
          return ( value.indexOf('J') == 0 );
      });

    posted by 알 수 없는 사용자
    2010. 8. 5. 23:35 jQuery
    jQuery는 페이지의 DOM요소를 쉽게 선택할 수 있게 해주는 매우 가벼운 라이브러리이다.
    1. 선택된 결과의 집합을 루프 돌면서 처리하기
      var urls = [];
      $("div#post a[href]").each(function (i){
          urls[i] = $(this).attr('href)
      }); alert(urls.join(",");

      $().each() 는 루프 즉 jQuery의 for 문이다.
    2. 선택집합을 특정 항목들로 줄이기
      .eq() 로 해당 줄을 선택하여 .css("background-color","#CCCCC") 와 같이 지정하여
      선택집합을 만들 수 있다.
      jQuery('ul > li').eq(1).css('border-bottom', '1px solid #000000');
    3. 선택된 jQuery 개체를 원래의DOM 개체로 변환하기
      jQuery로 페이지의 요소를 선택하면 원래의 DOM 개체가 아닌 jQuery 개체로 된 집합을 반환한다. 이는 jQuery 개체이기 때문에 선택된 집합에 대해 오직 jQuery 메서드만을 실행할수 있다.
      선택된 집합에 대해 DO 메서드와 속성을 실행하기 위해서는 이를 원래의 DOM 개체로 변환해야 한다  .get() 메서드로 해결 가능하다.
    4. 선택집합에서 항목의 인덱스 얻기
      항목을 클기하는 겨우 해당 학목의 인덱스가 집합 내에서 몇번째인지 알기 위해서 .index() 를 사용 할 수 있다. index() 메서드에 전달도니 대상을 찾지 못하면 -1 을 반환한다.
    5. 기존 배열로부터 고유한 배열 만들기
      (function($){
          $(document).ready(function(){
           var arr = $.map( $('LI') , function(item , index){
            while (index <3){
             return $(item).html();
            }return null;
           } );
           $(document.body).append("<span>The fisrt three authors are : " + arr.join(',') + "</span>");});})(jQuery);
    6. 선택된 집합의 일부에 대해 동작 수행하기
      선택 집합에서 일부를 걸래내기 위한 .slice() 메서드.
      $('p').slice(1,3).wrap(<"<i></i>"); == 인덱스가 1~3이전까지 부분집합을 wrap 으로 감싸줌
    7. jQuery가 다른 라이브러리와 충돌하지 않도록 설정하기
      jQuery.noConflict() 가 충돌을 막아줌 선언하게 되면 $변수를 가장 먼저 구현하고 있는 라이브러리에게 그에 대한 제어권을 양보한다. $을 양보한다음은 jQuery에 접근 할려면 무조건 jQuery 변수를 사용해야함
      var j = jQuery.noConflict(); 로 하게 되면 j로 jQuery를 정의 하게 된다.
      jQuery.noConflict();
      (function($){})(jQuery); == 내부, 지역 변수로 jQuery가 $ 을 쓸수 있음 그러나 내부에선 다른 라이브러리가 $ 을 쓸수 없음.
    8. 플러그인을 통해 기능 추가하기
      스크립트를 .js 를 추가 해주고 $('.pics').cycle('fade'); 를 실행하게 되면
      간단히 플러그인을 사용할 수 있다
    9. 사용된 질의 알아내기
      jQuery를 확장하는 플러그인이나 메서드를 작성하는 경우 호출하는 동안에 그 안에서 해당 메서드가 재호출될 수 있기 때문에, 메서드에 정확히 어떤 선택집합과 컨텍스트가 사용되었는지를 알아야할 경우 : .selector , .context 를 함께 사용하여 원래 전달되었던 질의를 다시 만들어 낼수 있다.

    * jQuery 관련 자료는 모두 O'REILLY 의 jQuery Cookbook 에서 발취하였습니다.
      상업적 목적 또는 문제가 될 소지가 있는 곳에 사용하지 말아주세요

    posted by 알 수 없는 사용자
    2010. 8. 2. 23:30 jQuery
    jQuery의 핵심은 어떤문서에서 이름,어트리뷰트 상태 등을 기반으로 하여 요소를 선택가능 하게 하는 selector 엔진이다. css는 이미 대중적이기에, jQuery에서 요소를 쉽게 선택하도록 하기 위해 selector 문법을 채택한 것은 현명한 결정이다.

    jQuery('#content p a') : #content 안에 있는 모든 단락(p 태그) 요소 내의 모든 앵커(a 태그) 요소를 선택한다.
    셀렉터를 작서앟는 경우 최적화를 위한 개략적인 규칙이 있는데, 이는 가능한 명확하게 기술하라다.
    셀렉터가 복잡하면 복잡할수로 jQuery가 문자열을 처리하는 데 더 많은 시간이 걸린다!
    1. 직속 자식 요소 찾기
      직속 자손 결합자 '>' 를 사용.
      jQuery('#nav li > a') 는 id가 nav 안에 'li' 태그안에 'a' 인 태그를 선택하게 될것이다.
      이외에도 child() 및 find() 등을 써서 찾을 수 있을 것이다.
      그중 가장 빠른건 child() 메서드가 가장 빨리 찾는다
    2. 특정 형제들 선택하기
      jQuery('h1 + h2') 는 h1 다음 바로 h2 인 것만 선택하게 된다.
      jQuery('li.selected ~ li') li.selected 뒤에 나오는 모든 li 태그를 항목으로 선택
      next() , nextAll() 로도 형제들을 선택 할 수 있다.
    3. 인덱스 순서로 요소 선택하기 [filter들]
      :first == 첫번째 선택 요소와 일치
      :last == 마지막 선택요소와 일치
      :even == 짝수 요소와 일치 (0부터 인덱스)
      :odd == 홀수 요소와 일치 (0부터 인덱스)
      :eq(n) == (n)번째 인덱스에 해당하는 단일 요소와 일치
      :lt(n) == n번째보다 밑[ 숫자 2이면 0~1 ]에 있는 모든 요소와 일치
      :gt(n) == n번째보다 위[ 숫자 2이면 3~ ]에 있는 모든 요소와 일치

      리스트의 첫번째 항목을 선택하는 다양한 방법
      jQuery('ol li:first') == jQuery('ol li:eq(0)') == jQuery('ol li:lt)
    4. 현재 애니메이션 중인 요소 선택하기
      jQuery('div:animated');
      jQuery( 'div:not(div:animated)' ).animated({height:100});와 같이 에니메이션이 실행 되지 않고 있던 부분을 체크하여 실행할때 height 100 으로 키우는 방법을 쓸수도 있다.
    5. 무엇을 포함하고 있는지에 따라 요소 선택하기
      :contains() == 대소문자를 구분하며, 텍스트 컨텐츠을 포함 하고 있는 항목을 선택한다.
      jQuery('div:has(p a)'); == 이 셀렉터는 <p> 태그에 <a>를 가지고 있는 모든 <div> 요소를 찾을 것이다.
    6. 일치되지 않는 요소 선택하기
      jQuery('div:not(#content)');
    7. 가시성을 기반으로 요소 선택하기
      :hidden , :visible
      jQuery('p:visible').hide(); == 현재 visible 인 요소만을 숨긴다.
    8. 어트리뷰트 기반으로 요소 선택하기
      jQuery('a[href="http://google.com"]'); == href="http://google.com 인 항목만 선택
      [attr]  : 특정 어트리뷰트를 가지고 있는 요소와 일치
      [attr==val] : 지정된 어트리뷰트가 특정 값을 가지는 요소와 일치
      [attr!=val] : 지정된 어트리뷰트가 값을 갖지 않는 요소와 일치
      [attr^=val] : 지정된 어트리뷰트가 특정 값으로 시작하는 요소와 일치
      [attr$=val] : 지정된 어트리뷰트가 특정 값으로 끝나는 요소와 일치
      [attr~=val] : 공백과 함께 특정 값을 포함하는 요소와 일치(즉 car는 car와 일치하지만 cart와는 일치하지 않는다.
      jQuery('div[id^="content-sec-"]'); div 의 ID 가 content-sec- 로 시작하는 모든 항목
    9. 형식에 따라 폼 요소 선택하기
      형식(hidden , text, checkbox 등)을 기반으로 폼 요소들을 선택할때
       jQuery 셀렉터 구문 선택하는것 
       :text  <input type="text" />
       :password  <input type="password" />
       :radio  <input type="radio" />
       :checkbox  <input type="checkbox" />
       :submit  <input type="submit" />
       :image  <input type="image" />
       :reset  <input type="reset" />
       :button  <input type="button" />
       :file  <input type="file" />
       :hidden  <input type="hidden

      jQuery(':text'); == 모든 text 입력창에 선택할 필요가 있다면.
      jQuery(':input:not(:hidden)'); // hidden을 제외한 모든 input 요소를 선택
    10. 특성을 갖는 요소 선택하기
      다양한 방법이 존재한다. 이는 jQuery로 요소를 선택할 때도 그렇다. 어던 방식을 선택하는 것이 좋은가라는 문제에서 중요한 부분은 보통 속도가 될것이다. 분명히 어떤 방법은 바르 고어떤 방법은 느릴테니 말이다. jQuery의 기본 메서드를 사용하는 것이 가끔은 단일 셀렉터를 사용하는 것 보다 빠를 수도 있다.
    11. 컨텍스트 매개변수 사용하기
      컨텍스트란? jQuery가 셀렉터 식에 의해 매치되는 요소를 찾을 장소를 말한다.
      기본 컨텍스트는 DOM 계층에서 최상위 항목인 document 이다.
    12. 사용자 정의 필터 셀렉터 만들기
      jQuery.expr[':'] 개체로 만들 수 있다. 이는 Sizzle.selectors.filters 에 대한 별칭이기도 하다
      jQuery.expr[':'].newFilter = function(elem , index , match){
          return true; // filter() 메서드 처럼 true/false 를 반환
      };

      jQuery.expr[':'].inline = function(elem){
          return jQuery(elem).css('display') === 'inline';
      }; 와 같이 사용자 정의 필터를 정의 할수 있다.

    * jQuery 관련 자료는 모두 O'REILLY 의 jQuery Cookbook 에서 발취하였습니다.
      상업적 목적 또는 문제가 될 소지가 있는 곳에 사용하지 말아주세요

    posted by 알 수 없는 사용자
    2010. 8. 1. 00:20 jQuery
    1. jQuery 를 로드 하는 방법
      1. jQuery 를 다운 받아 경로 지정 후 사용 (http://jquery.com 에서 다운 로드 받으면 됨)
         => 선언 <script src="/경로명/jquery.min.js"></script>
      2. jQuery 가 제공 되고 있는 사이트를 직접 Url 로 지정
          => 2.1 http://code.jquery.com/jquery.min.js"></script>
               2.2 http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
    2. jQuery 의 위치는?
      튀지 않는 (unobtrusive) 자바스크립트 방식을 사용하는 최근의 자바스크립트 어플리케이션들은 일반적으로 DOM이 완전 로드 되고 난 후에만 자바스크립트 코드를 수행한다. 그리고 실제로도 모든 DOM 탐색과 조작은 그들이 작동작하기에 앞서 DOM 이 완전하게 로드되는 것을 요구한다. DOM 은 다 로드 되었지만 swf 파일과 같은 모든 자원들을 아직 못한 시점을 알아내기 위한 방법이 필요. window.onload 는 자원이 다 로드된 후 발생함. 즉 DOM 그 자체가 탐색과 조작을 위한 준비를 끝냈을을 알려주는 이벤트는 = jQuery(document).ready(function(){})
      실제론 ready() 이벤트는 자바스크립트가 페이지의 문서 흐름 상 가장 위쪽에 <head> 요서 안에 놓여 있는 경우에만 필요.

      </body> 앞에 모든 자바스크립트와 인라인 코드를 둘 경우는?
      1. 자바스크립트가 페이지의 끝부분에서 브라우저에 의해 로드되는 경우 페이지의 로드가 더 빨라진다. 문서의 상단에 자바스크립트를 둔다면 일종의 병목현상이 생길 수 있어서.
      2. 빠른 웹 페이지가 목적이라면 간단하게 코드를 페이지의 하단으로 옮겨서 성능 향상을 이룰수 있는데.. <== 무신말이여??
    3.  셀렉터와 jQuery 함수를 사용 하여 DOM 요소 선택하기
      jQuery() or $()
    4. 특정 컨텍스트 안에서 DOM 요소 선택하기
      CSS 표현식을 갖는 jQuery 함수는 두번째 매개변수를 가질 수도 있다. 이매개변수는 어떤 컨텍스트에 대해서 표현식을 기반으로 DOM 요소를 찾아야 하는지를 jQuery 함수에게 알려주는 역할을 한다.
      ex ] jQuery('input',$('form')).length => form 안에 있는 input 을 찾게 된다.
    5. DOM 요소의 래퍼 집합 필터링하기
      filter 메서드는 지정된 표현식과 일치하지 않는 요소를 제외하는 역할을 한다.
      ex ] jQuery('a'.filter('.external').length => class 명이 external 이 아닌 모든 요소는 제거.
    6. 현재 선택된 래퍼 집합에서 자손 요소 찾기
      jQuery.('p').find('em') == jQuery('em',$('p') == jQuery('p em') : 세개의 문장 다 동일한 결과
    7. 파괴적인 변경 이전의 선택상황으로 돌아가기
      jQuery에서 제공하는 end() 메서드는 파괴메서드(find , filter 등)  사용 이전의 DOM 요소 집합을 반환하는 메서드이다.
      end() 메서드는 이전에 파괴 작업이 수행된 것이 없다면 비어 있는 집합을 반환한다.
      파괴 작업이란 일치된 jQuery 요소 집합에 변경을 가하는 모든 종류의 작업을 의미로서 jQuery 개체를 반환하는 모든 탐색 및 조작 메서드가 이에 해당한다.
      ex ] add() , andSelf() , children() , closes() , filter() , find() , map() , next() , nextAll() , not() , parent() , prev() , prevAll() , siblings() , slice() , clone() , appendTo() , prependTo() , insertBefore() , insertAfter() , eplaceAll() 같은 메서드들이 파괴 메서드라고 할수 있다.
    8. 현재 셀렉션에 이전 셀렉션 추가하기
      andSelf()  메서드를 사용하는 경우 바로 이전 집합만이 현재 집합에 추가 된다.
    9. 컨텍스트를 기반으로 DOM 탐색하기
      eq() : 배열을 사용하다보니 DOM 의 첫요소는 '0' 부터 사용하게 됨.
      jQuery('li:eq(1)') => li 요소들 중 2번째 껄 찾게 됨.
      .next() : 바로 다음 요소
      .nextAll() : 다음 요소 밑으로  전부
      .prev() : 바로 이전 요소
      .prevAll() : 이전 요소 앞에 전부
    10. DOM 요소를 생성하고 추가하고 다루기
      jQuery는 지정된 매개변수에 따라 다양하게 동작하는 함수이다.
      만일 HTML 텍스트 문자열을 함수에 제공한다면 , jQuery는 그러한 요소를 내부적으로 생성할 것이다. ex ] jQuery('<p><a>jquery</a></p>').appendTo('body'); 는 HTML 에 그대로 생성하게 된다.
      jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.naver.com').end().appendTo('body'); => end() 메소드를 실행함으로 find()로 인한 파괴를 돌려 놓아야만 원래 요소에  .appendTo 메소드를 실행하여 정상적으로 추가 할수 있을 것이다.
    11. DOM 요소 제거하기
      remove() 메서드는 모든 앵커 요소를 DOM 에서 제거하기 위하여 사용된다.
      ex ] jQuery('a).remove() 하게 되면 'a' 는 모두 DOM 에서 삭제 된다.
            jQuery('a).remove('.remove')하게 되면 'a'요소의 class가 remove 인것만 삭제.
    12. DOM 요소 교체하기
      repplaceWith() : DOM 구조 교체작업
      ex ] jQuery('li.remove').replaceWith('<li>remove</li>'); 'li' 요소의 class 가 .remove 인 클래스의 값을 <li>remove</li> 로 변경하자는 것임.
    13. DOM 요소 복제하기
      jQuery는 DOM요소를 복사하기 위해 clone() 메서드를 제공하고 있다. 이는 매우 직관적이 메서드 이며, 단지 jQuery 함수를 사용하여 DOM 요소를 선택한 다음 선택된 요소 집합에 대해 clone()메서드를 호출하기만 하면 된다. 결과는 원래 선택된 DOM 요소가 아닌 그 DOM 구조의 복사본이며, 그에 대해서 메서드 체인을 사용할 수도 있다.
      ex ]  jQuery('ul').clone().appendTo('body'); => 클론으로 카피하여 body에 붙여넣는 부분
      jQuery('ul#a li')        : ID 가 a 인 ul 의 li 요소를 찾는다
         .click(function(){alert('List Item Clicked')})  :  클릭 이벤트를 추가
         .parent()               : 부모요소로 이동
         .clone(true)           : 요소를 복사
         .find('li')                : 현재 clone 으로 복사 해놓은 li 를 찾는다
         .appendTo('#b')     : 그후 ID 가 b 인 요소에 카피한다.
         .end()                   : 파괴 메서드를 원복
         .end()
         .remove();             : 원래의<ul> 요소를 제거 함.
    14. DOM 요소 어트리뷰트를 가져오고, 설정하고, 제거하기
      - attr() 메서드로 값을 가져오거나 설정할 수 있다.
      ex ]  jQuery('a').attr('href','http://www.jquery.com').attr('href')
              jQuery('a').attr({'href':'http://www.jquery.com','title':'jquery.com'}).attr('href') 처럼
              여러개의 어트리뷰트도 한꺼번에 설정 가능하다.
      - removeAttr('title') 과 같이 어트리뷰트도 삭제 가능하다.
      - class 어트리뷰트는 여러개의 값을 가질 수 있기대문에 (예 : class="class1 class2 class3")와 같이 독특한 어트리뷰트 메서드도 관리 할 수 있다.
      - addClass() 새로운 class값으로 class 어트리뷰트 값을 업데이트한다. 다시 말해서, 기존의 설정되어 있던 모든 클래스들을 그대로 남겨두고 그에 새로운 값을 추가하는 것이다.
      - hasClass() 특정 클래스에 대한 class 어트리뷰트의 값을 확인한다.
      - removeClass() class 어트리부ㅠ트에서 특정 클래스를 제거한다. 다만 기존에 설정되어 있던 모든 값들은 그대로 유지된다.
      - toggleClass() 지정된 특정 클래스가 존재하지 않는다면 그를 추가하고, 이미 존재한다면 그를 제거한다.
    15. HTML 콘텐트 가져오기 및 설정하기
      jQuery에서는 HTML 코드 또는 DOM 구조를 가져오거나 설정하기 위한 메서드로 html()을 제공하고 있다.
      jQuery('p').html('<strong>Hello World</strong>, I am a <em>&lt;p&gt;</em> element. ');
    16. 텍스트 콘텐트를 가져오고 설정하기
      jQuery('p').text('Hello World, I am a <p> element. ');
      jQuery('p').text();
    17. 전역적인 충돌 없이 $ 별칭 사용하기
      jQuery를 사용하는 것이 불편할 경우.. $ 별칭을 사용할수 있다.
      (function($){ // 내부에서 $ 매개변수를 사용하는 함수를 생성
             // 충돌에 대한 걱정 없이 내부 영역에서 $를 사용 할 수 있다.
      })(jQuery);
      위와 같이 사용하게 되면 private scope 를 갖는 함수에게 jQuery 에 대한 적역 참조를 전달하고 있다. 이렇게 하지 않고 그냥 전역 점위에서 $ 별칭을 사용한다면 HTML 문서안에 있는 다른 스크립트들이 절대 $ 문자를 사용하지 않도록 보장해야 할것이다. 그렇지 않으면 심각한 충도이 생길수도 있다.

    * jQuery 관련 자료는 모두 O'REILLY 의 jQuery Cookbook 에서 발취하였습니다.
      상업적 목적 또는 문제가 될 소지가 있는 곳에 사용하지 말아주세요

    posted by 알 수 없는 사용자
    2010. 7. 31. 23:28 jQuery

    jQuery 의 API

    • API 참조 할 수 있는 사이트
      http://docs.jquery.com/Main_Page
    • jQuery 코어
      - jQuery 함수
      - jQuery 개체 접근자
      - Data
      - 플러그인
      - 상호운영성
    • 셀렉터
      - 기본
      - 계층구조
      - 기본필터
      - 콘텐트 필터
      - 가시성(Visibility) 필터
      - 어트리뷰트 필터
      - 자식 필터
      - 폼( Forms )
      - 폼( Form ) 필터
    • 어트리뷰트
      - Attr
      - Class
      - HTML
      - Text
      - Value
    • 탐색(Traversing)
      - 필터링(Filtering)
      - 검색(Finding)
      - 체인(chaining)
    • 조작(Manipulation)
      - 콘텐트 변경
      - 내부 삽입
      - 외부 삽입
      - 주변 삽입
      - 교체(Replacing)
      - 제거
      - 복사
    • CSS
      - CSS
      - 포지셔닝
      - 높이와 너비
    • 이벤트
      - 페이지 로드
      - 이벤트 처리
      - 이벤트
      - 인터렉션 도우미
      - 이벤트 도우미
    • 효과
      - 기본
      - 슬라이딩
      - 페이딩
      - 사용자 정의
      - 설정
    • Ajax
      - AJAX 요청
      - AJAX 이벤트
      - 기타
    • Utilities 유틸리티
      - 브라우저와 기능 탐지
      - 배열과 개체 작업
      - 테스트 작업
      - 문자열 작업
      - Url

    * jQuery 관련 자료는 모두 O'REILLY 의 jQuery Cookbook 에서 발취하였습니다.
      상업적 목적 또는 문제가 될 소지가 있는 곳에 사용하지 말아주세요

    posted by 알 수 없는 사용자
    2010. 7. 31. 16:09 jQuery

    jQuery 란?

    • jQuery 는 HTML 문서보다 정확하게 문서 개체 모델 (DOM) 과 자바스크립트 사이의
      상호작용을 간단하게 해주는 오픈소스 자바스크립트 라이브러리다.
    • jQuery 이외에도 prototype , Dojo
    • JavaScript: The Definitive Guide ( http://oreilly.com/catalog/9780596000486 ) 추천
    • jQuery 의 철학 : 적게 작성하고 , 보다 많이 한다 [ Write less , do more ]

    jQuery 의 장점

    1. jQuery는 오픈소스, MIT와 GNU 일반 공개 라이센스(GPL)를 가지고 있다. 즉 무료
    2. jQuery는 경량화(최소18 KB) 압축해제(114 KB) 이다
    3. jQuery는 많은 사람들이 사용하고 있다.
    4. jQuery는 웹브라우저 간의 차이를 표준화하기에 따로 웹 브라우져단을 신경 쓸 필요 없다.
    5. jQuery는 깔끔한 플러그인 아키텍처를 사용하여 경량으로 제작 되었다
    6. jQuery 플러그인 자료실 (http://plugins.jquery.com/)은 광범위하며, jQuery가 출시 이후 꾸준히 성장하고 있다.
    7. jQuery의 API 는 인라인 코드 예제를 포함하여 완전하게 문서화 되어 있다.
    8. jQuery는 친화적이다. 즉 다른 자바스크립트 라이브러리들과 함께 사용할때 충돌을 피하기 위한 부분까지 신경쓰여 있다.
    9. jQuery는 현재 꾸준히 사용자가 늘어나고 있는 추세이다.

    jQeury 의 기본 사용 예

    • jQuery 는 기본적으로 Chain 형태를 띄고 있다.
      예시
      1. jQuery('div').hide;
          jQuery('div').text('jQuery');
          jQuery('div').addClass('updateClass');
          jQuery('div').show();

      2. jQeury('div').hide.text('jQuery').addClass('updateClass').show();

       위의 두 개의 예시는  동일한 결과를 낸다.
    • jQuery 의 래퍼(wrapper)란 의미는 jQuery 기능으로 둘러싸인 DOM 요소를
      HTML 페이지에서 선택하게 될거라는 의미.
    • jQuery 는 내부적으로 간결한 루프가 실행된다고 본다 즉 jQuery('div').each(function(){}). 가
      있는 것과 같다. HTML 에 div 개체가 여러개 있다고 하면 jQuery 는 다 찾아놓는다.



    * jQuery 관련 자료는 모두 O'REILLY 의 jQuery Cookbook 에서 발취하였습니다.
      상업적 목적 또는 문제가 될 소지가 있는 곳에 사용하지 말아주세요

     

     

    posted by 알 수 없는 사용자
    2010. 7. 31. 14:53 Spring
    스프링 컨테이너
    빈 설정 : 생성자 방식/프로퍼티 설정 방식, 자동설정
    라이프 사이클
    외부 설정 프로퍼티, 메시지 국제화, 이벤트
    어노테이션 기반 설정
    컴포넌트 스캔

    1. 스프링 컨테이너
    스프링은 객체를 관리하는 컨테이너를 제공! (BeanFactory / ApplicationContext)
    BeanFactory : org.springframework.beans/factory.BeanFactory 인터페이스는 빈객체를 관리하고 각 빈 객체 간의 의존 관계를 설정해 주는 기능을 제공하는 가장 단순한 컨테이너
    XmlBeanFactory 클래스는 외부 자원으로부터 설정 정보를 읽어와 빈 객체를 생성한다.
    XmlBeanFactory 객체 생성 후 gerBean() 메서드를 이용하여 알맞은 빈을 가져와 사용함.

    org.springframework.context.support.ClassPathXmlApplicationContext :
    =>클래스 패스에 위치한 XML 파일로부터 설정 정보를 로딩한다.
    org.springframework.context.support.FileSystemXmlApplicationContext :
    => 파일 시스템에 위치한 XML 파일로부터 설정 정보를 로딩한다.
    org.springframework.web.context.support.XmlApplicationContext :
    => 웹 어플리케이션에 위치한 XML 파일로부터 설정 정보를 로딩한다.

    2. 빈(bean) 생성과 의존 관계 설정
    스프링 컨테이너가 관리할 빈 객체를 생성하기 위해서는 <bean> 태그를 사용하면 된다
    -생성자 방식
    <constructor-arg>태그를 명시 하지 않았다면, 스프링은 파라메터가 없는 기본 생성자를 이용하여 객체를 생성한다. 생성자가 아닌 static 매서드를 이용하여 객체를 생성해야하는 경우는 factory-method=getInstance()메서드를 이용하면 됨.
    - 프로퍼티 설정 방식
    <property name="" ref=""> 또는 <property name="" value="">
    - XML 네임스페이스를 이용한 프로퍼티 설정
    xmlns: test=http://www.springframework.org/schema/test 로 설정하고 test:periodTime="10" test:sender-ref="" 이런식으로도 설정 가능
    생성자 방식은 <consturctor-arg> 태그를 이용하여 의존하는 객체를 전달 가능. 
    posted by 알 수 없는 사용자
    2008. 12. 15. 10:18 Spring
    EJB가 나타나면서 자바는 엔터프라이즈 어플리케이션을 구축하는 데 필요한 기본 기술로 자리 잡아 나갔다. 하지만 EJB2 버전까지는 개발 과정이 편하지 않았다.
    엔터프라이즈 어플리케이션을 구현하는데 필요한 부분은 자원 관리와 트랜잭션의 처리 정도이다. EBJ는 반드시 EJB 스펙에서 정의된 인터페이스에 따라 코드를 작성하도록 제약하고 있기 때문에 개발자가 기존에 작성한 POJO(Plain Old Java Object)를 변경해야 한다는 단점도 갖고 있었다.
    컨테이너 없이 테스트가 어렵다는 점을 개발 속도가 저하되는 부분을 많은 개발자들이 개발을 진행하는데 있어 불편을 겪는 부분이었다.
    이런 시점에서 Pod Johnson은 "Expert One-on-One J2EE Development without EBJ"란 책을 통해서 책 제목처럼 EJB를 사용하지 않고 엔터프라이즈 어플리케이션을 개발하는 방법을 소개하였고, 이것이 스프링 프레임워크의 모태가 되었다.

    1. 스프링이란 무엇인가?
    스프링이란 간단히 말해서 엔터프라이즈 어플리케이션에서 필요로 하는 기능을 제공하는 프레임워크다. 스프링은 J2EE가 제공하는 다양한 기능 제공뿐 아니라 DI / AOP 를 지원한다
    특징
    - 스프링은 경량 컨테이너다.
    - 스프링은 DI(Dependency Injection) 패턴을 지원한다.
    - 스프링은 AOP(Aspect Oriented Programming)을 지원한다.
    - 스프링은 POJO(Plain Old Java Object)를 지원한다.
    - 트랜잭션 처리를 위한 일관된 방법을 제공한다.
    - 영속성과 관련된 다양한 API를 지원한다. (ex :JDBC/iBatis/하이버네이트/JPA/JDO 등)
    - 다양한 API에 대한 연동을 지원한다.
    - 다른 프레임워크와 연동을 지원하고 있다.

    2. DI(Dependency injection)란 무엇인가?
    객체 사이의 의존 관계를 객체 자신이 아닌 외부 조립기가 수행한다는 개념.
    - 클라이언트 요청 관련 Control 객체
    - 비즈니스 로직을 수행하는 서비스 객체
    - 데이터베이스 접근을 수행하는 DAO 객체
    ~ 명시적으로 객체에 의존성을 -> Factory Patten 으로  :: 둘다 변경사항 적용이 불편
      그리하여 DI 로 의존성 관련 된 사항은 외부 조립기에 맡겨버림!
     
    3. AOP(Aspect Oriented Programming)란 무엇인가?
    여러 모듈에 효과적으로 적용하는데는 한계가 있으며, 이러 한계를 극복하기 위해 AOP라는 기법이 존재한다. 즉 공통의 관심 사항을 적용해서 발생하는 의존 관계의 복잡성과 코드 중복을 해소해주는 프로그래밍 기법.
    즉 핵심 로직 구현 클래스에 의존하지 않고 공통사항만을 적용하여 여러 클래스에서 사용 가능하게 하는 것이다.

    * EJB의 3 버전부터는 엔티티 빈이 아닌 JPA(Java Persistence API)를 사용하는 데이터의 영속성을 처리하고 있다. JPA는 EJB 컨테이너가 없는 환경에서도 사용할 수 있기 때문에, EJB 이외의 환경에서도 JPA를 사용하여 영속성을 관리할 수 있다.

    * Automatic Storage Management (ASM)]
    플랫폼 독립적인 환경에서 파일시스템, 놀리적 볼륨관리자, 소프트웨어 RAID 등의 서비스를 제공합니다. ( 오라클 관련 라이브러리 인듯 함 )
    posted by 알 수 없는 사용자
    2008. 4. 30. 09:52 Issue
    Hudson을 이용한 빌드와 테스트의 자동화


     

    2007-04-04
    BEA Systems Korea
    Sr consultant Byungwook Cho (bcho@bea.com)

    Continuous Integration(점진적 통합,이하 CI)이란, 개발자가 각각 개발한 소스코드를 모아서 한꺼번에 빌드하는 통합 빌드의 과정을 특정 시점이 아니라 매일이나 매주와 같이 아주 잦은 주기로 수행함으로써 통합에서 발생하는 오류와 시간을 줄이기 위한 기법이다.
    Extreme Programming Community (XP)에서 애자일 방법론의 일부로 Kent Beck에 의해서 고안된 방법으로 다음과 같은 특징을 가지고 있다.

    1. CI의 특징
    (1) 소스코드 일관성 유지
    CI툴을 설정하기 위해서는 기본적으로 소스 관리 시스템이 필요하다.
    대표적인 소스 관리 시스템은 Subversion,CVS,Perforce등이 있다.
    CI툴은 이 소스 관리 시스템으로부터 프로젝트 소스의 메인 브랜치(trunk 라고도 한다.) 코드를 Check out 받아서 빌드를 수행한다.

    (2) 자동 빌드
    소스 코드에 대한 빌드는 CI툴에 의해서 자동적으로 이루어 져야 한다.
    빌드가 이루어지는 시점을 정하는 방법이 두가지가 있는데 다음과 같다.

    1) 커밋에 따른 자동 빌드
    다른 방법으로는 소스코드가 소스 관리 시스템에 커밋이 되었을 때 마다 CI툴이 이를 감지 하고 자동으로 빌드를 수행하도록 설정할 수 있다.
    이렇게 설정할 경우 소스 코드의 변경이 있을 때 마다 빌드 작업을 수행하기 때문에 소스 관리 시스템에 저장된 소스 코드에 대한 무결성을 보장하기는 매우 좋지만, 빌드 시간이 길 경우 빌드가 적체 되는 현상이 발생할 수 있다.
    (일반적으로 대규모 애플리케이션의 FULL 빌드는 길게는 2~3시간 까지 소요될 수 있다.) 그래서 이 방법은 빌드 시간이 오래 걸리는 경우나 커밋이 자주 발생하는 경우에는 적절하지 않다.

    2) 시간 간격에 의한 빌드
    일정 시간 간격을 정해서 빌드를 하는 방법이다. 매일 5시에 빌드를 한다. 또는 매주 금요일 저녁 5시에 빌드를 한다는 것과 같이 주기를 정할 수 있다. 빌드 스케쥴이 미리 정해져있기 때문에 개발자들이 커밋에 대한 스케쥴을 관리할 수 있고 빌드 시간이 오래걸리는 대규모 빌드에도 적정하다.
     빌드 시간을 정할 때 중요한 점은 가급적이면 퇴근 시간 1~2시간 전으로 개발자들이 퇴근하기 전 시간으로 여유를 두는 것이 좋다.
    이후 빌드가 깨진 경우는 컴파일이 실패하였거나 테스트가 통과하지 못하였을 경우인데 이때 소스 관리 시스템에 저장된 코드는 문제가 있는 코드이다. (빌드가 깨졌기 때문에) 이 코드들을 다른 개발자가 체크아웃 받아서 개발을 했을 때 잘못된 코드로 인해서 잘못된 개발 방향으로 갈 수 가 있기 때문에 빌드가 깨졌을 때는 가급적 빨리 문제를 수정하여 빌드를 정상화 시키고 소스 관리 시스템에 저장되 코드의 무결성을 회복하거나 빌드가 성공한 전버전으로 BACK(Revert) 해서 무결성이 보장된 코드내에서 작업하도록 한다. Revert를 위해서는 소스 관리 시스템에 빌드때마다 Tagging을 해서 무결성이 보장된 버전에 대한 History를 관리해야 한다.

    Silent period에 대해서
    CI툴에서는 소스 관리 시스템으로부터 소스를 체크아웃 또는 업데이트 받을 때 Silent Period라는 옵션을 제공한다.
    개발자가 소스를 커밋하고 있을 때 커밋이 완료되지 않은 상태에서 CI툴이 소스를 체크아웃하게 되면 불완전한 코드가 내려와서 빌드가 망가질 수 있다. 이를 방지하는 옵션이 Silent Period인데, 커밋이 있은후 일정 시간동안 소스 관리 시스템에 변화가 없을 때 CI툴이 체크아웃을 받아서 불완전한 코드를 내려 받을 수 있는 가능성을 최소화 하는 것이다.

    이렇게 자동 빌드를 하면서 얻을 수 있는 이점은, 주기적인 빌드를 통해서 소스코드의 무결성 관리와 빅뱅방식의 통합에서 올 수 있는 리스크를 개발과정 전반으로 분산할 수 있다.

    (3) 자동 테스팅
    빌드 과정에서 테스트를 포함할 수 있는데, 주기적인 빌드 과정에 테스트를 포함해서 자동 빌드를 통한 Syntax에 대한 검증과 더불어 테스팅을 통한 기능과 비기능적(성능등)에 대한 요건을 매번 검증함으로써 코드의 품질에 대한 무결성을 함께 유지한다.

    (4) 일일 체크아웃과 빌드
    개발자가 출근후 소스 관리 시스템에서 최신 코드를 내려받고, 출근전에 현재 코드를 소스 관리 시스템에 저장함으로써 소스 코드에 대한 무결성을 유지한다.

    예를 들어 개발자 A와 개발자 B가 같이 개발을 할 때, 개발자 A가 작성한 모듈을 개발자 B가 참고해서 사용한다고 하자, 이런 경우 개발자 A가 임의로 컴포넌트에 대한 작동 방식이나 인터페이스를 변경했을 때 일일 체크아웃과 빌드를 하면 개발자 A의 모듈을 사용하는 개발자 B의 모듈의 컴파일 오류나 또는 테스트 오류가 발생할 것이고 코드 변경으로 인한 임팩트를 빠르게 발견하여 수정할 수 있다.
    그러나 통합 빌드의 과정이 일일이 아니거나 일일 체크아웃 빌드를 하지 않고 일주일이나 한달 단위로 할 경우 일주일동안 개발자 B는 잘못된 코드를 양산할것이고, 그 만큼의 시간 낭비가 발생한다.

    일일 체크아웃과 빌드는 이를 방지해주는 역할을 한다.

    2.CI 프로세스

    CI에 대한 프로세스를 정리해보면 다음과 같다.
     

    사용자 삽입 이미지

    <그림. Continous Integration Process >


    (1) 개발자
    1) 개발자는 아침에 출근해서 소스 관리 시스템으로부터 최신 코드를 Checkout 또는 update받는다.
    2) 코드를 가지고 개발을 수행하고 테스트를 작성한다.
    3) 로컬에서 빌드 및 테스트를 진행한다.
    4) 테스트과정에서 커버러지분석과 Code Inspection을 수행한다. (Optional)
     커버리지 분석
    커버러지 분석은 테스트의 대상중에 테스트에 해당하는 부분중에 어느 부분이 테스트가 수행이 되었는지를 체크하는 과정이다. 개발 과정에서의 테스트 커버러지 분석은 일반적으로 코드 커버러지로 분석한다.
    코드 커버러지란 테스트가 전체 소스 코드중 어느부분을 수행했는지를 검토하는 것이다.
    코드 커버러지를 측정할 때 가장 중요한 것은 목표 커버러지율을 결정하는 것이다. 코드 100%를 테스트하는 것이 좋겠지만, Exception,If 문에 대해서 100% 테스트가 불가능하다. 또한 Setter와 Getter만 있는 ValueObject의 경우 테스트를 작성하는 것도 쉽고 테스트 자체가 의미가 없나 Coverate rate는 많이 올릴 수 있다. 만약 커버러지율을 강제적으로 높이고자 하면 개발팀에서 VO등 테스트가 필요하지 않고 테스트가 쉬운곳에만 테스트를 집중할 수 있기 때문에 컴포넌트의 우선순위를 정해서 중요한 컴포넌트에 대해서 커버러지를 관리하는 것이 필요하다.
    커버러지율은 잘 만든 테스트라도 50~70% 내외이고, 고 가용성 시스템도 80%를 넘기 힘들기 때문에, 컴포넌트의 중요도별로 목표 커버러지율을 융통성 있게 결정하는 것이 필요하다.
    대표적인 오픈소스 도구로는 EMMA와 Cobertura등이 있고, 상용 도구로는 Atlassian社의 Clover등이 있다.
     Code Inspection
    Code Inspection이란, 완성된 코드에 대한 검토를 통해서 코드상에 존재하고 있는 잠재적인 문제를 발견하는 과정이다. 흔히 “정적 분석” 이라는 이름으로도 불리는데, 이 과정에서 Deadlock에 대한 검출 Lock contention과 같은 병목 구간에 대한 검출 Memory Leak이나 Connection Leak과 같은 자원 누수에 대한 검출과 코딩 스타일 (변수명이나 메서드명 규칙등)에 대한 가이드를 수행한다.
    보통 이런 도구들은 룰 셋을 추가하여 Inspection을 각 팀의 스타일에 맞춰서 Customizing할 수 있으며 대표적인 오픈 소스 도구로는 PMD, FindBugs등이 있다.

    5) 완료된 코드를 소스 관리 시스템에 저장한다.
    완료된 코드와 테스트를 소스 관리 시스템에 커밋한다.

    (2) CI Tools

    1) 체크아웃
    CI Tools는 정해진 시간이나 소스가 커밋이 되었을 때 등 정책에 따라서 빌드를 시작한다. 먼저 소스 코드를 체크아웃 받는다.
    2) 컴파일
    체크아웃 받은 코드에 내장되어 있는 빌드 스크립트를 기동하여 컴파일을 수행한다.
    3) 배포
    컴파일이 완료된 코드를 테스트 서버에 배포한다.
    4) 테스트 수행
    체크아웃 받은 코드내에 있는 테스트 코드들을 수행하고 리포팅을 한다.
    5) 커버러지 분석
    테스트 과정중에 코드 커버러지를 수행한다.
    커버러지의 기본 원리는 커버러지 분석 대상이 되는 코드내에 커버러지 분석 코드를 삽입하여 테스트가 완료된 후에 그 결과를 수집하여 분석을 하는데 분석 코드를 삽입하는 과정을 Code Instrument라고 한다. Instrumented된 코드는 커버러지 분석 기능으로 인해서 성능 저하를 유발할 수 있기 때문에 만약에 테스트 과정에 성능이나 응답시간에 관련된 테스트가 있을때는 커버러지 분석을 위해서 테스트를 마친후에 Instrument를 다시하여 3),4) 과정을 다시 거쳐서 커버러지 분석을 해야 테스트 과정에서 성능에 대한 요소를 올바르게 추출할 수 있다.
    6) Code Inspection
    다음으로 Code Inspection을 수행하고 리포트를 생성한다.
    7) 소스 태깅
    1)~6) 과정이 정상적으로 수행되었을 때, 현재 소스 관리 시스템에 저장된 버전을 안정적인 버전으로 판단하고 소스 관리 시스템에 현재 버전에 대한 이미지를 저장하기 위해서 Tagging을 수행하여 현재 버전을 저장해놓는다.
    8) Reverse (Optional)
    만약에 빌드나 테스트가 실패하였을때는 이전에 성공한 빌드 버전으로 소스를 롤백하고, 실패의 원인을 파악한후에 다시 커밋한다.
    이것은 소스 관리 시스템에 저장된 소스는 문제가 없는 소스를 항상 유지하여 개발자들이 문제가 없는 소스로 작업을 할 수 있게 보장해주며, 릴리즈가 필요한 시기에 언제든지 릴리즈가 가능하도록 지원해준다.
    9) 결과 분석
    빌드와 테스트가 완료된 후에 테스트 결과서를 통해서 문제가 있는 테스트를 개발자가 수정하도록 하고, Code Inspection결과를 PM이 검토하여 담당 개발자가 수정하도록 한다.
    다음으로 Coverage 분석 결과를 통해서 테스트가 부족한 부분은 PM이 담당 개발자에게 지시항 테스트를 보강하도록 한다.

    3.Hudson 설치

    (1) Hudson의 설치 및 기동


    1) https://hudson.dev.java.net/ 에서 hudson을 다운로드 받는다.
    2) 다운로드 받은 Hudson.war를 Apache Tomcat에 deploy해서 구동 하거나 도는 java –jar hudson.war로 hudon으르 기동한다. 디폴트로 설치된 hudson은 8080포트를 통해서 접근이 가능하다. (Tomcat을 통해서 설치 하지 않은 경우)

    WAS에 인스톨 정보
    http://hudson.gotdns.com/wiki/display/HUDSON/Containers

    (2) Hudson과 소스 관리 시스템 연동
    좌측 메뉴에서 “New Job”을 선택하여 새로운 작업을 등록한다.
    Job name을 선택하고 “Build a free-style software project”를 선택한다. 아직까지 다른 빌드 선택은 안정화 되어있지 않기 때문에 이 메뉴를 중심으로 설명한다.
     

    사용자 삽입 이미지

    <그림 1. 새로운 프로젝트의 생성>

    (3) 소스 관리 시스템과 연동
    Job이 생성되고 나면 초기화면에서 Job을 선택할 수 있다 Job을 선택하면 좌측에 Configure라는 메뉴가 생기는데, 그 안으로 들어가면 Job에 대한 설정을 할 수 있다.

    먼저 소스 관리 시스템으로부터 코드를 내려받도록 설정해야 한다.
    “Source Code Management”에서 사용하는 소스 관리 시스템을 선택한다.
    이 예제에서는 Subversion을 선택한다.
    Subversion을 선택한후 Repository URL에 SVN접근 주소를 입력한다.
    svn://source.example.com/trunk 그 아래에 “Local module directory”에 SVN 레파지토리의 하위 디렉토리를 선택한다. “/myproject” 식으로
    이렇게 하면 svn://source.example.com/trunk/myproject 에서 소스 코드를 매번 내려받게 된다. Repository URL과 Location을 지정하면 Hudson이 자동으로 SVN에 접속을 시도해본다. 만약에 id와 passwd가 필요한 경우에는 아래 그림과 같이 “enter credential”이라는 링크가 Repository URL 아래 나타나서 id와 passwd를 입력할 수 있게 한다.
     

    사용자 삽입 이미지

    <그림 2. SVN 접속 정보 입력>
    여기에 소스 관리 시스템 연결에 관련해서 몇가지 옵션을 추가할 수 있다.

     Use Update
    소스 관리 시스템에서 소스를 내려받을 때 디폴트가 모든 소스를 매번 다운로드 받는것인데 이런 경우에는 소스양이 많을 경우 다운로드에 많은 시간이 소요되서 전체 빌드 시간이 늘어날 수 있다. 이때 “Use Update”라는 옵션을 사용하면 처음에만 소스 코드를 전체 다운로드 받고, 두번째 부터는 변경된 소스 코드만 다운로드 받기 때문에 소스 코드를 다운 받는 시간을 많이 줄일 수 있다. (svn update와 같은 명령)

    Repository Browser
    Repository Browser란 소스 관리 시스템에 저장된 소스의 내용 웹에서 브라우징할 수 있는 도구이다. 도구에 따라서 이전 버전과 변경된 부분에 대한 Diff비교 또는 처음 소스 코드가 생성되었을 때부터 매번 커밋되었을 때 변경 내용에 대한 Revision등에 대한 모든 히스토리를 출력해준다. 이런 기능은 빌드가 깨졌을 때, 바로 빌드 버전에 대한 소스 변경 내용을 추적하여 누가 어떤 코드를 변경하였는지를 추적하여 가능한한 빠른 시간내에 문제를 해결하게 해준다.
    이 옵션을 체크해놓으면 빌드가 완료된후 Job의 Changes를 보면 소스 코드가 변경된 부분에 대해서 Repository Browser로 링크가 걸려서 소스를 웹에서 바로 확인하거나 전버전에서 바뀐 부분을 확인할 수 있다.
    대표적인 Repository Browser로는 오픈소스 제품인 Sventon과 상용제품인 Fisheye등이 있다.

    (4) 빌드 트리거링
    다음 설정해야 하는 부분이 Build Triggers 설정이다.
    이 설정은 언제 빌드가 돌아야 하는가를 설정하는 부분으로 3가지 옵션을 제공한다.

    1) Build after other projects are built
    이 옵션에는 다른 Job(Project)의 이름을 인자로 넣는다.
    이렇게 하면 지정된 프로젝트의 빌드가 정상적으로 끝나면 자동으로 이 프로젝트가 Invoke된다. 만약에 빌드만 하는 Job과 테스트만 하는 Job이 있고 테스트는 자주 사용하고 빌드후에 반드시 테스트를 해야할 때, 테스트 Job에서 이 옵션으로 선행작업을 빌드로 해놓으면 빌드를 수행할 때 마다 빌드가 성공하면 테스트를 수행하게 된다. 테스트만 수행하면 빌드와 상관없이 테스트만 수행된다.
    이 옵션은 프로젝트 실행의 전후 관계(Chainning)을 하는데 매우 유용하게 사용할 수 있다.

    2) Poll SCM
    이 옵션을 사용하면 여기에 지정한 주기별로 소스 관리 시스템을 폴링(체크)하여 변경이 있을 경우에만 빌드를 수행한다.
     

    사용자 삽입 이미지

    <그림 Build Trigger 등록 >

    시간 설정 방법은 unix의 crontab 명령과 같은 형식으로 아래와 같은 형식을 사용한다.
    분 시간 날짜 월 요일

    사용 예는 다음과 같다.
    # 매일 12시에 실행
    00 12 * * *
    # 매주 일요일 1시에 실행
    00 01 * * 7
    # 매일 12시와 5시에 실행
    00 05 * * *
    00 12 * * *

    3) Build periodically
    마지막으로 Build periodically는 정해진 시간 주기별로 소스가 변경과 상관없이 무조건 주기적으로 빌드를 수행하며 Poll SCM과 마찬가지로 crontab과 같은 형식으로 스케쥴을 등록한다.

    (5) Build
    정해진 스케쥴 정책에 따라 빌드 프로세스가 기동되면 실제 빌드를 수행할 빌드 스크립트가 구동되어야 하는데, Hudson에서는 ANT,MAVEN,그리고 Unix/Windows shell을 수행할 수 있도록 되어 있다. 여기서는 ANT 기반으로 설명을 한다.
     

    사용자 삽입 이미지

    <그림. Invoke ANT 설정 >

    Invoke ANT를 선택 하면 다음과 같은 옵션을 선택할 수 있다.

     ANT Version
    Hudson 초기화면에서 “Manage Hudson”메뉴로 들어가면 “System configuration” 메뉴에서 여러 개의 ANT_HOME을 등록할 수 있다.
    ANT 버전에 따라서 플러그인이 차이가 날 수 도 있고, 프로젝트에 따라서 사용해야 하는 ANT 버전이 틀릴 수 있기 때문에 여러 개의 ANT를 등록할 수 있게 해준다.
    예를 들어 프로젝트가 JUnit 3.8대와 JUnit 4.X대로 각각 구현되어 있다면 ANT에 설치되어야 하는 JUnit 라이브러리 버전이 틀리기 때문에 두개의 ANT를 설정해야 할 수 있다. 이런 경우에 “System configuration”에서 ANT를 여러 개 등록해놓고, 이 ANT Version 메뉴에서 필요한 ANT 버전을 선택하면 된다.

     Target
    ANT 스크립트의 Target을 설정한다.

     Build File
    ANT 스크립트를 지정한다. 일반적으로 build.xml을 지정한다.

     Properties
    ANT 스크립트에 전달해야 하는 Property를 지정한다.
    예를 들어 스크립트내에 $workspace라는 변수를 지정하였을 경우 –Dworkspace=값 이런식으로 텍스트 상자에 정의하면 빌드 스크립트로 인자를 전달할 수 있다.

     Java Options
    ANT 를 기동하는데 필요한 자바 옵션을 지정한다. ANT도 자바 프로그램이기 때문에 여러가지 JVM 옵션이 지정되는데 Heap,Perm size등을 여기서 –Xmx256m 식으로 지정하여 이 옵션으로 ANT 프로세스를 실행할 수 있다.

    여기 까지 설정하면 주기적으로 빌드를 자동화 하는 설정이  완료 되었다.

    (6) Hudson의 사용
    초기화면에 들어가면 등록된 프로젝트 리스트들이 나온다.
     

    사용자 삽입 이미지

    초기화면에서는 현재 빌드 상태와 프로젝트별 빌드 성공 실패 여부가 나타난다. 빌드가 성공하면 맑은 태양이 실패율이 높으면 천둥 모양으로 아이콘이 변경이 된다.

    초기화면에서 프로젝트를 클릭하면 아래와 같은 화면이 나오는데
     

    사용자 삽입 이미지

    < 그림, Hudson 프로젝트별 초기화면 >
    Changes는 빌드 버전별로 소스 관리 시스템에서 지난 버전에 비해서 변경된 내용 누가 변경했는지 그리고 커밋시에 개발자가 추가한 Comment를 확인할 수 있다.Workspace는 이 프로젝트의 빌드 디렉토리를 보여준다. 브라우져를 통해서 빌드에 사용된 파일등을 확인할 수 있다.
    그 아래 메뉴가 “Build Now”인데 이 메뉴는 스케쥴에 상관없이 지금 강제적으로 빌드를 하게 한다.
    좌측 맨 아래 메뉴는 BuildHistory로 언제 빌드가 수행되었고 현재 빌드 상태와 빌드 성공 실패 여부를 나타낸다.

    (7) Hudson과 Email 연동
    Hudson 초기화면에서 Manage Hudson > System Configuration 메뉴에 들어가면 Email-Notification 설정부분이 있는데, 여기 SMTP 서버를 설정해주면 빌드가 실패하였을 때 등에 담당자들에게 메일로 통보를 할 수 있다. SMTP 설정을 한후 프로젝트의 configuration 메뉴에서 Post-build Actions에서 Email Notification에 Receipients에 이메일 주소를 적어놓으면 빌드가 실패했을때와 실패한 빌드가 복구 되었을 때 이메일이 발송된다.
     

    사용자 삽입 이미지

    <그림. Email Notification 설정 >


    (8) JUnit 테스트 연동
    CI에 대해서 설명할 때 Test에 대해서 설명했는데, Hudson에서는 JUnit Test Report를 출력해주는 기능을 지원한다.
    프로젝트 configuration에서 Post-build actions의 “Publish JUnit test result report” 메뉴에서 JUnit 리포트 파일명을 지정해주면 아래와 같이 테스트가 끝나고 테스트 리포트가 생성되면 테스트 성공 실패 여부를 그래프로 나타내주고, 테스트의 Progress도 누적 그래프로 프로젝트 초기화면에서 출력해준다.

    사용자 삽입 이미지

    <그림. 프로젝트 초기화면에서 테스트 히스토리에 대한 그래프 > 
    사용자 삽입 이미지

    <그림. 프로젝트별 테스트 성공 실패 요약 >

    이때 주의할점은 JUnit의 테스트 리포트의 파일 경로는 절대 경로가 아니라 프로젝트 Workspace에 대한 상대 경로이기 때문에 상대 경로로 지정해야 한다.

    (9) Hudson과 Japex를 이용한 부하 테스트 연동
    Japex는 단위 테스트에 대한 부하 테스트를 할 수 있는 단위 부하 테스트 자동화 프레임웍이다. Japex에 대한 사용 방법은 단위 테스트의 “단위 부하 테스트” 부분을 참고하기 바란다.
    Japex 역시 JUnit과 마찬가지로 성능에 대한 결과 (테스트 소요 시간)를 그래프로 출력할 수 있다. JUnit과 설정 방법이 같으며 프로젝트 > configuration > Post-build Actions > Record Japex test report에 Japex 테스트 리포트 경로를 추가하면 된다.
     
    설정이 제대로 됐으면 테스트 수행후에 왼쪽에 Japex Trends Report라는 메뉴가 생겨서 성능 테스트에 대한 결과를 누적 그래프로 출력해준다.

    Japex 테스트 플러그인은 Hudson에 Default로 포함된 것이 아니기 때문에 http://hudson.dev.java.net에서 다운받아서 Hudson에 추가로 설치해줘야 한다.


    (10) Hudson과 Cobertura를 이용한 Coverage분석
    Coverage 분석에 대해서는 EMMA와 Cobertura, Clover에 대한 확장 플러그인을 제공하는데, 플러그인을 설치한후 JUnit과 Japex와 동일한 방법으로 리포트에 대한 위치를 등록해주면 아래와 같이 커버러지의 누적 그래프를 클래스별,라인별,브랜치별로 출력해준다.
     

    사용자 삽입 이미지

    (11) 그외의 기능들
    본 문서에서는 Hudson에 대한 대략적인 기능을 살펴보았다.
    Hudson은 이 이외에도 여러 개의 Hudson 인스턴스를 구성하여 클러스터된 빌드환경을 구축할 수 있다. 여기서 클러스터란 로드분산이나 장애 대응등의 의미가 아니라,
    하나의 소스 코드를 가지고 Windows,AIX,HP 버전으로 각각 빌드가 필요할 때, 각 서버에 Hudson을 따로 설치하고 각각 관리하는 것이 아니라 설치는 각각 하더라도 하나의 콘솔화면에서 컨트롤을 하도록 설정이 가능하다.
    또한 여러 확장 플러그인을 통해서 기능 확장이 가능하다.

    (12) Hudson 사용시 주의할점
    Hudson은 이미 JBoss 프로젝트나 기타 상용 프로젝트에서 사용될정도로 매우 널리 쓰이고 안정적인 버전이다. 그럼에도 불구하고 오픈 소스의 한계점과 잦은 업그레이드로 인해서 잠재적인 버그가 있고 특히 플러그인들의 버전이 Hudson의 버전 업그레이드를 쫓아가지 못해서 일부 플러그인들은 하위 버전에서만 작동하고 최신 버전에서 작동하지 않는 경우가 있기 때문에 자신이 사용하고자 하는 플러그인들에 맞는 Hudson 버전을 사용하는 것이 중요하다.
    여기서 소개된 플러그인들은 Hudson 1.7 버전을 기준으로 사용 및 검증이 되었다.

    4. 그외의 CI Tools
    예전에는 CI 툴이 Cruise Control이나 Ant hill이 주류를 이루고 있었으나,
    Hudson이 등장하면서 많은 프로젝트들이 쉽고 직관적인 인터페이스와 확장성으로 인해서 많이 사용되고 있다.
    TeamCity의 경우 일반 버전은 무료로 제공되며 TeamCity Pro는 상용이다. 무료 버전도 상용 코드를 기반으로 하는 만큼 Hudson에 비해서 높은 안정성을 가지고 있으다.
    AntHill Pro 역시 꾸준히 Java 진영의 CI도구로 사용되고 Atlassian의 Bamboo도 근래에 들어 많이 프로젝트에 사용되고 있다.

    posted by 알 수 없는 사용자
    prev 1 2 next