Javascript 단순화의 백미 jQuery

Posted 2010. 5. 7. 03:23
jQuery는 복잡한 코드를 간결하게 표현하는 독특한 철학이 있다. 무엇이든 단순하고 재사용 가능한 것으로 유지하기 위해 디자인 되었다. jQuery는 2006년 초 John Resig에 의해 만들어 졌다. DOM 스크립팅과 Ajax의 복잡성을 심플하게 하고 싶다면 jQuery를 권장한다.

다음은 jQuery없는 DOM스크립팅이 얼마나 간결하게 변경되는 보여주는 예제이다.
var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) {    var link = links.item(i);    link.onclick = function() {        return confirm('You are going to visit: ' + this.href);    };}이 소스가 아래와 같이 간결해진다.
$('#external_links a').click(function() { return confirm('You are going to visit: ' + this.href);});

window.onload = function() {    // do this stuff when the page is done loading};대신에 
$(window).load(function() {    // run this when the whole page has been downloaded});와 같이 사용이 가능하다.
load와 ready 의 차이
load는 모든 html구성요소의 로딩이 완료될때까지 기다리는 반면 ready는 선택적으로 먼저 로딩을 시킬수가 있다. 
예를 들어 html이 로딩되기 전에 이미지를 먼저 로딩시키고자 한다면 ready를 사용한다.
 $(document).ready(function() {
   // do this stuff when the HTML is all ready
});

이 코드는 document 엘리먼트 주위에 jQuery객체를 만들고 HTML DOM문서가 준비될때 함수를 설정하여 인스턴스를 호출한다.
이 함수를 필요한 만큼 호출한다. 진정한 jQuery 스타일에서, 지름길은 이 함수를 호출하는 것이다. 함수를 $() 함수로 전달한다.

또다를 jQuery의 장점은 스트링을 이용하여 엘리먼트를 생성하는 것이다. 결과는, 그 엘리먼트를 포함하고 있는 jQuery 객체가 된다.
 $('<p></p>')
    .html('Hey World!')
    .css('background', 'yellow')
    .appendTo("body")

$('#message').css('background', 'yellow').html('Hello!').show();

특정 엘리먼트에 Ajax업데이트하기
$('#status').load('status.jsp');


 $.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});
==> 매개변수를 서버상의 페이지로 전달할때 사용법

복잡한 Ajax 스크립팅을 사용하는 예제
 $.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',  //xml, html, script, json 으로 지정가능
    timeout: 1000,
    error: function(){  //beforeSend, error, success, complete 콜백 지정가능
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

animate함수를 이용해서 애니메이션을 나타낼수 있다.
$('#groe').animate({height:500,width:500},"slow",function(){
alert('The element is done growing');
}
기본적인 빌트인 함수로 fadeIn, fadeOut, slideDown, slideUp을 사용하여 애니메이션 효과를 나타낼 수 있다.
$('#nav').slideDown('slow');

jQuery는 DOM스크립팅과 이벤트 핸들러를 단순화 하는데 제격이다. DOM의 트래버스와 조작이 쉽고, 이벤트의 첨부, 제거, 호출은 매우 자연스러운 일이며 직접 수행하는 것보다도 에러도 적게 발생한다.
* append() : 다른 엘리먼트로 연결가능
* clone() : 엘리먼트를 중복시킴
* html() :
* empty() : 콘텐츠 삭제
* remove() : 엘리먼트 삭제
* wrap() : 다른 엘리먼트로 엘리먼트를 랩핑한다
 
DOM을 트래버스 함으로써 jQuery 객체의 콘텐츠를 변경할 때 여러 함수를 사용할 수 있다. 엘리먼트의 siblings(), parents(), children()을 사용가능하며 , next(), prev() 엘리먼트도 선택가능하다. 아마도 가장 강력한 것은find()함수 일 것이다. jQuery셀렉터를 사용하며 ,jQuery객체의  엘리먼트 종속관계들을 통해 검색할 수 있다. 이 함수는 end()함수와 사용될 때 더욱 강력해진다. 이 함수는 실행 취소 함수와 비슷하고, find()또는 parents()또는 다른 트래버싱 함수들을 호출하기 전에 가졌던 jQuery객체로 돌아간다.
메소드 체인과 함께 사용되면, 복잡한 연산도 단순하게 보이게 할수 있다.
$('form#login')    // hide all the labels inside the form with the 'optional' class    .find('label.optional').hide().end()    // add a red border to any password fields in the form    .find('input:password').css('border', '1px solid red').end()    // add a submit handler to the form    .submit(function(){        return confirm('Are you sure you want to submit?');    });
위의 코드에서 주석을 제거하면 아래의 형태와 같아진다.
$('form#login').find('label.optional').hide().end().find('input:password').css('border', '1px solid red').end().submit(function(){        return confirm('Are you sure you want to submit?');    });

jQuery의 셀렉터 신택스는 CSS3과 XPath( 하나의 문서에서 엘리먼트를 찾는 강력한 신택스)에 기반하고 있다. CSS3과 XPath 신택스를 더욱 잘 안다면, jQuery 사용이 더욱 수월해진다.
$('td:empty').html('-'); - 테이블의 모든 빈 컬럼안에 대시(dash)를 추가한다.
$('input:not(.required)').hide(); - 'required'클래스를 갖고 있지 않는 input을 숨김
$('ul, ol, dl').hide(); - 다중 셀렉터를 콤마를 이용해서 연결가능.
$("input:checkbox/..").css('border', '1px solid #777'); - 보더를 모든 체크박스의 부모엘리먼트에 추가하려면 /..를 사용.
$('table.striped > tr:odd').css('background', '#999999'); - 보통 가독성 있는 테이블을 나타내기 위해 홀수, 짝수 서로 다른 css를 입히고자 할때..
 
플로그인으로 jQuery확장하기
 
 
===이하는 계속 작성중.... 


JAVA5에서 제공하는 기본 어노테이션이 3개뿐인데, 여기저기 사용되는 코드를 보면 그 어노테이션의 수가 거의 무한대다. 처음엔 이걸 다 어떻게 익히라는거야? 라는 무식한 생각을 하게되었다. 나중에 알고보니 직접 만든 어노테이션이란거. interface, class만들어 사용하듯 annotation도 직접 만들어 사용가능하다. (당연한얘긴가? 그렇지 않을수도...)

어노테이션 vs 어노테이션 유형 = 클래스의 인스턴스 vs 클래스 로 비교하면 이해가 빠르다.
어노테이션 유형은 인터페이스와 유사하지만 interface선언앞에 "@"가 붙는다. 또 실제로 새로운 어노테이션은 인터페이스를 만드는 것과 많은 부분 같다.

1. 기본 어노테이션

샘플1. 어노테이션 유형 만들기
package com.xxx.xxx;
public @interface TODO{ String value(); }

샘플2. 어노테이션 유형 사용하기

import  com.xxx.xxx.TODO;

@TODO("Figure out the amount of interest per month")  ==============a.
public void calculateInterest(float amount, float rate) {
  // Need to finish this method later
}
위의 사용형태는 아래와 같이 사용해도 된다.
@TODO(value="Figure out the amount of interest per month")
멤버변수가 한개일경우엔 "value =" 부분 없이 바로 사용이 가능하다.




2. Default 값을  가지는 어노테이션 유형

샘플3. Defautl값을 가지는 어노테이션 유형 만들기
package com.xxx.xxx;
public @interface GroupTODO {
  public enum Severity { CRITICAL, IMPORTANT, TRIVIAL, DOCUMENTATION };
  Severity severity() default Severity.IMPORTANT;
  String item();
  String assignedTo();
  String dateAssigned();
}
위의 어노테이션 유형은 아래와 같이 사용한다.

샘플4. Default값을 가지는 어노테이션 사용하기
import com.xxx.xxx;
@GroupTODO(item="Figure out the amount of interest per month", 
    assignedTo="Brett McLaughlin",
    dateAssigned="08/04/2004"
 )
public  void calculateInterest(float amount, float rate) {
    // Need to finish this method later
}
위의 경우는 DEFAULT값을 사용할 경우 severity부분을 생략한 것이고 아래는 DEFAULT이외의 값을 사용해야하기에 severity를 표기한 것이다.

샘플5. Default이외의 값을 가지는 어노테이션 사용하기
import com.xxx.xxx;
@GroupTODO( severity=GroupTODO.Severity.DOCUMENTATION,
    item="Figure out the amount of interest per month", 
    assignedTo="Brett McLaughlin",
    dateAssigned="08/04/2004"
 )
public  void calculateInterest(float amount, float rate) {
    // Need to finish this method later
}


3. Target지정하기

어노테이션 유형을 만들때 Target을 지정할수가 있다. Target을 지정함으로 어노테이션유형이 잘못 사용되는것을 방지할수 있다. Target을 지정하려면 먼저 ElementType을 알아야 한다. java.lang.annotation.ElementType enum 클래스에는 TYPE, FIELD, METHOD, PARAMETER, CONSTRUECOR, LOCAL_VARIABLE, ANNOTATION_TYPE, PACKAGE의 종류가 있다.

샘플6. Target 사용예
 @Target({ElementType.TYPE,
         ElementType.METHOD,
         ElementType.CONSTRUCTOR,
         ElementType.ANNOTATION_TYPE})
public @interface TODO {
  String value();
}


4. Retention 설정 (*retentions 의 사전적 의미는 : 보존, 보유, 감금, 보존력 )

자바 컴파일러가 어노테이션 유형을 다루는 관련 방법을 표시

컴파일러 옵션의 종류
  • RUNTIME - 주석이 달린 클래스의 컴파일 된 클래스 파일에 있는 어노테이션을 유지하다가 클래스가 첫 번째로 로딩될 때 이를 읽는다.
  • CLASS - 컴파일 된 클래스 파일에서 어노테이션을 유지하지만 런타임 시 이를 무시한다. (Default 작동법)
  • SOURCE - 지시된 대로 어노테이션을 사용하지만 컴파일 된 클래스 파일에서 이를 버린다.

    세 가지 옵션은 java.lang.annotation.RetentionPolicy에서 SOURCE, CLASS, RUNTIME으로 구분한다.

  • 5. Documented
    기본적으로 어노테이션은 Javadoc에 포함되지 않는다. 하지만 Documented를 사용하면 클래스의 Javadoc에 포함된다. 이를 위해서 Retention의 정책은 RUNTIME으로 지정해야 한다.


    6. Inherited
    자주 사용하지도 않는 혼란을 일으키는 것이므로 참고문서만 보자.

    어노테이션을 잘 사용하면 매우 유용하지만 너무 남용하게 될경우 코드의 가독성을 떨어뜨리게 되므로 신중을 기해 추가해야 한다.




    JDK1.1부터 JDK1.4.x까지 사용하던 개발자(나를 포함하여)에게 JDK5(코드명 Tiger)는 어색한 코드 그 자체였다. 그중에서도 메타데이터 개념의 어노테이션(Annotation)은 어색함을 넘어 생소함으로까지 다가오게 된다. 최근 인기있는 Spring과 같은 프레임웤에서는 이 어노테이션을 이해하지 않고는 따라잡을수가 없는 상황이다.

    메타데이터(Metadata)는 간단히 말해서 데이터에 대한 데이터이다. 메타데이터는 문서화에 사용될 수 있고 코드 의존성을 트래킹하는데 사용되며 심지어 초기 컴파일 시간 체크를 수행 할 때도 사용될 수 있다. XDoclet 같은 메타데이터용 툴들은 이러한 기능을 핵심 자바 언어로 가져왔고 얼마 동안 자바 프로그래밍 관습의 일부가 되었다고 한다.

     어노테이션은 코드에 추가할 수 있고, 패키지 선언, 유형 선언, 생성자, 메소드, 필드, 매개변수, 변수에 적용할 수 있는 변경자(modifier)이다. Tiger에는 빌트인 어노테이션이 추가되었고 직접 작성할 수 있는 커스텀 어노테이션도 지원한다.

     JSR 175(자바 프로그래밍 언어를 위한 메타테이터 장치) 메타데이터를 핵심 자바 언어로 결합하는 공식 스팩을 제공한다. JSR에 따르면 어노테이션은 "프로그램의 문법에 직접적인 영향을 주지 않는다. 하지만 개발과 전개 툴은 이러한 어노테이션을 읽고 특정 방식으로 처리하면서 부가적인 자바 프로그래밍 언어 소스 파일, XML 문서 등을 만들어내서 어노테이션을 포함하고 있는 프로그램과 결합하여 사용될 수 있게 한다."

    메타데이터의 가치는 컴파일러체크와 코드분석을 하는데 유용하다. 어노테이션을 이러한 기능으로 사용할수 있다.


    어노테이션의 종류

  • Marker 어노테이션은 변수가 없다. 이 어노테이션은 이름으로 구분되며 추가 데이터 없이 나타난다. 예를 들어, @MarkerAnnotation은 marker 어노테이션이다. 데이터가 없으며 단지 어노테이션 이름만 있을 뿐이다.
  • Single-value 어노테이션은 marker와 비슷하지만 데이터를 제공한다. 싱글 비트 데이트를 제공하기 때문에 간단한 신택스를 사용할 수 있다. (단, 어노테이션 유형이 이 문법을 수용해야 함): @SingleValueAnnotation("my data")이는 @표시만 제외하고는 일반적인 자바 메소드 호출과 비슷하다.
  • Full 어노테이션은 다중 데이터 멤버를 갖고 있다. 결과적으로 전체 신택스를 사용해야 한다. (그리고 어노테이션은 일반 자바 메소드와 더 이상 비슷하지 않다): @FullAnnotation(var1="data value 1", var2="data value 2", var3="data value 3")
  • Default syntax를 통해 어노테이션에 값을 제공하는 것 외에도 한 개 이상의 값을 전달해야 할 때 name-value쌍을 사용할 수도 있고 값 어레이를 제공할 수 있다. 이때는 중괄호({})를 사용한다


    빌트인 어노테이션의 사용예

    (java 5 -Tiger에서는 아래 3개의 표준 어노테이션을 제공한다.)
    Override - Override는 메소드에 대해서만 사용되는 Marker어노테이션이다. (클래스, 패키지 선언, 기타 구조체는 사용불가.) 주석이 첨가된 메소드는 수퍼클래스에서 메소드를 오버라이드한다는 것을 나타낸다. interface를 implements하는데 있어서 제일 많이 사용하게 되는 어노테이션이라 할수 있다.

    Deprecated
    - Marker어노테이션. 더 이상 사용되지 말아야 하는 메소드 또는 클래스나 인터페이스에 주석을 단다.

    SupressWarnings
    - 새로워진 자바 컬렉션의 경우 generics는 모든 유형의 새로운 type-safe 작동을 만든다. 하지만 이를 무시할 경우 컴파일러 경고를 받게 되는데, 이러한 경고를 무시하고 싶다면 이 어노테이션을 사용한다. 변수에 들어갈 값들은 한개 또는 여러개일 경우에는 {}로 묶인 어레이 형태로 들어가게 된다.

    참고문서 : http://www.ibm.com/developerworks/kr/library/j-annotate1/index.html




    « PREV : 1 : ··· : 41 : 42 : 43 : 44 : 45 : 46 : 47 : ··· : 61 : NEXT »