12년 전통의 폰트래블 방문을 환영합니다.

원문 게재일: 2008 년 10 월 28 일
번역 게재일: 2009 년 1 월 13 일
난이도: 중급
영어로: 보기
페이지뷰： 6737 회
의견： 0 (보기 | 의견 추가 - 로그인)

평균 평가 등급 (6 투표수)
아티클 순위

도입

jQuery는 지난 몇 개월 동안에 웹 개발자를 위한 유력한 자바스크립트 라이브러리로 급속도로 세를 넓혀가고 있다. 이런 현상은 브라우저 기반 응용으로 데스크톱 응용을 교체하기 위한 RIA(Rich Internet Application) 활용과 필요성이 급격하게 늘어나는 상황과 맞물려 돌아간다. 스프레드시트부터 급여 계산에서 전자편지 응용에 이르기까지 브라우저로 데스크톱 응용을 교체해 나가는 현실이다. 이런 응용 개수가 많아지고 복잡해지면서 자바스크립트 라이브러리는 응용을 만드는 튼튼한 기초로 더욱 더 중요성이 높아질 것이다. jQuery는 개발자를 위한 필수 라이브러리가 되었다. 이 연재물에서는 jQuery를 깊숙하게 탐험하며, 개발자가 RIA를 빠르고 쉽게 만들기 위한 튼튼한 토대를 제공한다.

직전 기사에 서 RIA를 만드는 세 가지 기본 구성 요소와 페이지에 상호 작용을 추가하는 방법을 배웠다. 첫 번째로 살펴본 Event 모듈은 페이지에서 사용자가 일으킨 사건을 잡아서 프로그램 상에서 반응하도록 만들었다. 이런 기능을 사용해 버튼 누르기, 마우스 이동과 같은 사용자 행동 처리용 코드를 붙인다. 다음으로 살펴본 Attributes 모듈은 페이지 엘리먼트에서 값을 얻고 엘리먼트에 값을 설정하는 방법과 변수값을 포함한 자료 객체로 취급하는 방법을 설명했다. 이런 변수값은 사용자에게 어떤 반응을 보일지 결정하는 과정에 필요한 정보 대다수를 포함한다. 마지막으로 CSS 조작 방법을 살펴보고 페이지를 다시 읽어들이지 않고서도 배치, 색상, 글꼴 등을 변경하는 방법을 익혔다. 이런 세 가지 모듈에 익숙해지면, 상호대화식 웹 페이지를 구성하는 세 가지 기초 구성 요소를 익힌 셈이다. 사용자 반응을 잡아(Event), 정보를 획득하고(Attributes), 사건과 정보를 조합한 내용을 토대로 피드백을 제공한다(CSS).

이 기사에서 동적인 웹 페이지를 구성하는 세 가지 기본 요소를 사용한다. 이런 요소는 오늘날 볼 수 있는 좀 더 첨단 웹 응용의 일부로 자리잡은 "화끈한" 효과와 기능을 제공한다. 추가 모듈이 RIA에 핵심은 아니지만, 사용자가 기억할 만한 추가 기능을 제공하며 RIA에서 사용 가능한 범위와 기능을 엄청나게 넓혀준다. 살펴볼 첫 모듈은 Effects 모듈로 엘리먼트 감추기, 엘리먼트 이동, 페이드 인/아웃과 같은 기능을 포함한다. 다시 말해 웹 페이지를 화끈하게 만드는 기능이다. 이 기사에서 설명하는 마지막 모듈은 비동기식 자바스크립트 + XML(Ajax) 모듈이다. Ajax는 RIA 하면 가장 먼저 떠오르는 단어다. Ajax는 웹 응용에 서버와 통신하는 능력을 부여해 페이지를 다시 읽어들이지 않고서도 정보를 전달하고 인출하는 기능을 제공한다(웹에 떠도는 잘못된 의견과는 달리 AJax는 단순히 멋진 자바스크립트 애니메이션 기능은 아니다). jQuery가 믿기 어려울 정도로 손쉬운 AJax 도구를 제공하며, 실제로 Ajax 사용을 자바스크립트 메서드 호출 수준으로 단순하게 만들어준다.

이 기사에서 소개하는 예제 응용은 Effects와 Ajax 모듈을 데모 웹 응용인 웹 메일로 집어넣는 방법을 보여주면서 끝을 맺는다. 몇 가지 Effects를 데모에 추가해 활력을 불어넣고, 더욱 중요하게 몇 가지 Ajax 코드를 추가해 웹 메일이 페이지를 다시 읽지 않고서도 메시지를 출력하도록 만든다.

Effects

Effects 모듈은 이름처럼 "심각한" 웹 페이지가 회피해야 하는 애니메이션과 특수 효과만 포함한다고 지레짐작하기 쉽다. 하지만 이런 기능으로 끝나지 않는다. 거의 모든 응용에서 특정 페이지 엘리먼트를 가리거나 다른 페이지 엘리먼트 상태에 맞춰 끄고 켤 필요가 있다. 이런 변화 유형이 RIA에 중요한 이유는 페이지를 한 번만 읽으면서 모든 페이지 엘리먼트를 가져온 다음에 특정 엘리먼트를 표시하고 가리는 방식으로 필요한 정보만 보여주기 때문이다. 페이지를 다시 읽는 대안은 좋은 해법이 아니다. div를 감추고 보여주는 두 가지 선택이 가능한 콤보 박스를 생각해보자. 명백히 콤보 박스가 바뀔 때마다 div를 감추고 보여주려고 페이지를 다시 읽어들이는 것보다 클라이언트 쪽 코드에서 단순히 div를 감추고 보여주는 방식이 훨씬 더 쉽고 효율적이다. 단순히 감추고 보여주느냐 페이드 인/아웃 효과를 주느냐는 설계자 마음이다.

위에서 언급한 바와 같이 가장 기초적인 효과는 show()와 hide() 함수다. 두 함수는 아주 직관적이며, 척 보면 알겠지만 페이지에 있는 특정 엘리먼트를 보여주고 감춘다.

Listing 1. show()와 hide() 함수

				
// 페이지에 나오는 모든 <p>를 보여준다.
$("p").show();

// 페이지에 나오는 모든 <p>를 감춘다.
$("p").hide();

// 페이지에 나오는 모든 <p:odd>를 감춘다.
$("p:odd").hide();

이런 기본적인 기능 이외에, show()와 hide() 함수는 보여주고 감추는 동작 방식을 좀 더 세부적으로 제어하는 기능도 제공한다. 문서에 따르면 "우아한" 보여주기/감추기 기능은 show()를 페이드 인과 슬라이딩 아웃 조합으로 해석한다.

몇 가지 예제를 살펴보기 앞서, 잠시 한 걸음 물러서서 Effects 함수에 인수를 전달하는 방법을 살펴보자. (일반적인 show()와 hide() 함수는 예외지만) 함수마다 효과를 완료하고 나서 부르는 함수와 얼마나 빠르거나 느리게 효과를 보여줄지 제어하는 속력을 전달할 수 있다. 속력 인수로 "slow", "fast", "normal"이 라는 문자열 중 하나를 지정한다. 추가로 애니메이션 주기를 정확하게 제어할 필요가 있다면 인수로 밀리 초 단위의 숫자를 넘긴다. Effects 함수로 넘기는 두 번째 인수는 함수이며, 효과를 끝내고 나서 호출되는 함수다. 이렇게 하는 이유는 여러 효과를 좀 더 큰 효과 하나로 결합할 때 특정 효과가 끝나고 나서 다음 효과를 지시하는 안정적인 제어 방법을 제공하기 때문이다.

Listing 2. 복잡한 효과

				
// "picture"라는 ID를 지정한 img는 감춰진 상태로 시작한다.
// "showPicture" 버튼이 눌러졌을 때 "picture"라는 ID를 지정한 img를 보여주고
// 애니메이션을 한다. 따라서 잽싸게 페이드인과 슬라이드 아웃을 보여준 다음에
// 쇼가 끝나면 그림에 달린 캡션을 보여준다.
// 캡션은 항상 <img> 태그 오른쪽으로 펼쳐진다.

<input type="button" id="showPicture">

<img src="/pic.jpg" id="picture"><span>This is the picture's caption</span>

// document.ready() 함수 내부에 들어갈 jQuery 코드

$("#picture").hide().next().hide();
$("#showPicture").click(function(){
   $("#picture").show("fast", function(){
       $("#picture").next().show();
   });
});

// 실제 프로그램 코드보다 설명이 더 길어졌음에 주목하자!

Effects 모듈은 show()나 hide()와 아주 비슷해서 궁극적으로 똑같은 작업을 수행하는 다른 함수를 지원한다. 여기서는 아주 구체적인 동작을 수행하게 만드는 함수 군을 소개하겠다. slideDown()과 slideUp() 함수는 페이지 엘리먼트를 보여주고 감추는 함수다. 하지만 슬라이딩 다운/업으로 엘리먼트에 애니메이션 효과를 준다(작명에 아주 머리가 파았을 테다!). 조금 전에 설명한 개선된 hide()와 show() 함수처럼, 슬라이드 속력과 작업이 끝나면 호출될 함수를 제어할 수 있다. 한걸음 더 나가서 여기에는 페이지 엘리먼트를 보여주고/감추기 위한 다른 옵션도 있다. fadeIn()과 fadeOut() 함수는 이름이 의미하듯이 페이지 엘리먼트를 투명해질 때까지 페이드 효과를 줘서 최종적으로 사라지게 만든다. 이 옵션에도 속력과 작업이 끝나면 호출될 함수를 지정할 수 있다.

페이지 엘리먼트를 완전히 감추거나 보여주지 않는 흥미로운 함수가 하나 더 있다. fadeTo()라 는 함수는 페이지 엘리먼트를 일부 투명하게 만든다. RIA에서 이런 기능이 아주 중요한 이유는 투명도는 특정 엘리먼트를 페이지에서 강조하는 훌륭한 수단이며, 페이지에서 비활성 영역을 보여주는 데 사용할 수 있기 때문이다. 예를 들어, 페이지에 여러 탭이 있는 상황에서 다른 탭이 선택하지 못한다는 사실을 강조하려고 나머지 탭에 투명도를 적용할 수 있다. 아니면 페이지 폼에서, 현재 초점이 어떤 Form 엘리먼트에 맞춰져 있는지 사용자에게 알려주고 싶을 때도 초점이 없는 모든 엘리먼트에 투명도를 가하면 구분이 가능하다. 또한 투명도 자체 효과만 해도 정말 멋지다. 뭔가를 디자인할 때 "애플이 하면 진짜 멋지다"라는 일반적인 후광 효과를 따르면 된다.

Listing 3. 멋진 효과를 추가하기 위해 fadeTo() 활용하기

				
// 페이지에 있는 모든 form 엘리먼트에 60%라는 투명도를 준다.
// 현재 초점이 있는 엘리먼트는 투명도 효과에서 제외한다.
// 애플처럼 보이지 않는가?

$(":input").fadeTo("fast", .60);
$(":input").focus(function(){
    $(this).fadeTo("fast", 1);
});
$(":input").blur(function(){
    $(this).fadeTo("fast, .60);
    });

Effects 모듈에서 소개하고픈 마지막 함수는 가장 멋지지만 가장 실수도 저지르기 쉬운 함수다. 이는 전용 애니메이션 메서드로 애니메이션에 필요한 모든 매개변수를 지정하면 나머지는 jQuery가 알아서 처리한다. 매개변수 배열에 최종값으로 넘기면 jQuery는 배열에 정의된 값을 판단해 역시 매개변수로 넘긴 속력을 적용해서 마지막 값에 이를 때까지 페이지 엘리먼트를 부드럽게 움직여준다. Listing 4는 전용 애니메이션 메서드 예를 보여준다. 말하지 않아도 알겠지만 이 함수 응용 분야는 제한이 없으므로, 독자적인 전용 애니메이션이 필요하다고 느낄 때 유용하게 써먹기 바란다.

Listing 4. 전용 애니메이션 메서드

				
// 버튼을 클릭하면, "movingDiv"라는 ID가 붙은 div에 전용 애니메이션 효과를 적용한다.
$("#myButton").click(function(){
   $("#movingDiv").animate({
      // "movingDiv"에 속한 width, opacity, fontSize를 늘리며, 5초 동안 지속한다.
      width: 700;
      opacity: 0.5;
      fontSize: "18px";
   }, 5000);
   });

Ajax

최근에 "Ajax를 사용합니까?"라는 유행어가 모든 웹 페이지에 등장하고 있지만, 모든 사람이 Ajax가 진짜로 무엇을 의미하는지 아는 건 아니다. "Ajax"를 구글에서 검색해 보면 (다른 검색 결과와 마찬가지로) 수백만 건에 이르는 결과가 나타나지만 Ajax 용어가 품고 있는 사상이 무엇인지를 혼동하고 있다는 증거처럼 보인다. Ajax는 몇몇 페이지에서 보여주는 진짜 멋진 애니메이션도 아니며 진짜 멋진 그림자가 아래에 깔린 팝업 창도 아니다. 단지 Ajax가 멋지기 때문에 웹 페이지에서 보여주는 모든 흥미로운 효과를 Ajax라고 부르지는 않는다. Ajax의 핵심은 간단하게 말해 클라이언트 쪽 웹 페이지가 페이지를 다시 읽어들일 필요 없이 서버와 정보를 주고받는 수단일 따름이다. Ajax가 페이지에서 화끈한 효과를 주지는 못하지만, 웹 응용이 데스크톱 응용을 흉내내기 위한 수단을 제공한다. 따라서 Ajax를 둘러싼 소문은 근거가 있다. Ajax를 광범위하게 사용하는 관례는 오늘날 볼 수 있는 RIA 부문의 급격한 성장을 견인하고 있다.

jQuery는 Ajax를 엄청나게 쉽게 만들어준다! 과장해 추켜세울 의도는 없다. 자바스크립트 라이브러리의 도움 없이 Ajax로 작업한다면 XMLHttpRequests를 사용해야 하는데, 마이크로소프트(Microsoft®)와 파이어폭스가 사용하는 XMLHttpRequests 사이에 벌어진 차이점을 인지하고 반환 코드를 파싱하고 그 밖에 온갖 작업을 몸소 진행해야 한다. jQuery는 Ajax를 함수 호출 한방에 끝내버린다. 농담이 아니다. 과거 100행에 이르는 코드는 현재 서너 줄이면 끝난다. 믿기 어려운 시간 절약이 아닌가? 개인적으로 jQuery를 알기 전에는 여기저기 Ajax 함수를 추가하는 데 상당한 작업이 필요한 듯이 보였다. jQuery를 사용하면 Ajax가 너무나도 단순한 작업으로 변하기에 Ajax가 제공하는 모든 기능을 십분 활용하도록 응용 프로그램을 수정해왔다. 일반 함수 호출처럼 단순하다면 사용하지 못할 이유가 무엇이랴?

독자적인 Ajax 코드를 만드는 데 가장 널리 사용하는 함수인 post()와 get() 메서드에 초점을 맞추자. 두 함수는 현재 이 기사를 읽고 있는 시점에서 일반적인 jQuery 함수와 상당히 비슷하게 동작한다. URL과 넘길 매개변수를 명세하고 Ajax 메서드를 종료할 때 수행하는 함수를 명세하면 된다. 두 함수를 설정하는 방식 때문에 jQuery에서 다른 함수 호출과 정확하게 일치하는 방식으로 Ajax 메서드를 호출할 수 있게 되었다. Listing 5를 살펴보자.

Listing 5. Ajax post()와 get() 메서드

				
// 이 코드는 myTest.php라는 php 파일에 들어간다.
// Ajax 예제를 설명하다가 PHP를 다룬 이유가 무엇일까?
// 자바/JSP를 설명하자면 지면이 부족하다.
// 서블릿 코드도 보여줘야 하기 때문이다. 하지만 PHP를 사용하면 이런 번거로움이 없다.
// 물론 두 함수는 PHP와 자바/JSP에서 제대로 동작한다.
<?php
     echo "This is my return String";
?>

// jQuery에서 Ajax를 호출하는 방법이 얼마나 간단한지를 보여준다.
// post 함수
$.post("myTest.php", {}, function(data){
   $("p").text(data);
});

// get 함수
$.get("myTest.php", {}, function(data){
   $("p").text(data);
   });

두 예제를 보면 알겠지만, 해당 함수는 다른 jQuery 함수와 거의 흡사하며, 자바스크립트 라이브러리 없이 Ajax 프로그램을 작성하는 경우와 비교해 훨씬 더 사용하기 쉽다. Ajax 호출 함수를 확장하기 위해 사용 가능한 몇 가지 인수가 있다. 첫 번째 인수는 두말할 필요없이 호출할 URL이 되어야 한다. PHP 파일, JSP 파일, 서블릿이 될 수 있으며, 실제로 요청을 처리할 수만 있다면 뭐든 가능하다. (나중에 예제 응용을 보면 알겠지만) 요청에 반드시 반응할 필요도 없다. 두 번째 인수는 옵션으로 post/get으로 넘길 자료를 담는다. 이 인수는 배열 형태다. 일반적으로 페이지에서 사용자 ID 등 Form 엘리먼트에 들어있는 정보를 넘길 때 사용한다. 서버 쪽 파일에서 요청을 처리하는 데 필요한 모든 내용을 담고 있다. 세 번째 인수는 역시 옵션이며 Ajax 함수가 성공적으로 끝나고 나서 호출할 함수다. 이 함수는 일반적으로 서버에서 전달하는 정보 결과를 처리하는 코드를 포함한다. Listing 6은 네 번째 인수 설명에 앞서 첫 세 인수를 활용하는 예제를 보여준다.

Listing 6. 추가 인수를 받아들이는 post 메서드

				
// username과 password 입력 필드를 페이지에 추가한다.
<input type=text id="username">
<input type=password id="pass">

// 서버 기반 PHP 파일을 호출한다. 서버쪽으로 전달한 정보를 이 파일 내부에서 처리한다.
$.post("myFormProcessor.php", {username: $("#username").val(), 
                               password: $("#pass").val()});

// 거꾸로, 이 PHP 파일은 받은 결과를 처리할 함수에게 정보를 반환할 수 있다.
$.post("myFormProcessor.php", {username: $("#username").val(), 
                               password: $("#pass").val()},
       function(data){
           // data 변수는 서버에서 반환된 텍스트를 포함한다.
           // 미리 설정할 내용은 없으며, jQuery가 알아서 대신 처리해준다.
           if (data != "ERROR")
              $("#responseDiv").text(data);
       }
       );

지금까지 jQuery로 Ajax를 다루는 방법은 아주 직관적이고 쉽다는 사실을 확인했다. 하지만 단순히 텍스트 문자열이 아니라 서버에서 좀 더 복잡한 정보를 다루기 시작하면 일이 꼬이기 시작한다. 더 많은 Ajax 호출이 걸려있는 좀 더 복잡한 웹 페이지에서 반환 자료는 XML 형태도 가능하다. 반환 자료는 또한 JSON 객체 형태가 될 수도 있다(JSON은 기본적으로 자바스크립트 코드에서 사용 가능한 객체를 정의하는 프로토콜이다). jQuery는 네 번째 옵션 인수로 서버에서 기대하는 반환 값 유형을 미리 정의하는 get/post 메서드에 넘기도록 허용한다. XML 문자열을 위해 "xml"이라는 문자열을 넘기고, HTML 문자열(또는 평문)을 위해 "html"이라는 문자열을 넘기고, 자바스크립트 코드를 위해 "script"라는 문자열을 넘기고, JSON 객체를 위해 "json"이라는 문자열을 넘긴다. 따라서 예를 들어, 반환 객체를 "json" 유형으로 지정하면 jQuery는 자동으로 서버에서 오는 반응 문자열을 JSON 객체로 바꿔 즉시 참조가 가능하게 만든다.

Listing 7. Ajax에서 반환 유형 명세하기

				
// 반환 객체를 JSON 객체 유형으로 정의하고, 객체 형 변환이나 평가 과정을 거치지
// 않고서 내부 필드를 참조하도록 반환 객체를 JSON 객체로 처리한다.

$.post("myFormProcessor.php", {username: $("#username").val(), 
                               password: $("#pass").val()},
       function(data){
          // jQuery는 이미 결과 자료를 JSON 객체로 변환했기에, 
          // 즉시 내부 필드를 참조할 수 있다.
          // 좀 더 깔끔한 코드를 제공하며, 향후 변경에 대응이 가능하다.
          // XML 결과를 직접 처리하는 경우와 비교하면 작업이 훨씬 쉬워진다.
          $("#username").text(data.username);
          $("#address").text(data.address);
          $("#phone").text(data.phone);
       }, 
       "json"  // 여기서 반환 유형이 JSON이라고 명세한다.
       );

설명에 시간을 들일 만한 또 다른 Ajax 함수는 load()이며, 사용자가 특정 페이지를 읽어서 결과로 HTML을 얻도록 만들어준다. 설명만 보면 그다지 흥미를 못 느낄지도 모르겠다. 하지만 시작 시점에서 웹 페이지를 파싱하듯이 jQuery 코드를 사용해 반환된 정보를 파싱하는 능력이 생긴다. 이게 무슨 이야기일까? 웹 페이지를 읽은 다음에 jQuery로 파싱이 가능한 능력을 토대로 아주 효율적이고 프로그램 작성이 쉬운 웹 로봇을 직접 만들 수 있다. 특정 페이지에서 어떤 정보 유형도 수집할 수 있다. 예제를 한번 살펴보자.

Listing 8. load() 함수 예

				
// 야후 주식 시세를 호출하는 방법으로 아주 기본적인 주식 시세 시스템을 구축한 다음에
// 야후 주식 시세 페이지에서 정보를 긁어온다.
// 여기서는 IBM 주식 가격을 찾아 "stockPrice"로 ID를 설정한 텍스트 필드에서 보여준다.
// 주식 가격을 포함한 ID는 "yfs_190_ibm"이다.
$("#stockPrice").load("http://finance.yahoo.com/q?s=ibm #yfs_l90_ibm").text();

Ajax 모듈에서 소개할 마지막 두 함수는 Ajax 작업을 훌륭하게 보조해 주는 진짜 유틸리티 함수다. 이미 여러 차례 지적한 바와 같이 클라이언트와 서버 사이에서 일어나는 상호 작용 대다수는 폼과 폼이 포함하는 엘리먼트를 둘러싸고 일어난다. 이런 통신 유형이 아주 일반적이므로 jQuery에는 두 가지 유틸리티 함수가 있어서 HTTP 질의 문자열이거나 JSON 문자열 형태로 서버 쪽에 전달할 매개변수 생성을 도와준다. Ajax가 요구하는 조건에 맞춰 지원하는 유틸리티 함수를 골라 활용한다. 활용법이 아주 간단한 이유는 전체 폼을 캡슐화하므로 개발 도중에 자유롭게 엘리먼트를 추가, 삭제, 변경할 수 있기 때문이다. Listing 9는 이런 예제를 보여준다.

Listing 9. serialize()와 serializeArray() 함수

				
// serialize() 함수는 지정 엘리먼트에 들어있는 모든 폼 엘리먼트를 살핀 다음에
// 자동으로 엘리먼트의 모든 정보를 포함하는 <element name>=<element value>&
// 형태로 HTTP 문자열을 만든다.
// 예는 "firstname=Michael&lastname=Abernethy"와 같다.
// 이렇게 만든 문자열을 Ajax 호출로 정보를 전달할 URL 뒤에 덧붙인다.
$.post("myFormProcessor.php?" + $("#myForm").serialize());

// 또한 serializeArray() 함수로 비슷한 작업을 수행할 수도 있다.
// 폼을 JSON 형태로 변환한다.
$.post("myFormProcessor.php", {json: $("#myForm").serializeArray()});

여기서 배운 모든 내용을 하나로 합치기

모든 내용을 하나로 합쳐서 만든 데모 웹 응용인 웹 메일을 마지막으로 살펴보자. 이미 지난 연재물에서 충분히 익숙하게 살펴보았을 것이다. 정보 획득을 위해 클라이언트 쪽에서 서버 쪽으로 여러 Ajax 호출을 수행한다. 여기서는 메시지를 읽고 메시지를 지울 때 AJax를 활용한다. 그러고 나서 Effects를 활용해 사용자가 메시지를 지울 때 즉시 화면에서 메시지를 사라지게 만든다. 심지어 사용자가 페이지를 다시 읽지 않으며 Ajax 호출을 활용해 비동기식으로 실제 삭제가 일어나지만 이런 삭제 동작이 즉시 일어난다. 직접 만든 웹 응용에서 Ajax 호출이 얼마나 쉬운지를 살펴보고 데스크톱 응용을 진짜로 흉내내기 위해 Ajax를 활용하는 방법을 살펴보고, Effects를 활용해 응용 프로그램 사용성을 높이는 방법을 예제를 보면서 최종적으로 확인한다.

Listing 10. 예제 웹 응용: 메시지 삭제하기

				
// 먼저 메시지 삭제를 처리하는 방법을 살펴보자.

// 첫 단계는 실제로 메시지를 지울 버튼 생성이다.
<input type=button id="delete" value="Delete">

// 다음으로 테이블 각 행에 체크박스를 추가해 사용자가 삭제를 원하는 메시지를
// 선택하도록 만든다. 이런 체크박스를 나중에 활용할 텐데, 여기에 들어있는 정보는
// 아주 중요하다(예시라고 부른다).
// 각 체크박스 값이 message.id라는 사실에 주목하자.

<tr class="messageRow" id="<%=message.id %>">
<input type=checkbox name="delId" value="<%=message.id%>" class=selectable>

// 이제 HTML이 완료되었으므로 삭제를 수행하는 jQuery 코드를 살펴보자.

// 먼저, 삭제 버튼에 이벤트를 추가한다. 버튼을 누르면 체크된 메시지를 지우기 시작한다.

$("#delete").click(function() {
   deleteMessages();
});

// 마지막으로 deleteMessage() 함수를 정의하자. 오늘 배운 내용에서 가장
// 중요한 내용을 담고 있다.
// 모든 기사에서 다룬 내용을 완성하는 함수이므로, 동작 원리를 자세히 설명하겠다.
// 참고 1 - 아주 구체적인 검색 매개변수를 넘겨 체크된 체크박스를 하나씩
// 순회하며 "selectable" 클래스 멤버만 찾도록 만든다.
// 참고 2 - 체크박스 값이 포함된 테이블 행 ID와 동일하므로, Effects 모듈을 사용해
// 전체 테이블 행을 감출 수 있다. 체크박스 값을 전달하고 표 행을 다시 얻은 다음에 감춘다.
// 참고 3 - Ajax를 호출해 실제로 DB에서 메시지를 삭제한다. messageID를 서버에 전달해
// 삭제될 항목을 알도록 만든다. 체크박스 값에 포함된 정보를 Ajax 호출 과정에서 전달한다.
// 성공인지 아닌지 신경쓰지 않기 때문에 서버에서 돌아오는 대답을 무시한다.

function deleteMessages()
{
    $(".selectable:checked").each(function() {
        $("#"+$(this).val()).remove();
        $.post("<%=HtmlServlet.DELETE_MESSAGES%>.do", {delId: $(this).val()});
    });
    }

두 번째 예제로, 메시지를 읽는 방법을 살펴보자. jQuery에서 Ajax를 활용하는 예를 보여준다.

Listing 11. 예제 웹 응용: 메시지 읽기

				

// 지금까지 예제에서 코드 대부분을 살펴보았으므로, 코드에서 Ajax 부분만 초점을 맞춘다.
// 참고 1 - Ajax 호출을 하면서 인수 네 개를 정의해 넘긴다.
// 메시지를 읽으려면 서버에 두 변수를 넘겨야 한다.
// 첫 번째는 메시지 ID로 읽기를 원하는 메시지가 무엇인지 알아야 하기 때문이다.
// 두 번째는 현재 뷰로 .. 어떤 목적으로 사용했는지 기억나지 않는다.
// (그다지 중요하지 않는 듯이 보인다)
// 참고 2 - Ajax 함수로 넘기는 네 번째 인수는 "json"이다.
// Ajax 호출로 JSON 객체를 반환하라는 표식이다. jQuery는 결과로 반환되는
// 문자열을 JSON 객체로 자동으로 변환한다.
// 참고 3 - eval() 함수를 사용하지 않고 JSON 객체를 직접 다루고 있다는 점에 주목하자.
// jQuery가 객체를 만들었기 때문이다. 따라서 필드를 직접 참조할 수 있다.
$(".messageRow").dblclick(function() {
    if ($(this).hasClass("mail_unread"))
    {
        $(this).removeClass("mail_unread");
    }
    $.post("<%=HtmlServlet.READ_MESSAGE%>.do", {messageId: $(this).attr("id"),
                                                     view: "<%=view %>"}, 
      function(data){
        if (data != "ERROR")
        {
             // JSON 객체를 활용한다.
             $("#subject").val(data.subject);
             $("#message").val(data.message);
             $("#from").val(data.from);
         }
      }, "json");
    $.blockUI(readMess, {width:'540px', height:'300px'});
    });

jQuery와 같은 자바스크립트 라이브러리는 데스크톱에서 브라우저로 응용 프로그램을 이식함에 따라 점점 더 중요해진다. 이런 응용은 점점 더 복잡해지므로, 웹 응용 프로젝트에서 jQuery와 같은 튼튼한 교차 브라우저 해법을 필수로 요구한다. jQuery는 다른 자바스크립트 라이브러리와 격차를 벌이기 시작했으며, 필요한 모든 작업을 수행하는 능력과 함께 손쉬운 개발 특성 때문에 많은 개발자가 jQuery를 핵심 라이브러리로 선택하고 있다.

연재물 세 번째 기사에서, 응용에 풍부함을 더해 데스크톱 응용과 웹 응용 사이에 경계를 허무는 두 가지 모듈을 익혔다. 이번 기사에서 가장 강력하게 추가한 내용은 Ajax 모듈로, 다른 jQuery 메서드 호출처럼 간단하고 직관적인 인터페이스를 제공함으로써 Ajax를 아주 쉽게 활용하도록 만든다. 페이지를 다시 읽느라 지연되는 짜증을 겪지 않고서 응용 프로그램 반응 속력을 높이는 훌륭한 도구로 몇 가지 예제를 곁들여 Ajax의 위력도 살펴보았다. Effects 패키지에 대한 내용도 빠지지 않았다. 애니메이션과 페이지 엘리먼트 감추기/보여주기 기능을 적절하게 사용한다면 좋은 UI 디자인이라는 강력한 지원군을 얻게 된다. Ajax와 Effect를 결합해 효율적으로 활용하면 웹 사이트에 동적인 능력을 상당히 강화할 수 있다.

마지막으로 웹 응용 예제를 다시 한번 살펴보았고, AJax 모듈을 추가해 페이지를 다시 읽어들이지 않고도 메시지를 읽고 삭제하는 방법을 익혔다. 그러고 나서 Ajax와 Effect 조합으로 페이지를 다시 읽어들이지 않고도 사용자 페이지와 DB 웹 응용에서 메시지를 삭제하는 방법을 익혔다. 사용자에게 메시지 삭제는 투명한 과정이며, 미리 정해진 방식에 맞춰 프로그램 상에서 동작한다.

이 기사는 모든 jQuery 배포판에 따라오는 핵심 라이브러리에 대한 소개 내용으로 마무리를 한다. 연재물에서 jQuery에 포함된 모든 모듈을 살펴보았으며, jQuery로 작업하는 과정이 쉽고 직관적이라는 사실을 보여줬다. 또한 어떤 웹 응용을 만들거나 jQuery는 RIA 유형에 무관하게 제 자리를 잡고 있다는 사실을 확인했다. 자바스크립트가 요구하는 수준에 맞춰 튼튼한 토대를 제공하기 때문이다. 연재물은 직접 코드를 작성하는 과정에서 jQuery를 아주 자연스럽게 활용하는 수준에 이르도록 독자들을 이끌었다. 첫 번째 기사는 jQuery 동작 방식, 페이지 엘리먼트 탐색을 위한 활용 방법, 엘리먼트를 순회하는 방법, Array 객체와 같은 방식으로 접근하는 방법을 설명했고, 두 번째 기사는 풍부함을 제공하는 토대로 세 가지 모듈을 소개했다. 마지막으로 세 번째 기사는 완벽하고 복잡한 웹 응용을 만들기 위한 프레임워크를 위한 마지막 퍼즐 조각을 보여줬다.

설명	이름	크기	다운로드 방식
예제 애플리케이션을 담은 Zip 파일	jquery.zip	69KB	HTTP

이 기사를 작성할 시점에서 가장 안정적인 최신판인 1.2.6 Minimized jQuery를 내려받아 코드 작성에 활용하자.
라이브러리에서 제공하는 사용 가능한 전체 함수를 살펴보기 위해 완벽한 jQuery API 페이지를 읽어보자.
jQuery 교차 브라우저 호환성이 걱정되는가? 교차 브라우저 지원에 대한 점검 목록을 살펴보자.
jQuery로 만들 수 있는 진짜 화끈한 첨단 효과를 살펴보자.
CSS, 자바스크립트, 기타 웹 언어에 대한 세부 내용과 배경을 W3Schools에서 살펴보자.
"jQuery로 Ajax 개발을 단순화하기"(Jesse Skinner, 한국 developerWorks, 2007년 9월): jQuery에 대한 일반적인 소개 기사다.
"Ajax overhaul, Part 2: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기"(Brian Dillard, 한국 developerWorks, 2008년 6월): 몇몇 jQuery용 플러그인을 살펴보며 라이브러리의 유용성을 넓히는 방법을 익히자.

10 년에 걸친 기술 경험을 통해 Michael Abernethy는 광범위한 기술을 토대로 광범위한 클라이언트와 작업해 왔다. 현재 경매 소프트웨어 회사인 Optimal Auctions에서 제품 개발 관리자로 일한다. Abernethy는 요즘 RIA(Rich Internet Applications)에 초점을 맞춰 복잡함과 단순함을 동시에 추구하고 있다. 컴퓨터 앞에 앉아 있지 않을 때는 양서를 끼고 멕시코 해변가에서 여유를 즐긴다.

[스크랩] 고급 jQuery(2)

2012-02-06T00:14:26+09:00

고급 jQuery(2)

출처 : http://www.ibm.com/developerworks/kr/library/wa-aj-advjquery2_2/index.html

좋은 애플리케이션을 우수한 애플리케이션으로 만들기

Michael Abernethy, Product Development Manager, Optimal Auctions

요약： jQuery를 사용하면 좋은 JavaScript 기반 웹 애플리케이션을 쉽고 간단하게 작성할 수 있습니다. 하지만 좋은 웹 애플리케이션을 우수한 웹 애플리케이션으로 만들려면 몇 가지 추가 단계가 필요합니다. 이 기사에서는 웹 애플리케이션의 품질을 최종적으로 한 단계 더 높일 수 있는 방법에 대해 자세히 설명합니다.

원문 게재일: 2009 년 7 월 14 일
번역 게재일: 2009 년 8 월 25 일
난이도: 중급
영어로: 보기
PDF: A4 and Letter (392KB | 20 pages)Get Adobe® Reader®
페이지뷰： 2824 회
의견： 0 (보기 | 의견 추가 - 로그인)

평균 평가 등급 (1 투표수)
아티클 순위

고급 jQuery(1)에서 이어지는 내용입니다.

두 번째 예제 웹 애플리케이션

이제부터는 또 다른 위젯을 사용하여 이 기사에서 다루고자 하는 마지막 3가지 주제를 설명할 것이며 먼저 위젯을 보고 설명한 후 위젯 코드를 자세히 살펴본다. 이 위젯은 이전 기사(기사에 대한 링크는 참고자료 참조)에서 보았던 익숙한 401k 위젯이다. 그렇지만 여기에서는 같은 페이지에 위젯을 두 번 포함시켰기 때문에 약간의 차이가 있다. 이 위젯은 별도의 두 테이블에 연결되어 몇 가지 흥미로운 점을 보여 준다. 그림 3에서는 위젯의 모습을 보여 준다.

그림 3. 401k 위젯

필자는 이 위젯에서 몇 가지 작업을 수행하고 있다. 첫 번째는 텍스트 필드의 합계를 구하고 합계가 100이 되는지 여부를 판별하는 작업이다. 합계가 100이 되지 못하면 위젯을 올바르게 사용하지 못하고 있음을 알려 주기 위해 사용자에게 오류를 표시한다. 두 번째 작업은 텍스트 입력을 받을 때마다 각 항목을 정렬하는 것이다. 즉, 투자 비율이 가장 높은 항목이 항상 테이블의 맨 위로 올라가게 된다. 그림 3에서 각 항목이 백분율을 기준으로 하는 내림차순으로 정렬된 모습을 볼 수 있다. 마지막으로 보기 좋게 꾸미기 위해 줄무늬를 추가한다.

이 위젯을 생성하는 HTML 코드는 놀라울 정도로 간단하다. Listing 8에서 전체 코드를 보여 준다.

Listing 8. 401k 위젯의 HTML

		   
<p><table width=300 class="percentSort" cellpadding=0 cellspacing=0>
<tbody>
  <tr><td>S&P 500 Index</td>
  <td><input type=text> %</td></tr>
  <tr><td>Russell 2000 Index</td>
  <td><input type=text> %</td></tr>
  <tr><td>MSCI International Index</td>
  <td><input type=text> %</td></tr>
  <tr><td>MSCI Emerging Market Index</td>
  <td><input type=text> %</td></tr>
  <tr><td>REIT Index</td>
  <td><input type=text> %</td></tr>
</tbody>
<tfoot>
</tfoot>
</table>

jQuery에서 위젯 설정하기

이처럼 HTML 코드가 간단한 이유는 jQuery 내에서 위젯을 설정하고 필요한 모든 코드가 jQuery 코드에 들어 있기 때문이다. 이러한 방법은 분명 이벤트를 항목에 연결하거나 특정 상황에서 클래스를 연결하는 등의 간단한 작업을 수행할 때 사용된다. 어떤 경우에는 여기에서 한 단계 더 나아가기도 한다. 이러한 위젯의 설정 코드는 모두 jQuery 코드 자체에 포함된다. HTML 설계자, JavaScript 개발자 등의 역할에 따라 내용을 분리하여 각 역할에 필요한 여러 가지 내용을 장황하게 설명할 수도 있지만 그러한 설명은 많이 들었을 것이므로 여기에서는 한 가지만 추가할 것이다. 그것은 바로 "클래스 데코레이션"이라는 아이디어로 플러그인 작성자도 자주 사용하고 있는 방법이다. Listing 8의 HTML 코드를 보면 percentSort 클래스를 테이블에 연결하는 것만으로 테이블의 전체 기능과 모습을 변환시킬 수 있다는 것을 알 수 있다. 이와 같이 우리가 설계한 위젯의 진정한 목표는 클래스를 추가하는 것처럼 쉽게 위젯을 추가 및 제거할 수 있는 방법을 제공하는 것이다.

이제 jQuery에서 위젯을 설정하는 몇 가지 단계를 살펴보자. 이러한 단계를 살펴보고 나면 Listing 9에서 이 설계 패턴이 어떻게 구현되었는지 알 수 있다.

Listing 9. jQuery 위젯 코드

		   
$(document).ready(function() {

  // the first step is to find all the tables on the page with
  // a class of percentSort.  These are all the tables we want to
  // convert into our widget.
  // After we find them, we need to loop through them and take some
  // actions on them
  // At the conclusion of this block of code, each table that's going to
  // be a percentSort widget will have been transformed

  $("table.percentSort").each(function(i){

     // each table needs a unique ID, for namespace issues (discussed later)
     // we can simply create a uniqueID from the loop counter

     $(this).attr("id", "percentSort-"+i);

     // within each table, let's highlight every other row in the table, to
     // give it that "zebra" look

     $(this).find("tbody > tr").filter(":odd").addClass("highlight");

     // because each table needs to show the "Total" to the user, let's create a new
     // section of the table in the footer.  We'll add a row in the table footer
     // to display the words "Total" and a span for the updated count.

     $("#"+$(this).attr("id") + " tfoot")
          .append("<tr><td>Total</td><td>
          <span></span> %</td></tr>");

     // finally, let's add the CLASS of "percentTotal" to the span we just
     // created above.  We'll use this information later to display
     // the updated totals

     $("#"+$(this).attr("id") + " tfoot span").addClass("percentTotal");
  });

  // now the second step, after we've completed setting up the tables themselves
  // is to set up the individual table rows.
  // We can similarly sort through each of them, taking the appropriate actions
  // on each of them in turn.
  // Upon completion of this block of code, each row in each table will be
  // transformed for our widget

  $("table.percentSort tbody > tr").each(function(i){

     // get the namespace (to be discussed in the next section)

     var NAMESPACE = $(this).parents("table.percentSort").attr("id");

     // attach a unique ID to this row.  We can use the loop counter
     // to ensure the ID is unique on the page (which is a must on every page)

     $(this).attr("id", "row"+i);

     // now, within this row of the table, we need to find the text input, because
     // we need to attach a class to them.  We utilize the namespace, and also
     // find the :text within the table row, and then attach the correct class

     $("#"+$(this).attr("id") + " :text").addClass("percent");

     // Finally, we attach a unique ID to each of the text inputs, and we do this by
     // making it a combination of the table name and the row name.

     $("#"+$(this).attr("id") + " .percent").
               attr("id", NAMESPACE + "-" + $(this).attr("id"));
  });


  // Finally, because we know we only want numerical inputs, we restrict the text entry
  // to just numbers.  We must do this now, because up until this point, the page
  // contained no elements with the CLASS "percent"
  $(".percent").numeric();

이 예제에서 볼 수 있는 것처럼 jQuery 코드에서 수많은 기능을 HTML 코드에 제공할 수 있다. 명확한 장점을 가지고 있는 이 설계 패턴은 역할 분리, 코드 재사용 등의 아이디어를 충실히 따르고 있다. 플러그인 개발자도 간단한 HTML 마크업을 위젯 플러그인으로 변환하는 방법을 사용하기 때문에 위젯 플러그인에서도 이 설계 패턴을 볼 수 있다. 기본적으로 여기에서 수행하고 있는 작업은 간단한 테이블을 정렬 및 합계 테이블로 변환하는 플러그인을 작성하는 것이다.

중요: jQuery 코드 자체에 되도록 많은 코드를 설정하고 HTML 코드는 최소한으로 사용한다.

네임스페이스

이 설계 패턴과 jQuery를 함께 사용할 때 가장 혼란스러운 부분 중 하나는 아마도 코드가 작동하는 네임스페이스를 올바르게 이해하는 것일 것이다. 이 예제를 보면 이 문제점이 매우 명확하게 보이므로 네임스페이스를 이해하는 데 많은 도움이 될 것이다. 페이지에 있는 모든 ID와 클래스를 알고 있는 상태에서 jQuery 코드를 작성한다면 매우 간결하고 쉽게 코드를 작성할 수 있다. 결국 설계의 목적도 바로 이를 위한 것이다. 하지만 페이지에 있는 클래스를 정확히 알지 못하거나 동일한 기능이 두 클래스 모두에 있다면 어떻게 될까? 이 예제에서는 이 문제를 정확히 파악할 수 있다. 이제 완전히 동일한 두 위젯을 살펴보자. 정말로 모든 것이 동일하다. 이 예제는 네임스페이스 문제를 고려하지 않았을 때 발생하는 상황을 보여 준다. 즉, 두 위젯이 서로 간섭하기 시작하면서 결국에는 잘못된 결과를 제공하고 만다.

그림 4. 네임스페이스 문제 무시하기

이러한 문제가 발생하는 이유는 잘못된 코드에서 업데이트되어야 하는 위젯을 구체적으로 지정하지 않았기 때문이다. 이에 대한 예로는 $(".percentTotal")을 호출하는 경우를 들 수 있다. 같은 페이지에 여러 테이블이 있기 때문에 이 페이지에는 percentTotal 클래스의 여러 인스턴스가 있게 된다. 물론 이들 테이블 중 하나만 있다면 이 클래스의 인스턴스도 하나만 있다고 생각할 수 있다. 하지만 페이지가 복잡해지고 위젯을 다시 사용하는 경우가 많아지면 이러한 가정이 아무런 도움이 되지 않는다. 여기에서 ID를 대신 사용해도 되지 않느냐고 물을 수도 있겠지만 이 방법은 근본적인 솔루션이 되지 못한다. 과연 어떤 ID를 지정할 수 있을까? "percentTotal"은 명료하지 않기 때문에 사용할 수 없다. 그리고 "percentTotal-1"은 페이지의 어떠한 항목도 실제로 의미하지 않기 때문에 사용할 수 없다. (결국 이들 숫자는 개발자가 임의로 만든 것에 불과하다.) 또는 "percentTotal-percentSort1"과 같은 참조를 테이블에 연결할 수도 있다. 이 방법은 하나의 대안이 될 수도 있겠지만 지나치게 복잡한 방법이다. jQuery에는 매우 정교하고 사용하기 쉬운 선택 구문이 있기 때문에 이러한 유형의 하이브리드 이름 지정 스키마를 사용하지 않아도 된다. 여기에서 많은 내용을 변경할 필요 없이 jQuery의 선택 엔진을 사용하여 네임스페이스 문제를 해결할 수 있다.

이 위젯과 관련된 문제의 핵심은 작업이 발생하는 위젯을 결정하는 것이다. 텍스트 필드 중 하나에 숫자를 입력할 때 jQuery에서 텍스트가 입력된 텍스트 필드를 어떻게 알 수 있을까? 물론 이 코드에서는 "percent" 클래스에 이벤트를 연결했으며 코드 내에서 $(this)를 사용하여 해당 클래스를 참조할 수 있다. 그렇다면 jQuery에서는 어떤 방법으로 이 이벤트가 발생한 위젯을 찾아내서 해당 percentTotal 필드를 업데이트할 수 있을까? 필자의 생각으로는 jQuery에서는 이 이벤트가 발생한 위젯을 찾기 어려울 것이다. 페이지에서 "percent" 클래스를 가지고 있는 모든 텍스트 필드를 이벤트와 연결할 수 있다는 점에서는 좋은 코드지만, 이벤트가 발생한 곳에서 포함된 위젯이 무시된다면 좋은 코드라고 볼 수 없다.

이 문제점을 네임스페이스 문제라고 부른 이유는 위젯의 이름을 혼동하여 문제를 일으킬 수 있기 때문이다. jQuery 코드가 올바르게 작동하려면 각 이름이 고유 공간 즉, 네임스페이스에서 명확하게 정의되어야 한다. 코드는 이름이 겹치지 않도록 작성하여 각 위젯이 자체 포함되도록 해야 한다. 겹치는 이름 없이 같은 페이지에 있는 같은 위젯의 여러 인스턴스를 추가할 수 있어야 한다. 기본적으로 각 위젯은 페이지에서 독립적으로 실행되어야 한다.

이 네임스페이스 문제는 여러 가지 방법으로 해결할 수 있으므로 이 기사에서는 필자의 방법을 소개한다. 이 방법을 사용자의 코드에서 사용하거나 문제점에 대한 설명을 참조하여 보다 나은 솔루션을 직접 구현할 수도 있다. 필자가 이 코드를 좋아하는 이유는 사용하기 쉽고(단 1행) 고유 네임스페이스를 제어할 수 있기 때문이다. Listing 10을 살펴보자.

Listing 10. 네임스페이스 솔루션

		   
// our event is attached to EVERY input text field with a CLASS of "percent"
// this makes our code look good, but can lead to namespace issues
$("table.percentSort input.percent").keyup(function(){

   // this simple line can establish a namespace for us, by getting the unique
   // ID attached to our table (the table is considered the "container" for
   // our widget.  It could be anything, depending on your specific code.)
   // We pass the CLASS of our widget to the parents() function, because
   // that effectively encapsulates the widget

   var NAMESPACE = "#" + $(this).parents("table.percentSort").attr("id");

   // with the namespace established, we can use the jQuery selection
   // syntax to use this namespace as our prefix for all of our remaining
   // searches.  Notice how the ambiguity is removed for our search
   // by CLASS of "percent" and "percentTotal"
   // This solves our namespace issues

   var sum = $(NAMESPACE + " input.percent").sum();
   var totalField = $(NAMESPACE + " .percentTotal");

이처럼 단 한 줄의 코드를 추가하여 위젯을 캡슐화하면 위젯의 인스턴스끼리 함수가 겹쳐지는 현상을 방지할 수 있으며 게다가 같은 이름을 가진 ID나 클래스를 사용하는 위젯 사이에서도 이러한 문제를 피할 수 있다. 이러한 유형의 코딩은 플러그인 코드에서 자주 사용된다. 잘 작성된 플러그인을 보면 네임스페이스 문제를 염두에 두고 있지만 그렇지 못한 플러그인에서는 이 문제를 중요하게 다루지 않는다. 이 예제에서 볼 수 있듯이 이 방법은 코드에서 비교적 쉽게 활용할 수 있으며 페이지가 복잡해지더라도 많은 시간을 절약하는 데 도움이 된다. 이러한 장점을 감안하면 jQuery 코드를 작성할 때 항상 네임스페이스 문제를 염두에 두어야 한다. 그리고 이 기사에서 제시한 솔루션을 자신의 모든 코드에서 활용하면 좋을 것이다.

중요: jQuery 코드 작성을 시작할 때는 항상 네임스페이스 솔루션을 먼저 포함시킨다. 위 솔루션을 사용하거나 자신만의 고유한 솔루션을 작성할 수 있다. 이 방법을 따르면 코드가 복잡해지더라도 네임스페이스로 인한 문제가 발생하지 않는다.

1.3의 새로운 기능

이 마지막 섹션에서는 1.3 릴리스의 jQuery에 도입된 새 기능에 대해 설명한다. 1.3 릴리스는 성능 측면에서 매우 중요한 릴리스이며 이 한 가지 이유만으로도 기존 코드를 이 릴리스로 전환할 충분한 이유가 될 것이다. 하지만 코드 개선에 도움이 되는 몇 가지 간단한 기능도 코어 코드에 추가되었다.

1.3 코어의 첫 번째 추가 기능은 이 기사에서 설명한 live()/die() 함수이다. 기사의 한 섹션 전체를 할애한 것만 보아도 짐작할 수 있듯이 이들 함수는 추가 기능 중 가장 중요한 기능이다. 1.3 코어의 다른 추가 기능으로는 jQuery.Event 클래스가 있다. 이 클래스는 페이지에서 발생한 이벤트를 하나의 오브젝트로 캡슐화한다. 이 클래스는 이벤트와 관련하여 필요한 모든 정보를 전달하는 잘 포함된 오브젝트를 제공하므로 이벤트 위주의 애플리케이션에서 매우 유용하게 활용할 수 있다. 유형, 대상, X 및 Y 좌표, 시간 소인 등의 정보가 전달된다. 이러한 정보는 1.3 이전 릴리스에서도 사용할 수 있었지만 문서화도 잘 되어 있지 않았을 뿐만 아니라 캡슐화도 되지 않았다. 1.3 릴리스의 마지막 추가 기능은 개발자와 별로 상관이 없을 수도 있겠지만 알아둘 만한 기능이다. 이 릴리스에서는 특정 if 명령문을 사용하여 브라우저 또는 버전을 검색하는 브라우저 검색이 더 이상 사용되지 않는다. 지원해야 하는 모든 브라우저를 처리하기 위해 코드가 얼마나 복잡해져야 할지 충분히 상상할 수 있을 것이다. 사용되는 브라우저가 얼마든지 변경될 수 있기 때문에 이 릴리스에서는 각 jQuery 버전에 특정 소멸 기능을 추가했다. 대신 브라우저 유형/버전을 검색하지 않은 채로 브라우저의 기능을 검색한다. 즉, 새 브라우저가 만들어져서 기존 브라우저가 사라지더라도 jQuery 버전을 업데이트할 필요가 없다. 이제는 해마다 jQuery 버전을 업그레이드하고 테스트를 수행하는 등의 번거로운 작업을 하지 않아도 된다.

이 기사에서는 좋은 jQuery 코드를 우수한 jQuery 코드로 전환하는 데 필요한 몇 가지 팁을 설명했다. jQuery는 사용하기가 쉽고 향상된 독립 실행형 JavaScript이기 때문에 좋은 jQuery 코드를 매우 쉽게 작성할 수 있다. 대부분의 개발자가 몇 분 이내에 코드를 작성해서 실행할 수 있다. 하지만 좋은 코드와 우수한 코드 사이에는 한 가지 구별되는 점이 있다. 우수한 jQuery 코드에서는 페이지 복잡도의 증가에 따라 성능을 고려한다. 우수한 jQuery 코드는 페이지의 현재 위치가 아닌 앞으로 이동할 위치를 미리 생각할 뿐만 아니라 그러한 기대가 코드에 반영되어 있다. 우수한 jQuery 코드는 가장 복잡한 애플리케이션을 감안하여 설계되기 때문에 간단한 애플리케이션의 경우에는 쉽게 처리할 수 있다.

이 기사에서는 좋은 jQuery 코드를 우수한 jQuery 코드로 전환하는 데 도움이 되는 5가지 개념을 소개했다. 첫 번째 개념은 bind()/unbind() 메소드를 사용하는 것이다. 이들 메소드는 페이지의 수명 기간 중 코드에 이벤트를 연결하지 않으려는 경우 페이지 요소에 이벤트를 연결/분리하는 데 매우 유용하게 사용할 수 있다. 이 방법은 전체 페이지에서 이벤트가 발생할 수 있는 경우와 같이 성능에 영향을 줄 수 있는 상황이나 특정 사용자 인터페이스 상황에서 중요하게 사용할 수 있다. 두 번째 개념은 1.3 릴리스의 새 기능인 live()/die() 기능을 사용하는 것이다. 이들 함수를 사용하면 이벤트를 페이지 요소처럼 동적으로 만들 수 있다. 즉, 페이지 요소가 웹 애플리케이션에 추가될 때 코드도 페이지와 함께 확장된다. 이전 릴리스에서는 이 기능이 지원되지 않았다. 이제는 이벤트를 페이지처럼 동적으로 처리할 수 있다. 세 번째 추가 기능은 Ajax Queue/Sync 플러그인이었다. 이 플러그인은 클라이언트 퍼스펙티브에서 제어할 수 없는 상황과 리턴 순서가 중요한 경우에 서버에 대한 Ajax 호출을 제어하는 데 사용된다. 네 번째 권장 사항은 페이지 설정 코드를 jQuery 코드에 되도록 많이 작성하라는 것이었다. 이렇게 하면 HTML을 단순하게 작성할 수 있으며 페이지를 설정할 때 훨씬 쉽게 작업할 수 있다. 마지막 단계는 코드에서 필자가 제공하거나 자신이 직접 작성한 네임스페이스 솔루션을 활용하여 위젯 간에 함수가 겹쳐지는 것을 방지하여 페이지 오류를 없애는 것이었다. 각 페이지 요소 및 위젯은 스스로를 포함할 수 있어야 하며 페이지의 다른 특성을 간섭하지 않아야 한다. 이 솔루션이 이러한 요구를 충족한다.

이러한 5가지 개념은 결코 어려운 개념이 아니다. 실제로 이중 4가지는 한 줄의 코드를 변경하는 것처럼 간단하다. 하지만 이러한 솔루션을 코드에서 사용하는 방법을 이해하는 것이 중요하다. 다른 모든 것과 마찬가지로 올바르게 사용하지 못하면 코드에 도움을 주기 보다는 피해를 입힐 수도 있다. 필자는 우선 jQuery 코딩을 시작할 때처럼 곧바로 이러한 5가지 개념을 직접 사용해보기를 권한다. 모든 개발자들이 말하는 것처럼 피쳐 크리프(feature creep)는 개발자 인생의 일부분이다. 초기 단계에서 내린 잘못된 결정으로 인해 전체 웹 애플리케이션을 다시 설계하고 싶지 않다면 또는 관리자의 요구 때문에 특정 기능을 어쩔 수 없이 변경해야 한다면 우수한 애플리케이션 개발을 염두에 두고 있다면 코드 작업 시 이 기사에서 제안한 내용을 실제로 구현해 보자.

마지막으로 이 기사는 필자가 집필한 jQuery 시리즈 중 두 번째 시리즈의 마지막 기사이다. 이제 여러분은 이러한 5편의 기사를 통해 jQuery 실력이 한 단계 업그레이드되었기에 이 라이브러리를 사용하여 다양한 유형의 애플리케이션을 작성할 수 있을 것이다. 필자가 마지막으로 권하는 바는 즐거운 마음으로 코드를 작성하면서 많은 작업을 실제로 구현해 보라는 것이다. 이렇게 하면 단순히 많은 배우는 차원에 머물지 않고 정말 멋진 작품을 만들어서 웹에 올릴 수도 있을 것이다.

설명	이름	크기	다운로드 방식
Zip file with Example	examples.zip	97KB	HTTP

교육

전체 jQuery API Page에서 라이브러리의 모든 함수를 볼 수 있다.
Release Notes for 1.3에서 최신 릴리스의 변경 및 개선 사항을 모두 볼 수 있다.
W3Schools에서 CSS, JavaScript 및 기타 웹 언어에 대한 자세한 정보를 볼 수 있다.
다음은 jQuery 라이브러리에 대해 소개하고 있는 필자의 jQuery 시리즈 중 처음 세 편의 기사이다.
- "jQuery로 작업하기, Part 1: 브라우저로 데스크톱 응용 옮기기"(developerWorks, 2008년 9월)
- "jQuery로 작업하기, Part 2: 내일 나올 웹 응용을 오늘 구현해보자"(developerWorks, 2008년 9월)
- "jQuery로 작업하기, 3부: jQuery와 Ajax로 RIA 만들기: JQuery: 내일 나올 웹 응용을 오늘 구현해보자"(developerWorks, 2008년 10월)

제품 및 기술 얻기

이 기사를 집필하던 시점에 가장 안정적인 버전이었던 1.3.2 Minimized jQuery를 다운로드하여 사용자의 코드에 추가할 수 있다.

10년에 걸친 기술 경험을 통해 Michael Abernethy는 광범위한 기술을 토대로 광범위한 클라이언트와 작업해 왔다. 현재 경매 소프트웨어 회사인 Optimal Auctions에서 제품 개발 관리자로 일하고 있다. Abernethy는 요즘 RIA(Rich Internet Applications)에 초점을 맞춰 복잡함과 단순함을 동시에 추구하고 있다. 컴퓨터 앞에 앉아 있지 않을 때는 양서를 끼고 멕시코 해변가에서 여유를 즐긴다.

[스크랩] 고급 jQuery(1)

2012-02-06T00:12:38+09:00

고급 jQuery(1)

출처 : http://www.ibm.com/developerworks/kr/library/wa-aj-advjquery2/index.html

좋은 애플리케이션을 우수한 애플리케이션으로 만들기

Michael Abernethy, Product Development Manager, Optimal Auctions

원문 게재일: 2009 년 7 월 14 일
번역 게재일: 2009 년 8 월 18 일
난이도: 중급
영어로: 보기
PDF: A4 and Letter (392KB | 20 pages)Get Adobe® Reader®
페이지뷰： 3584 회
의견： 0 (보기 | 의견 추가 - 로그인)

평균 평가 등급 (1 투표수)
아티클 순위

소개

이 jQuery 시리즈에서는 JavaScript 기반 웹 애플리케이션을 개발하는 과정에 대해 설명하고 있다. 이러한 기사를 읽기 전까지 jQuery에 대해 들어본 적이 없었다고 하더라도 이제는 jQuery를 사용하여 좋은 웹 애플리케이션을 개발하는 데 필요한 모든 스킬과 지식을 모두 갖추고 있어야 한다. 하지만 좋은 애플리케이션으로는 부족하여 우수한 웹 애플리케이션이 필요한 경우도 있다. 이 요구를 충족하기 위해서는 몇 가지 추가 단계가 필요하다. 이러한 단계는 개발자의 애플리케이션에 추가되어 크고 작은 애플리케이션에서 원활하게 실행되면서 모든 사용자에게 적합한 기능을 제공하기 위한 것이다. 이러한 단계는 웹 애플리케이션이 반짝반짝 빛나도록 광택을 내는 최종 단계의 작업이다.

이 기사에서는 코드의 성능을 향상시키는 방법에 대해 살펴본 후 jQuery 라이브러리에서 자주 다루어지지 않고 있는 주제에 대해서도 설명한다. 이러한 항목은 복잡한 애플리케이션에서 중요한 역할을 수행하게 되는 플러그인으로 모든 애플리케이션에 필요한 항목이며 웹 애플리케이션 코드를 쉽게 작성하는 데 도움이 되는 좋은 설계 팁이기도 한다. 그리고 마지막 섹션에서는 최근에 릴리스되어 라이브러리에 몇 가지 새 기능이 추가된 jQuery 1.3의 새 기능에 대해 설명한다.

첫 번째 샘플 애플리케이션

이 기사에서 제공하는 대부분의 팁은 이 기사에 첨부된 샘플 애플리케이션(간단한 이메일 웹 애플리케이션)에서도 볼 수 있다(다운로드 참조). 이 애플리케이션은 시리즈의 첫 번째 기사에서 제공한 애플리케이션과 같기 때문에 익숙할 것이다. 하지만 첫 번째 기사의 애플리케이션과 비교하여 얼마나 달라졌는지, 성능은 얼마나 향상되었는지 그리고 진정으로 우수한 웹 애플리케이션이 되기 위해 어떠한 광택 작업이 수행되었는지 등을 알아야 한다.

그림 1. 예제 애플리케이션

Bind/Unbind

Events 모듈에는 bind()와 unbind()라는 두 함수가 있다. 하지만 이들 함수를 사용하면 다른 모든 이벤트 메소드에 대한 작업이 중복되는 결과가 나타난다. 결국, click() 메소드를 페이지 요소에 간단히 연결할 수 있다면 bind("click")를 호출하는 것은 키 입력만 낭비하는 것에 불과할 것이다. 물론 이들 함수는 특정 상황에서 유용하게 사용할 수 있으며 올바르게 사용하면 애플리케이션의 성능을 획기적으로 향상시킬 수도 있다. 이들 함수는 모듈에 있는 수많은 이벤트 메소드와 마찬가지로 이벤트를 특정 페이지 요소에 연결하는 기능을 제공한다. 하지만 이들 함수는 페이지 요소에서 이벤트를 제거하는 기능도 제공한다. 이렇게 하려는 이유가 무엇일까? 이제 웹 애플리케이션을 보면서 이 상황에서 이들 함수를 사용하는 방법을 살펴보자.

그림 2. Bind/Unbind 예제

Listing 1에서는 성능 개선을 위해 수정하기 전인 최초 코드를 보여 주며 앞으로 이 코드를 수정해 나갈 것이다.

Listing 1. 최적화 이전의 위젯

		   
$(document).ready(function(){
   // cache this query since it's a search by CLASS
   selectable = $(":checked.selectable");
   // when the select/deselect all is clicked, do this function
   $("#selectall").click(selectAll);
   // whenever any individual checkbox is checked, change the text
   // describing how many are checked
   selectable.click(changeNumFilters);
   // calculate how many are initially checked
   changeNumFilters();
});

var selectable;

function changeNumFilters()
{
   // this needs to be checked on every call
   // since the length can change with every click
   var size = $(":checked.selectable").length;
   if (size > 0)
      $("#selectedCount").html(size);
   else
      $("#selectedCount").html("0");
 }
 
// handles the select/deselect of all checkboxes
function selectAll()
{
   var checked = $("#selectall").attr("checked");
   selectable.each(function(){
      var subChecked = $(this).attr("checked");
      if (subChecked != checked)
      {
         $(this).click();
      }
   });
   changeNumFilters();
   }

이 코드는 몇몇 기사에서 필자가 작업했던 위젯과 거의 비슷하기 때문에 비교적 간단한 편이다. 필자는 첫 번째 기사에서 기본적인 형태의 "select/deselect all" 위젯을 보여 주었다. 성능 기사에서는 선택 쿼리를 캐시하고 CLASS를 이용한 검색을 최소화하여 성능을 향상시키는 방법을 살펴보았다. 그래도 아직까지 문제가 남아 있다. 100개의 행으로 구성된 테이블에서 "select/deselect all" 선택란을 눌러보면 성능이 매우 나쁘다는 것을 알 수 있다. 실제로 필자의 브라우저에서 이 코드를 실험해 본 결과 모든 항목을 선택하는 데 평균 3.4초의 시간이 걸렸다. 이는 응답성이 좋다고 보기에는 어려운 결과이다. 또한 이 문제에 대한 모든 최적화 작업을 수행하고난 후에도 성능이 좋다고 보긴 어려울 것이다.

알고리즘을 좀 더 자세히 살펴보면서 잘못된 부분이 있는지 찾아보자. 이 코드에서는 페이지의 모든 선택란을 반복하면서 선택란의 현재 "checked" 상태가 "select/deselect all" 선택란과 같은지 여부를 확인하고 있다. 같지 않으면 해당 선택란에 대한 "click"을 호출하여 "select/deselect all" 선택란의 상태와 일치시킨다. 여기서 잠깐 생각해 보자. 이들 선택란에도 함수가 연결되어 있기 때문에 각 click에서 changeNumFilters() 함수가 호출된다. 이 알고리즘을 좀 더 자세히 살펴보면 changeNumFilters()가 101번까지도 호출될 수 있다. 이제 성능이 좋지 못했던 원인을 어느 정도 이해할 수 있을 것이다. 실제로, 클릭할 때마다 선택된 메시지의 수를 업데이트할 필요 없이 프로세스의 끝에서 한 번만 실행해도 충분하다. 그렇다면 선택란을 클릭할 때 이 메소드가 호출되지 않게 하려면 어떻게 해야 할까?

물론 여기에서 unbind() 메소드를 사용할 수 있다. 아마도 이미 알고 있었을 것이다. 선택란을 클릭하기 전에 unbind()를 호출하면 click() 호출에서 changeNumFilter() 메소드가 호출되지 않는다. 정말 좋은 방법이다. 이것이 바로 여러분의 목표였다. 이젠 더 이상 101번씩 호출되지는 않을 것이다. 하지만 이제부터는 한 번만 실행되기 때문에 선택란에 대한 click 호출을 완료한 후에 bind 메소드를 사용하여 각 선택란에 click 메소드를 다시 연결해야 한다. Listing 2에서 업데이트된 버전을 보여 준다.

Listing 2. 최적화 이후의 위젯

		   
// handles the selection/unselection of all checkboxes
function selectAll()
{
   var checked = $("#selectall").attr("checked");
   selectable.unbind("click", changeNumFilters);
   selectable.each(function(){
      var subChecked = $(this).attr("checked");
      if (subChecked != checked)
      {
          $(this).click();
      }
   });
   selectable.bind("click", changeNumFilters);
   changeNumFilters();
   }

이러한 최적화가 적용되면 선택란 실행 시간이 약 900ms로 단축되면서 상당한 성능 향상을 얻을 수 있다. 지금까지 수행한 작업은 알고리즘의 작동 방법을 정확히 살펴본 후 코드에서 문제가 있는 부분을 찾아내서 해결한 것이 전부였다. 함수를 100번 호출하는 대신 한 번만 호출해도 원하는 결과를 얻을 수 있었다. 정말 멋진 일이다. 이 함수의 동작을 자세히 분석하고 고민한 결과 더 빠르고 효과적인 함수를 만들어낼 수 있었다. 하지만 지금까지 살펴보았던 이 알고리즘을 지금보다도 훨씬 더 빠르게 실행할 수 있는 방법이 있다는 사실이 밝혀졌다. 이 빠른 알고리즘을 바로 알려줬다면 이 함수를 기사의 재료로 사용할 수 없었을 것이다. 다행히 이러한 상황을 예제로 사용할 수 있었기 때문에 코드에서 bind/unbind 기능을 사용했을 때의 효과를 한 눈에 볼 수 있었던 것이다.

중요: 기본 이벤트를 실행하지 않고 싶거나 페이지 요소에 이벤트를 임시로 연결 또는 제거하려는 상황에서 bind/unbind를 사용한다.

Listing 3에서는 사용자의 코드에 이 위젯이 있을 경우 이 알고리즘을 매우 빠르게 작성할 수 있는 방법을 보여 준다. 여기서는 지금까지 시도했던 다른 방법보다 월등하게 빠른 속도인 40ms 이내로 실행된다.

Listing 3. 초고속 알고리즘이 적용된 위젯

		   
function selectAll()
{
   var checked = $("#selectall").attr("checked");
   selectable.each(function(){
      $(this).attr("checked", checked);
   });
   changeNumFilters();
   }

Live/Die

1.3 버전의 jQuery에 추가된 새 기능 중 live() 및 die() 함수는 아주 좋은 기능으로 평가되고 있다. 잘 설계된 웹 애플리케이션에서 이들 함수가 수행하는 역할을 이해하기 위해서는 예제를 실행해보는 것이 가장 효과적인 방법일 것이다. 테이블의 모든 셀에 두 번 클릭을 연결하는 경우를 가정해 보자. 숙련된 jQuery 개발자라면 document.ready() 함수에 Listing 4와 같은 방법으로 이 설정을 작성해야 한다는 것을 알고 있을 것이다.

Listing 4. 두 번 클릭 설정하기

		   
$("tr.messageRow").dblclick(function() {
   if ($(this).hasClass("mail_unread"))
   {
      $(this).removeClass("mail_unread");
   }
   });

이 설계에는 한 가지 문제점이 있다. 그 문제점은 바로 messageRow 클래스를 사용하여 테이블의 모든 행에 두 번 클릭 이벤트를 연결하고 있다는 것이다. 하지만 새 행을 테이블에 추가하게 되면 어떻게 될까? 예를 들어, 페이지가 다시 로드되지 않은 상태에서 추가 메시지가 Ajax를 통해 페이지에 로드된 경우 그러한 행을 볼 수 있다. 이 경우 코드가 작성된 대로 작동하지 않기 때문에 문제가 발생한다. 작성해 놓은 이벤트는 페이지가 로드될 때 표시되는 모든 기존 tr.messageRow 요소에 바인딩되어 있지만 페이지의 수명 시간 동안 작성한 새 tr.messageRow에는 바인딩되어 있지 않다. 이와 같은 코드를 작성한 개발자는 코드가 작동하지 않기 때문에 실망이 클 것이다. 초보 jQuery 프로그래머라면 코드가 작동하지 않은 이유를 찾기 위해 여러 시간 동안 골치 아픈 디버깅 작업에 매달린 후에야 jQuery 설명서에서 이 사실을 우연히 발견하게 될지도 모른다. (이 모습이 바로 필자의 작년 모습이다.)

jQuery 1.3 전까지는 이 문제점을 세 가지 방법으로 해결했었지만 세 방법 모두 좋은 방법이라고 하기에는 무리가 있었다. (하지만 계속해서 jQuery 1.2.x를 사용하는 개발자에게는 여전히 유효한 방법이다.) 첫 번째 방법은 새 메시지가 추가될 때마다 선택된 요소에 이벤트를 다시 연결하는 재초기화 기법이었다. 두 번째 방법은 이전 섹션에서 살펴본 bind/unbind 메소드를 활용하는 방법이었다. Listing 5에서 이 두 방법을 보여 준다.

Listing 5. 새 요소에 이벤트를 연결하는 방법

		   
// first technique to deal with "hot" page elements, added during the page's
// lifetime
$("#mailtable tr #"+message.id).addClass("messageRow")
   .dblclick(function() {
   if ($(this).hasClass("mail_unread"))
   {
      $(this).removeClass("mail_unread");
   }

// second technique to deal with "hot" page elements
$("#mailtable tr #"+message.id).addClass("messageRow")
   .bind("dblclick", (function() {
   if ($(this).hasClass("mail_unread"))
   {
      $(this).removeClass("mail_unread");
      }

두 방법 모두 비효율적이라고 말할 수 있을 것이다. 코드를 반복해야 하고 새 페이지 요소가 추가될 가능성이 있는 페이지의 모든 지점을 찾은 후 해당 지점에서 "뜨거운 요소(hot element)" 문제를 처리해야 한다. 이는 좋은 프로그래밍 방법이 아니다. 게다가 지금 사용하고 있는 언어는 jQuery이다. 이 언어는 모든 작업을 쉽게 처리할 수 있을 뿐 아니라 필요한 모든 기능을 제공할 수 있어야 한다.

다행스럽게도 이러한 문제점을 해결할 수 있는 것처럼 보이는 플러그인이 있었다. 이 플러그인의 이름은 LiveQuery 플러그인이며 특정 페이지 요소를 이벤트에 바인딩하는 기능을 제공한다. 하지만 이 기능은 "live" 패션에서만 사용할 수 있다. 따라서 페이지 작성 시에 있던 요소와 페이지의 수명 시간 동안에 작성된 요소를 포함한 모든 페이지 요소가 이벤트를 발생시킬 수 있다. 이 플러그인을 사용하면 정적 페이지 작업을 수행할 때와 마찬가지로 동적 페이지 작업을 쉽게 수행할 수 있으므로 이 플러그인은 UI 개발자에게 매우 유용하고 중요한 플러그인이었다. 웹 개발자에게 이 플러그인은 실제로 "반드시 가지고 있어야 하는" 플러그인 중 하나였다.

jQuery 코어 팀에서는 이 플러그인을 1.3 릴리스에 통합하면서 그 중요성을 확실하게 인정했다. 이 "live" 기능은 이제 jQuery 코어에 포함되어 있으므로 모든 개발자가 활용할 수 있다. 이 플러그인은 1.3의 최초 릴리스에 채택되지 않은 몇 가지 이벤트를 제외하면 1.3 코어 코드에서 거의 정확히 중복된다. 필자의 견해로는 누락된 이벤트가 jQuery의 후속 릴리스에서 등장할 것이라고 확신한다. 이 플러그인을 사용하여 코드를 변경하는 방법을 살펴보자.

Listing 6. "live" 이벤트 모델

		   
$("tr.messageRow").live("dblclick", function() {
   if ($(this).hasClass("mail_unread"))
   {
      $(this).removeClass("mail_unread");
      }

이 작은 변경 사항을 코드에 적용하게 되면 페이지에 있는 모든 tr.messageRow 요소를 두 번 클릭할 때 이 코드가 트리거된다. 앞에서 설명했던 것처럼 이 동작은 dblclick() 함수를 사용했을 때는 볼 수 없었던 동작이다. 따라서 대부분의 이벤트 메소드에 live() 메소드를 사용하는 것이 매우 효과적이라는 것을 알 수 있다. 실제로 필자는 Ajax 또는 사용자 상호 작용을 통해 페이지 요소를 동적으로 작성하는 모든 페이지에서는 대체 이벤트 메소드 대신 live() 함수를 사용해야 한다고 생각한다. 이는 발생할 수 있는 버그를 버리고 코드를 쉽게 작성할 수 있는 효과적인 방법이기에 주저할 필요 없이 선택해야 한다.

중요: 이벤트를 동적 페이지 요소에 연결할 대는 항상 live() 메소드를 사용한다. 이 메소드를 사용하면 이벤트도 페이지 요소처럼 동적으로 생성할 수 있다.

Ajax Queue/Sync

서버에 대한 Ajax 호출의 사용 여부는 Web 2.0 회사의 자체 평가 척도가 되었다. 이 기사에서 자주 언급했던 것처럼 jQuery에서 Ajax를 사용하는 방법은 일반적인 메소드 호출을 호출하는 것과 마찬가지로 쉽다. 즉, 클라이언트측 JavaScript 함수를 호출하듯이 서버측 Ajax 함수를 호출할 수 있다. Ajax의 장점이 많기는 하지만 서버에 대한 Ajax 호출이 너무 많을 경우 약간의 부작용이 발생할 수 있다. 웹 애플리케이션에 Ajax 호출이 너무 많으면 문제가 발생할 가능성이 매우 높아진다.

첫 번째 문제점은 일부 브라우저에서는 열린 서버 연결의 수가 제한된다는 것이다. Internet Explorer의 현재 버전에서는 서버에 대한 열린 동시 연결 수가 2개만 허용된다. Firefox에서는 8개의 연결이 허용되지만 여전히 열린 연결 수에 대한 제한이 있다. 웹 애플리케이션에서 Ajax 호출에 대한 제어를 놓칠 경우, 특히 서버측 호출이 시간을 많이 사용하는 호출일 경우 열린 연결의 수가 2개를 초과하게 된다. 이 문제점은 웹 애플리케이션 설계자가 설계를 잘못했거나 사용자가 요청에 대한 제어를 놓쳤을 경우에 발생할 수 있다. 두 경우 모두 좋은 상태가 아니라는 점은 확실하며 브라우저에서 허용할 연결과 허용하지 않을 연결을 결정해야 하는 상황도 바람직한 상황이 아니다.

게다가 비동기(Ajax의 "A") 호출이기 때문에 사용자가 보낸 요청의 순서와 같은 순서로 서버에서 리턴한다는 보장이 없다. 좀 더 자세히 생각해 보자. 이는 거의 동시에 2개의 Ajax 호출을 실행할 경우 서버의 응답이 호출 순서대로 돌아온다고 확신할 수 없다는 말이다. 따라서 두 번째 호출이 첫 번째 호출에 종속되어 있어서 첫 번째 호출이 먼저 종료되어야 한다면 오류가 발생할 수 있다. 첫 번째 호출이 데이터를 검색하고 두 번째 호출이 클라이언트측에서 이 데이터를 처리하는 시나리오를 가정해 보자. 두 번째 호출이 첫 번째 Ajax 호출보다 빨리 리턴된다면 오류가 발생할 수 있다. 이는 응답 속도를 보장할 수 없기 때문이다. 이 문제가 4번 정도 더 발생하면 문제가 훨씬 더 빨리 시작된다는 것을 알 수 있다.

jQuery 제작자는 이 문제점의 가능성을 인식하고 있었으며 당시 약 1%의 웹 애플리케이션에만 발생할 것이라고 예상했다. 하지만 1%에 해당하는 개발자를 위한 해결 방법이 필요했기에 그는 Ajax Queue와 Ajax Sync를 작성하여 이 문제점을 해결하는 데 사용할 수 있는 플러그인을 작성했다. Ajax Queue와 Ajax Sync는 작동 방법이 매우 비슷하다. Queue는 Ajax 호출을 한 번에 하나씩 저장하고 선행 호출이 리턴될 때까지 기다린 후 후속 호출이 시작된다. Sync는 호출을 즉시 보내지만 선행 호출이 이미 리턴된 경우에만 호출 함수에 리턴한다.

이렇게 하면 클라이언트측에서 Ajax 호출을 제어하고 응답이 클라이언트측 코드에 되돌려 보내지는 방법을 제어 및 조절하여 오버로드 문제점을 해결할 수 있다. 이제 클라이언트에서 응답이 수신되는 순서를 알 수 있으므로 이벤트의 순서를 예측할 수 있는 코드를 작성할 수 있다. 이제 Listing 7의 예제를 통해 이 플러그인의 작동 방법과 코드에서 이 플러그인을 사용하는 방법을 살펴보자. 그리고 이 플러그인이 여러 Ajax 호출이 선행 Ajax 호출에 종속되는 중요 정보를 가지고 있는 1%만을 위한 것임을 염두에 두자. 이 예제는 그러한 상황을 보여 주는 예제는 아니지만 플러그인을 사용할 수 있는 방법을 보여 준다. (이 플러그인이 필요한 실제 상황을 반영하면서도 이해하기 쉬운 좋은 예제를 작성하기는 어려울 것이다.)

Listing 7. Ajax Queue

		   
var newRow = "<tr id='?'>" +
             "<td><input type=checkbox value='?'></td>" +
             "<td>?</td>" +
             "<td>?</td>" +
             "<td>?</td>" +
             "<td>?</td></tr>";
   
   
$("#mailtable").everyTime(30000, "checkForMail", function(){

   // by using the Ajax Queue here, we can be sure that we will check for mail
   // every 30 seconds, but ONLY if the previous mail check has already returned.
   // This actually would be beneficial in a mail application, if one check for
   // new mail takes longer than 30 seconds to respond, we wouldn't want the
   // next Ajax call to kick off, because it might duplicate messages (depending
   // on the server side code).
   // So, by using the Ajax Queue plug-in, we can ensure that our Web client
   // is only checking for new mail once, and will never overlap itself.

    $.ajaxQueue({
         url: "check_for_mail.jsp",
         success: function(data)
         {
           var message = eval('(' + data + ')');
           if (message.id != 0)
           {
             var row = newRow.replace("?", message.id);
             row = row.replace("?", message.id);
             row = row.replace("?", message.to);
             row = row.replace("?", message.from);
             row = row.replace("?", message.subject);
             row = row.replace("?", message.sentTime);
             $("#mailtable tbody").prepend(row);
             $("#mailtable #"+message.id).addClass("mail_unread").addClass("messageRow");
             $("#mailtable #"+message.id+ " td").addClass("mail");
             $("#mailtable :checkbox").addClass("selectable");
            }
          }
          });

중요: 애플리케이션에 서로 기능이 겹칠 수 있는 여러 Ajax 호출이 있을 경우 Ajax Queue 또는 Ajax Sync를 사용한다.

8월 25일 고급 jQuery(2)가 업데이트 됩니다.

설명	이름	크기	다운로드 방식
Zip file with Example	examples.zip	97KB	HTTP

교육

전체 jQuery API Page에서 라이브러리의 모든 함수를 볼 수 있다.
Release Notes for 1.3에서 최신 릴리스의 변경 및 개선 사항을 모두 볼 수 있다.
W3Schools에서 CSS, JavaScript 및 기타 웹 언어에 대한 자세한 정보를 볼 수 있다.
다음은 jQuery 라이브러리에 대해 소개하고 있는 필자의 jQuery 시리즈 중 처음 세 편의 기사이다.
- "jQuery로 작업하기, Part 1: 브라우저로 데스크톱 응용 옮기기"(developerWorks, 2008년 9월)
- "jQuery로 작업하기, Part 2: 내일 나올 웹 응용을 오늘 구현해보자"(developerWorks, 2008년 9월)
- "jQuery로 작업하기, 3부: jQuery와 Ajax로 RIA 만들기: JQuery: 내일 나올 웹 응용을 오늘 구현해보자"(developerWorks, 2008년 10월)

제품 및 기술 얻기

이 기사를 집필하던 시점에 가장 안정적인 버전이었던 1.3.2 Minimized jQuery를 다운로드하여 사용자의 코드에 추가할 수 있다.

[스크랩] jQuery UI와 jQuery 플러그인을 사용하여 우수한 웹 애플리케이션 빌드하기

2012-02-06T00:03:51+09:00

jQuery UI와 jQuery 플러그인을 사용하여 우수한 웹 애플리케이션 빌드하기

출처 : http://www.ibm.com/developerworks/kr/library/wa-jquerywebapps/index.html

웹 페이지와 애플리케이션의 룩앤필 개선하기

Christopher Michaelis, 개발자, 독립 컨설턴트

요약： 과거에는 애플리케이션의 기본적인 룩앤필을 운영 체제에서 처리했기 때문에 Javascript와 jQuery 라이브러리를 사용하여 데스크탑 애플리케이션 개발에서 웹 애플리케이션 개발로 전환하고 있는 개발자들은 이러한 룩앤필을 고려하는 데 익숙하지 않습니다. jQuery로 빌드된 UI 툴킷인 jQuery UI를 알게 되면 모양이 멋진 인터페이스를 더 쉽게 작성할 수 있습니다. 이 기사에서는 웹 개발 속도를 높일 수 있고, 익숙한 모양의 부드럽고 유연하고 직관적인 인터페이스를 작성하는 데 도움이 되는 여러 가지 플러그인을 살펴봅니다.

원문 게재일： 2011 년 7 월 19 일
난이도： 중급
원문： 보기
PDF： A4 and Letter (221KB | 17 pages)Get Adobe® Reader®
의견： 0 (의견 추가)

소개

웹 애플리케이션 개발로 전환하고 있는 전통적인 데스크탑 애플리케이션 개발자라면 아마도 HTML과 CSS를 선택하는 데는 아무런 문제가 없을 것이다. 그러나 애플리케이션을 시각적으로 멋지게 디자인하는 데는 어려움이 있을 것이다. jQuery UI와 다양한 jQuery 플러그인을 이용하면 GUI 디자인에 걸리는 시간을 최소화하면서 웹 애플리케이션을 신속하게 조합할 수 있다.

Javascript 및 jQuery

페이지에 동적 컨텐츠나 상호작용성이 어느 정도 있기를 원하는 경우에는 웹 페이지를 빌드하는 과정에서 언제나 Javascript를 사용했다. Javascript를 사용하지 않는 경우에는 런타임 시에 페이지를 업데이트하려면 페이지를 새로 고쳐야 해서 인터페이스를 처리하기가 어렵다. 최근 몇 년 동안 많은 개발 작업이 Javascript으로 수행되면서 Javascript가 매우 중요해졌으며, 웹 애플리케이션이 더욱 강력해졌다. 심지어 Javascript를 서버측 Javascript 엔진인 Node.js와 같은 기술을 통해 서버측에서 활용하려고도 한다. Node.js와 Javascript를 다시 학습하려면 이에 대한 자세한 정보를 확인할 수 있는 링크를 참고자료에서 확인하도록 한다.

jQuery는 클라이언트 측 Javascript 코드에서 주로 사용되는 라이브러리이다. jQuery를 이용하면 UI 코드를 작성하는 데 걸리는 시간을 대폭 줄일 수 있으며 일상적으로 수행되는 다양한 작업을 간단하게 처리할 수 있다. jQuery에는 동적 인터페이스를 작성하는 데 유용하고 이미 브라우저 간에 호환이 가능한 유연한 Ajax 라이브러리가 포함되어 있다. 이 라이브러리의 개발 및 프로덕션 사본을 가리키는 다운로드 링크를 포함한 자세한 정보를 확인할 수 있는 링크는 참고자료를 확인한다. 프로덕션 코드는 "축약"되었기 때문에 이 코드에는 불필요한 모든 공백과 주석이 없다. 개발 사본이 읽기가 더 수월하므로 이 라이브러리의 내부를 확인하려면 개발 사본을 이용하는 것이 좋다. 써드파티 라이브러리를 사용하기 전에는 이 라이브러리의 품질과 기능을 파악하고 있는지 그리고 이러한 품질과 기능이 합당한지를 확인하는 것이 좋다.

jQuery UI

jQuery UI는 이전에 사용되었던 구식 팝업 창이 아니라 Javascript와 CSS를 통해 사용자에게 정보를 표시하는 사용자 정의 창 설정과 같은 공통 작업을 수행하도록 사전 패키지된 CSS 스타일 및 UI 위젯 세트이다. jQuery UI 웹 사이트(링크는 참고자료 참조)를 방문하면 직접 다운로드할 수 있는 옵션이 없다는 것을 알 수 있다. 그 대신 이 사이트에는 Build custom download 링크가 있다. 자신만의 패키지를 어셈블하려면 이 링크를 클릭한다. 이 과정에서 사용자는 사용하지 않을 컴포넌트(예: Accordion 또는 Datepicker 위젯)를 제거하여 라이브러리의 크기를 줄일 수 있다.

jQuery UI 패키지를 다운로드하면, 파일이 상당히 많다는 것을 알 수 있다. 개발 번들 디렉토리에는 demonstrations과 documentation가 들어 있는 데, 이것들은 유용하지만 프로덕션 환경에는 배치할 필요가 없다. 그러나 css와 js 디렉토리에 있는 파일은 웹 애플리케이션에 배치되어야 한다. js 디렉토리에는 jQuery와 jQuery UI 라이브러리가 모두 들어 있으며 css 디렉토리에는 위젯과 스타일을 생성하는 데 사용되는 모든 이미지와 CSS 파일이 들어 있다.

컨텐츠 테마/스킨

기본 페이지에서 어셈블한 jQuery UI 다운로드에는 사용할 테마를 선택할 수 있는 기능이 있다. jQuery UI 페이지에는 사이트 오른쪽에 사용 가능한 다양한 테마를 볼 수 있는 도구가 있어서 테마를 효과적으로 찾을 수 있다. 그렇지 않고 웹 사이트에서 선호하는 색상을 지정하여 자신만의 테마를 빌드할 수도 있다. 이렇게 하면 기본적으로, 사용자에게 필요한 CSS 설정이 자동으로 어셈블되어 시간이 일부 절약된다. 예를 들면, 그림 1에는 Humanity 테마(맨 위)와 Start 테마(맨 아래)를 비교한 화면이 표시되어 있다. 각 테마에는 서로 일치하는 완전한 아이콘 세트가 포함되어 있다.

그림 1. Humanity 테마와 Start 테마 비교

테마는 CSS 값을 조정하는 데 많은 시간을 필요로 하지 않는 완전한 UI 컴포넌트 세트나 이미지 편집기에서 작동하여 정적 이미지 요소를 생성하는 UI 컴포넌트 세트를 얻을 수 있는 간단한 방법을 제공한다. 이 기사의 예제에서는 Humanity 테마를 사용한다. 그러나 스킨을 사용한다고 해서 자체 CSS를 jQuery UI CSS와 함께 사용할 수 없거나 자체 CSS로 jQuery UI CSS를 대체할 수 없는 것은 아니다. 리스트 1 에는 jQuery와 jQuery UI에서 가져온 기본적인 HTML 템플리트가 있다. 이 템플리트에는 단추의 텍스트 주변에 표시되는 많은 패딩을 대체하는 사용자 정의 CSS 파일(app.css)이 들어 있다. 또한, 특정 애플리케이션에 적합한 Javascript 코드가 저장된 app.js 파일이 있다.

리스트 1. jQuery UI를 로드하는 기본적인 HTML 템플리트

	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.10.custom.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<body>
</body>
</html>

app.css:
body {
        font-size: smaller;
}

/* Override jQuery UI theme's padding on buttons: */
.ui-button-text-only .ui-button-text {
        padding: 0.2em 0.5em;
}

인터페이스 개선: 대화 상자 위젯

많은 웹 개발자들은 방문자에게 메시지를 보내거나 방문자로부터 메시지를 받기 위해 alert 또는 confirm 함수를 즐겨 사용한다. 이러한 메시지에는 사실상 쓸모가 없는 "The page at www.yoursite.com says...,"와 같은 캡션이 일반적으로 들어 있기 때문에 이러한 메시지는 매우 볼품이 없다. 일반적으로 사용하는 또 다른 방법은 팝업 창을 여는 것이다. 이 방법은 팝업 블로커로 인한 문제점 때문에 많이 사용되지는 않지만 어느 정도는 사용된다.

jQuery UI Dialog 기능을 사용하면 display: none을 사용하여 숨긴 사전 정의된 <div> 태그나 임의의 컨텐츠를 방문자와 상호 작용을 해야 할 때 확인할 수 있다. 그림 2 에서 이 기능으로 인해 전체 룩앤필에 어떠한 차이가 생기는지 확인할 수 있다.

그림 2. Query UI Dialog 위젯과 일반 경고 창 비교

표시될 컨텐츠가 있는 문서 내에 별도의 <div> 태그가 있을 때, jQuery UI Dialog 위젯을 사용하기가 가장 쉽다. 일반적으로는, 대화 상자용으로 재사용되는 비어 있는 <div> 태그가 하나 있는 것이 좋다. 먼저 리스트 2에 표시된 바와 같이 컨텐츠를 설정한 다음, 대화 상자를 확인한다.

리스트 2. jQuery UI Dialog 위젯 표시

	
<div style="display: none;" id="dialogHolder"><p id="dialogContent"></p></div>

in JavaScript code:
$('#dialogContent').html('Isn\'t this <b>cooler</b>?<br /><br />By setting 
   modal to true, you can require the user to dismiss this before interacting 
  with more of the page.');
$('#dialogHolder').dialog({
  autoOpen: true,
  title: 'Hello!',
  modal: true,
  buttons: {
    "Go Away": function() {
      $(this).dialog("close");
    }
  }
})

인터페이스 개선: Accordion 및 탭

jQuery UI에는 Accordion이라고 하는 위젯이 도입되었으며, 이 위젯을 이용하면 기본적으로 섹션 하나만 표시되는 다수의 컨텐츠 섹션을 구성할 수 있다. 섹션을 클릭할 때마다 표시된 섹션은 애니메이션이 작동하면서 숨겨지고 새로운 섹션이 표시된다. Accordion의 한 가지 장점은 추가 섹션을 수직으로 배열하여 사실상 무제한으로 섹션을 구성할 수 있게 하는 기능에 있다. 이러한 기능은 유연하고 단순한 인터페이스를 제공한다.

많은 웹 사이트 방문자들은 전통적인 탭 스타일 레이아웃에 더 익숙하다. 여기서는 현재 선택된 탭은 표시하고 다른 탭은 숨겨서 탭의 수를 효과적으로 제한한다(수평 너비가 제한되어 있기 때문). 그림 3 에는 Accordion 위젯(맨 위)과 Tab 위젯(맨 아래)이 표시되어 있다.

그림 3. jQuery Accordion 및 Tab 위젯

Accordion은 섹션의 순서에 따라 컨테이너 <div>를 사용하여 작성된다. 각 섹션은 <h3> 및 <a> 태그로 시작하며 그 다음에는 각 accordian 섹션의 컨텐츠를 유지하는 하위 컨테이너 <div>가 위치한다. 마찬가지로 탭 제어의 경우에도 컨테이너 <div>를 사용한 다음, <ul> 태그를 사용하여 탭을 정의한다. <li>마다 앵커(<a>)를 사용하여 탭을 해당 컨텐츠의 <div>에 연결한다. 다음에는 정렬되지 않은 목록(<ul>)에서 정의한 것과 일치하는 ID와 <div> 요소를 반복해서 사용하여 실제 컨텐츠를 정의한다. 이러한 과정은 리스트 3에서 쉽게 확인할 수 있다. 컨텐츠가 정의되면 해당 <div> 요소의 jQuery 선택기에서 .accordion(); 또는 .tab();을 호출하여 Accordion이나 Tab 기능을 초기화한다.

리스트 3. Accordion 및 Tab 위젯 설정

	
<div id="accordionDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
  <h3><a href="#">Top Section</a></h3>
  <div>
    <p>Initial content for the first "tab" of the accordion goes here.</p>
  </div>
  <h3><a href="#">Next Section</a></h3>
  <div>
    <p>More content...</p>
  </div>
  <h3><a href="#">Last section</a></h3>
  <div>
    <p>You can have as many accordion sections as needed.</p>
  </div>
</div>

<div id="tabDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
  <ul>
    <li><a href="#t1">First Tab</a></li>
    <li><a href="#t2">Middle Tab</a></li>
    <li><a href="#t3">Last Tab</a></li>
  </ul>
  <div id="t1">
    <p>First tab content goes here. The anchor href for the tab titles must 
       match the div for the content.</p>
  </div>
  <div id="t2">
    <p>Second Tab Content</p>
    <br />
    <img src="http://www.google.com/images/logos/ps_logo2.png" />
  </div>
  <div id="t3">
    <p>As with the Accordion, you can have as many tabs as you want, although 
       horizontal width places some practical limit there.</p>
  </div>
</div>

in JavaScript code:
$(document).ready(function() {
  $('#accordionDemo').accordion();
  $('#tabDemo').tabs();
}

위젯: Progressbar

jQuery UI는 연산이 오랫동안 실행되는 경우에 유용한 진행 표시줄 위젯을 제공한다. 이 위젯을 사용하는 방법은 매우 간단하다. ID는 있지만 컨텐츠는 없는 <div>를 정의한 다음, 이것을 대상으로 progressbar 함수를 호출한다(예: $('#yourDiv').progressbar();). 실제로는 이 위젯을 Ajax 기술과 결합하여 연산의 진행 과정을 반영한다.

위젯: Datepicker

데이터를 특정 형식으로 입력하도록 엄격히 요구하는 웹 사이트는 짜증을 나게 하며 특히, 웹 사이트의 방문자가 고유한 날짜 형식을 사용하는 다양한 국가에서 접속한 경우에는 더욱 그렇다. 자유롭게 입력할 수 있는 입력 필드를 사용하는 것도 위험하다. 이런 경우에는 백엔드에서 유효성을 검증해야 하고 입력한 날짜가 구문 분석될 수 없는 경우에는 방문자에게 이러한 사실을 알리는 수단이 있어야 한다. 한 가지 쉬운 해결책은 jQuery UI에서 제공하는 날짜 선택도구 위젯을 사용하는 것이다. 이 위젯에는 날짜 범위를 제한하거나 달력에서 요일의 이름을 변경(국제화를 위해)하는 등의 다양한 기능이 있다. 이 위젯을 사용하는 방법은 단순하다. 다음과 같이 표준 텍스트 입력 필드를 작성한다.

<input type="text" id="dateDemo" size="10">

그런 다음, 다음 코드를 사용하여 달력으로 변환한다.

$('#dateDemo').datepicker({ 'maxDate': '+4m'});

위에 있는 코드는 현재 날짜(2011년 3월 5일)로부터 4개월의 최대 날짜를 정의한다. 그림 4에 있는 스크린샷에는 이 부분이 반영되어 있다.

그림 4. jQuery UI Datepicker 위젯

jQuery 애니메이션 빌드

jQuery에는 animate를 사용하여 특정 속성 값이 변경되는 과정을 애니메이션하는 기능이 있다. 이 기능은 자체적으로 애니메이션을 정의할 때 유용하다. 그러나 언제나 자체적으로 애니메이션을 작성하려면 시간이 많이 소비된다. jQuery UI에서는 독립형 효과인 바운스, 강조, 진동, 흔들기, 크기 및 이동과 같은 애니메이션을 추가할 수 있으며 또한, 블라인드, 클립, 드롭, 폭발, 페이드, 접기, 불기, 슬라이드 및 스케일 효과를 표시하거나 감출 수 있다. 이러한 효과는 일반적인 jQuery show 및 hide 함수에서 사용된다(예: $('#googleLogo').show('slide', {}, 1000); 또는 $('#googleLogo').hide('explode', {}, 2000);).

jQuery 플러그인

써드파티에서 jQuery용 플러그인을 많이 개발했다. 이러한 플러그인은 일반적으로 jQuery UI와는 별개이며 jQuery UI를 필요로 하지도 않는다. 그렇지만 jQuery 자체는 필요하다. 이 중에서 특히 유용한 일부 플러그인을 살펴보도록 하자.

Simple Tree

처음에 Microsoft® Windows® Explorer에서 도입한 이후로 트리 기반 메뉴가 대중화되었다. 이 메뉴를 이용하면 문서와 같은 복잡한 자원 세트를 손쉽게 탐색할 수 있다. jQuery Simple Tree 플러그인을 이용하면 온클릭 이벤트를 이용하는 Javascript 액션과 트리 메뉴를 쉽게 구현할 수 있다. 또한, 원하면 이 플러그인을 사용하여 트리 항목을 끌어서 놓거나 트리 항목을 재구성하는 작업을 수행할 수 있으며 또한, 기능을 끌 수도 있다. (다운로드 링크는 참고자료를 참고한다. 필요한 모든 컴포넌트는 다운로드 섹션에 있는 샘플 코드에 있다.) 그림 5 에는 사용 중인 Simple Tree 플러그인이 표시되어 있다.

그림 5. Simple Tree jQuery 플러그인

트리 컨텐츠는 외부 <ul> 요소 하나로 정의되며 트리를 식별하는 ID와 이 ID의 스타일을 지정하는 CSS 설정으로 구성되어 있다. 이 요소 내부에서는 <li> 요소를 사용하여 루트 항목을 정의한다. 이 요소 내부에는 또 다른 <ul> 요소가 트리 항목(고유한 <li> 요소가 있는 각 항목)과 함께 배치된다. 리스트 4 에는 이 레이아웃이 표시되어 있다. 완성되면 simpleTree 함수가 호출되어 트리 기능을 활성화한다.

리스트 4. Simple Tree를 사용하여 트리 메뉴 설정

	
<head>
  <link rel="stylesheet" type="text/css" href="css/jquery.simple.tree.css" />
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="js/jquery.simple.tree.js" type="text/javascript"></script>
</head>
<body>
  <ul id="treeDemo" class="simpleTree">
    <li class="root"><span>Here are some items.</span>
      <ul>
        <li class="open" id="TopmostBranch"><span>Top Branch</span>
          <ul>
            <li id="SubItem1"><span>Sub items</span></li>
            <li id="SubItem2"><span>are in another</span></li>
            <li class="open" id="SubItem3"><span><ul> level.</span>
              <ul>
                 <li id="SubSubItem1"><span>like this!</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="AnotherBranch"><span>Another Branch</span></li>
        <li id="LastBranch"><span>Last Branch</span></li>
      </ul>
    </li>
  </ul>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#treeDemo').simpleTree({
  autoclose: true,
  afterClick: function(node) {
    alert($('span:first',node).parent().attr('id') + " was clicked.");
  },
  animate: true,
  drag: false
  });
});

Uploadify

Uploadify jQuery 플러그인을 이용하면 새 페이지를 대상으로 POST 조작을 수행하지 않고도 사이트에 파일을 업로드할 수 있을 뿐만 아니라 파일이 업로드되고 있을 때 진행 표시기를 표시할 수도 있다. 업로드 자체는 Adobe® Flash® 컴포넌트를 사용하여 처리한다. 이 도구를 이용하면 허용되는 파일 확장 유형과 크기 제한을 지정할 수 있을 뿐만 아니라 여러 개의 파일을 한 번에 선택할 수 있게 지정할 수도 있다. 각 파일의 업로드가 완료되면 onComplete 함수가 호출되고 모든 파일의 업로드가 완료되면 onAllComplete 함수가 호출된다. Uploadify와 함께 제공되는 기본 업로드 핸들러는 업로드된 파일의 이름을 다시 반향하여 응답한다. 그러나 필요에 따라(예: 포럼에 파일을 게시하거나 일부 다른 조치를 취하는 경우), 이 업로드 핸들러를 쉽게 사용자 정의할 수 있다. 리스트 5 에는 Uploadify를 사용하여 파일을 업로드를 설정하는 방법이 표시되어 있다.

리스트 5. 표준 파일 입력을 Uploadify 업로더로 변환

	
<head>
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="uploadify/swfobject.js" type="text/javascript"></script>
  <script src="uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
</head>
<body>
  <div style="margin-left: auto; margin-right: auto; width: 200px">
    <b>Upload a file to test:</b> <input id="uploadifyDemo" 
       name="uploadifyDemo" type="file" />
  </div>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#uploadifyDemo').uploadify({
    'auto': true,
    'folder': 'tmp',
    'cancelImg': 'uploadify/cancel.png',
    'script': 'uploadify/uploadify.php',
    'uploader': 'uploadify/uploadify.swf',
    onComplete: function(evt, id, file, resp, data) {
      alert('The file "' + file['name'] + '" with size "' + file['size'] + 
            '" was uploaded. (It will be deleted in a few minutes 
            automatically.)' + "\n\nThe upload script returned: " + resp);
    }
  });
});

공용 환경이나 잘 보호된 환경에서 업로드 디렉토리를 액세스할 수 있는지 확인하는 것이 좋다. 이렇게 하지 않으면 공격자가 자신의 코드를 업로드하여 해당 서버에서 실행할 수도 있다. 이 예제에서는 파일을 이 기사의 예제 디렉토리에 있는 tmp/에 작성함으로 .htaccess 규칙을 사용하여 모든 방문자들이 tmp/에 액세스하지 못하도록 한다. 또한, 웹 서버를 실행 중인 사용자(예: www-data 또는 apache)에게 업로드 디렉토리에 대한 쓰기 권한이 있는지 확인해야 한다.

간단한 팁

데스크탑 애플리케이션이건 또는 웹 기반 애플리케이션이건 관계없이 모든 애플리케이션은 사용자가 확실히 사용하기 쉽다는 것을 알 수 있게 자체 문서화가 되어 있어야 한다. 툴팁은 이러한 기능을 수행할 수 있는 가장 빠른 방법이다. 툴팁을 사용한지 수십 년이 지난 지금 대부분의 사람들은 무엇인지 확신할 수 없는 것이 있을 때는 화면에 있는 항목 위에 마우스를 올려 놓고 팝업 도움말이 표시 대기를 기다리도록 본능적으로 훈련이 되었다. Simpletip 플러그인을 이용하면 이러한 기능을 쉽게 구현할 수 있다. Simpletip을 사용하여 기본 툴팁을 작성할 수 있으며 추가 옵션을 사용하여 배치를 제어할 수도 있다. Javascript 함수로 정의된 사용자 정의 애니메이션을 포함하여 툴팁을 표시하고 숨길 수 있는 효과가 지원된다. 툴팁의 컨텐츠는 하드 코딩된 텍스트에서 가져오거나 $('#elementId').html()을 사용하여 숨겨진 <div> 요소와 같은 다른 페이지 컨텐츠에서 가져온다. 또한, Ajax를 사용하여 프로그램 방식으로 컨텐츠를 페치하거나 $('#simpleTip3').simpletip({ content: getToolTip()}); 구문을 사용하여 문서에 있는 다른 소스에서 컨텐츠를 가져올 수도 있다. 리스트 6 에는 문장에서 단어로 표시되는 몇 가지 다양한 스타일의 툴팁이 표시되어 있다.

리스트 6. Simpletip을 사용하여 툴팁 설정

	
<head>
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
</head>
<body>
  <p>
    SimpleTip lets you add <a id="simpleTip1">simple tooltips</a>, 
    including <a id="simpleTip2">more advanced</a> tooltips or even 
    <span id="simpleTip3">tooltips with effects</span> with a minimum of fuss.
  </p>

<div id="simpleTip2Content" style="display: none;">
    <div class="ui-state-highlight ui-corner-all" style="padding: 5px;">
      <b>Fancy</b> content can be defined in a separate div.
    </div>
  </div>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#simpleTip1').simpletip({
      content: 'A basic tooltip.',
      fixed: false
  });

  $('#simpleTip2').simpletip({
      content: $('#simpleTip2Content').html(),
      fixed: true,
      position: ['100', '0']
  });

  $('#simpleTip3').simpletip({
    content: 'Some content to animate',
    hideEffect: 'slide',
    showEffect: 'custom',
    showCustom: function() {
      $(this).css({
        display: 'block',
        fontSize: '0.3em',
        color: '#0000ff',
        backgroundColor: '#ffffff'
      });
      $(this).animate({
        color: '#ff0000',
        fontSize: '1em'
      }, 400);
    }
  });
});

이 기사에서 설명한 도구를 사용하면 웹 애플리케이션의 비주얼 컴포넌트를 신속하게 작성할 수 있어서 사이트의 실제 기능에 집중할 수 있다. 자연스러운 페이지 플로우와 애플리케이션에서 작성하는 각 페이지의 유용성에 대해서는 여전히 조심스럽게 생각해야 하며 jQuery UI와 이러한 플러그인을 사용한다고 해서 페이지를 조심스럽게 설계하지 않아도 되는 것은 아니다. 그러나 이러한 도구를 이용하면 개발 작업을 신속하게 수행할 수 있을 뿐만 아니라 애플리케이션을 더욱 수월하게 구현할 수 있다. 이 기사에서 설명한 모든 샘플 코드가 포함된 완전한 웹 페이지는 다운로드 섹션을 참조한다. 이 웹 사이트를 자신의 프로젝트를 위한 시작점으로 사용해도 좋다.

설명	이름	크기	다운로드 방식
Source code for examples	jQueryUIPluginsExamples.zip	234KB	HTTP

교육

JavaScript 튜토리얼(w3schools): Javascript 초보자라면 여기서 시작하자.
jQuery 웹 사이트: jQuery UI에서 필요로 하는 jQuery 라이브러리에 대한 다운로드와 문서를 찾아보자.
jQuery UI 웹 사이트: 필요한 도구만 포함된 사용자 정의 다운로드를 빌드하자. 이 사이트에는 우수한 문서와 예제도 있다.
jQuery UI ThemeRoller: 자신의 테마를 빌드하고 사전 정의된 테마를 미리 보자. 이 사이트에서 간단하게 활용할 수 있는 공통 컴포넌트 예제를 편리하게 참조할 수 있다.
developerWorks 웹 개발 영역: 다양한 웹 기반 솔루션을 다루고 있는 기사를 찾아보자.
developerWorks의 기술 행사 및 웹 캐스트를 통해 최신 정보를 얻을 수 있다.
developerWorks on-demand demos: 입문자를 위한 제품 설치 및 설정 과정에서 숙련된 개발자를 위한 고급 기능의 활용에 이르기까지 다양한 데모를 제공한다.
Twitter의 developerWorks 페이지를 살펴보자.

제품 및 기술 얻기

Node.js: 우수한 서버측 Javascript 엔진을 다운로드하자.
Simple Tree: 이 jQuery 플러그인을 다운로드하자. 이 플러그인을 이용하면 트리 구조 메뉴를 쉽게 빌드할 수 있고 필요한 경우에는 끌어서 놓기 기능을 지원할 수도 있다.
Simpletip: 웹 페이지에 있는 요소에 툴팁 스타일 팝업 창을 추가하는 과정을 단순화할 수 있는 이 jQuery 플러그인을 다운로드하자.
Uploadify: 이 도구를 이용하면 진행을 표시하면서 파일을 업로드하는 기능을 멋지게 처리할 수 있으며 이를 위해 POST를 수행하거나 페이지를 다시 로드할 필요도 없다.

토론

지금 developerWorks 프로파일을 작성하고 jQuery에 대한 관심목록을 설정하자. developerWorks 커뮤니티에서 최신 정보를 자주 확인하자.
웹 개발에 관심이 있는 다른 developerWorks 구성원을 찾아보자.
웹 주제를 중점적으로 다루는 developerWorks 그룹 중 하나에 참여하자: 지식을 공유하자.
Roland Barcia는 자신의 블로그에서 Web 2.0 및 미들웨어에 대해 설명했다.
developerWorks 멤버의 shared bookmarks on web topics를 따라가 보자.
Web 2.0 Apps 포럼: 신속하게 답변을 얻을 수 있다.
Ajax 포럼: 신속하게 답변을 얻을 수 있다.

Christopher Michaelis는 웹 호스팅, 웹 애플리케이션 및 GIS 프로그래밍을 전문으로 하는 개발자이다. 그는 유타주립대학교와 아이다호주립대학교에서 교육을 받았으며 전산학과 지리정보학을 공부했다. 그는 환경적 모델링, 교육, 다이어트 데이터 분석, 시스템 관리 도구, 웹 호스팅, 플랫폼 통합 및 위치 기반 서비스와 같은 다양한 개발 분야를 경험했다.

[스크랩] jQuery의 새로운 특징, 파트 1: 글로벌화

2012-02-06T00:02:23+09:00

jQuery의 새로운 특징, 파트 1: 글로벌화

출처 : http://www.ibm.com/developerworks/kr/library/os-jquerynewpart1/

웹 애플리케이션의 글로벌화

Michael Abernethy, 프로그래머, Freelancer

요약： 새로운 Globalize JavaScript 플러그인을 사용하면 누구나 단 몇 행의 코드만으로 자신이 만든 웹 애플리케이션이 즉시 350여 개 국가 및 언어를 지원하도록 할 수 있다. 운영 중인 웹 사이트에 전 세계 고객이 방문하는 경우 그들이 사용하는 언어에 맞춰 웹 사이트를 제공해야지, 고객이 웹 사이트에서 제공하는 제한적인 언어 환경에 맞추기를 기대할 수는 없는 노릇이다. Globalize 플러그인은 클라이언트 측 JavaScript의 힘을 빌려 그런 작업을 쉽게 할 수 있게 해준다.

이 기사에 태그： php_(hypertext_preprocessor), 세계화, 애플리케이션_개발, 인터넷_기술, 자바_기술, 펄

그렇다면 이건 jQuery 플러그인이 아니었나?

기사 게재일： 2011 년 11 월 09 일
난이도： 중급
원문： 보기
PDF： A4 and Letter (46KB | 11 pages)Get Adobe® Reader®
페이지뷰： 1840 회
의견： 0 (보기 | 의견 추가 - 로그인)

평균 평가 등급 (0 투표하기)
아티클 순위

소개

jQuery에 관한 또 다른 시리즈 기사를 발표하게 되었다. 필자가 쓴 마지막 시리즈 기사 이후로, jQuery는 최고의 클라이언트 측 JavaScript 라이브러리로 입지를 굳혔다. 이 기사에서는 새로운 Globalize 플러그인에 초점을 맞춘다.

Microsoft®가 jQuery에 jQuery 플러그인을 최초로 릴리스했을 때는 말 그대로 jQuery 플러그인이었다. 하지만, jQuery UI 팀은 최근에 모든 JavaScript 코더와 모든 JavaScript 프레임워크에 jQuery 플러그인을 사용할 수 있도록 하기로 결정했다. 그렇게 하기 위해 jQuery에서 jQuery 플러그인을 분리했다. 이 플러그인을 처음으로 접하는 사용자라면, 본 기사를 작성하는 현재 시점에서 기사의 내용은 이 플러그인에 관한 최신 정보이므로 안심하고 믿어도 된다. 전에 이 플러그인을 사용한 적이 있는 사용자라면, 코드의 핵심 부분에서 변경된 사항이 거의 없다는 점을 알면 편안한 느낌이 들 것이다. 코드에서 "$"를 "Globalize"로만 변경하면 대부분의 문제점을 해결할 수 있을 것이기 때문이다.

다국어 지원은 오늘날 모든 웹 사이트에 매우 중요한 사항이다. 전 세계 다양한 언어권의 고객들은 각자의 모국어가 아닌 외국어만 지원되는 웹 사이트에는 큰 흥미를 느끼지 못하므로, 웹 사이트에서 다국어를 지원하지 않음으로써 잃게 되는 잠재적 손실이 막대할 수도 있다. 전 세계 어느 곳에 있는 어떤 고객이라도 만족할 수 있도록 다양한 언어를 지원하는 일이 다국어를 지원하지 않는 것만큼이나 쉬운 일이라고 말한다면 어떤 생각이 드는가? 이 기사를 통해 다국어 지원이 얼마나 손쉬운 일인지 알려주겠다.

문제점의 배경

전 세계 모든 이가 같은 언어를 쓰는 게 아니라는 점은 구태여 말할 필요도 없겠다. 더구나 숫자, 날짜, 통화 등을 표시하는 형식도 같지 않다.

지금 이게 왜 문제인지 궁금할 지도 모르겠다. 웹 사이트가 세상에 등장한 지 여러 해가 지났지만, 세계 각국, 각 언어권의 웹 사이트 역사를 합치면 어림잡아 10,000년은 되었을 것이다. 웹 사이트가 서버나 Ajax 클라이언트-서버 호출에 의존하여 작업을 수행하는 대신 클라이언트에서 점점 더 많은 작업을 수행하는 방향으로 나아가고 있기 때문에, 이 문제점이 더욱 중요해지고 있다. 개발자들은 이제 모든 것에 대해 순수 클라이언트 솔루션을 지향하고 있다.

필자가 말하려는 점을 증명하기 위해 간단한 예제를 살펴보자. 예컨대, 자신이 "Double It!"이라는 웹 애플리케이션의 소유자라고 해보자. 사용자가 텍스트 필드에 숫자를 입력한 후 어떤 단추를 누르면 텍스트 필드 아래의 SPAN에서 그 숫자의 2배에 해당하는 숫자가 표시되는 웹 애플리케이션이다. 너무나 간단해 보이겠지만, 미국에 사는 사용자라면 이 사이트를 방문하여 이 웹 애플리케이션을 사용할 때 아마 텍스트 필드에 "1,250.25"와 같이 입력할 것이고, 애플리케이션에서는 "2,500.5"라는 응답을 출력할 것이다. 그런 작업을 손쉽게 수행하도록 클라이언트 측 JavaScript를 다음과 같이 쓸 수 있을 것이다.

$("#reponseSpan").text(2 * new Number($("#inputTextField").val()));

그런데 이번에는 독일에 사는 사용자가 이 사이트를 방문한다고 해보자. 독일인은 미국인과 같은 방식으로 숫자를 쓰지 않는다. 독일인은 같은 숫자지만 "1.250,25"의 형식으로 입력할 것이다. 이 입력에 대해 미국 고객을 위해 사용한 것과 똑같은 JavaScript를 사용하면 Number 오브젝트를 작성할 때 JavaScript 오류가 발생하게 된다. 왜 그런 일이 생기는 걸까? 내장된 JavaScript 함수에서는 미국 형식의 숫자를 예상했는데, 독일인 방문자는 그런 형식으로 숫자를 입력하지 않기 때문이다.

물론, 웹 사이트 사용자에게 모든 숫자를 미국 형식에 맞춰 입력하라고 지시할 수도 있겠지만, 과연 그게 최선일까? 정말로 웹 사이트 사용자가 웹 사이트 설계자가 정한 방식대로만 할 것을 강제하고 싶은가? 아니면, 사용자가 하는 것이면 무엇이든 허용하여 최대한 훌륭한 사용자 환경을 만들고 싶은가?

Table 1에서는 Globalize 플러그인이 최선의 솔루션인 이유를 예증하기 위해 사용 가능한 숫자 형식의 예를 보여준다.

표 1. 국가마다 다른 숫자 형식

국가	숫자 형식
미국	1,250.25
독일	1.250,25
프랑스	1 250,25
스위스	1'250,25

문화

그렇다면, Globalize 플러그인은 앞서 언급한 이런 문제를 어떻게 다루는 것일까? Globalize 플러그인은 문화의 관점에서 솔루션을 구조화한다. 이 세상에는 스페인어와 같이 동일한 언어를 사용하는 국가가 많기 때문에 문화를 단순히 언어로 생각해서는 안 된다. 마찬가지로, 스위스와 같이 어떤 국가에서는 복수의 공식 언어를 사용하므로 문화를 국가로 생각해서도 안 된다. 그 대신, 문화의 개념을 국가 및 언어의 고유한 조합으로 생각할 수 있다. 스페인어와 스페인이 각각 고유한 문화를 대표하지는 않지만, 스페인어-스페인은 고유하므로 하나의 문화로 간주할 수 있다(스페인어-멕시코 및 카탈로니아어-스페인과는 구분되는 문화임).

전 세계의 모든 고유 언어 및 국가를 함께 그룹화할 때, 지원해야 할 문화는 약 350가지 정도이다. (이렇듯 많은 문화가 있다는 것이 개발자 스스로 솔루션을 개발하기 위해 고심하기를 원치 않을 또 다른 이유이기도 하다.) Globalize 플러그인은 2문자 코드 두 개를 사용하여 문화를 생성한다. 첫 번째 코드는 ISO 639 코드라는 2문자로 된 소문자 언어 코드이며, 두 번째 코드는 ISO 3166 코드라는 2문자로 된 대문자 국가 코드이다(참고자료 참조). 예를 들어, "en-US"는 영어와 미국 문화를 표시하고, "fr-FR"은 프랑스어와 프랑스 문화를 표시한다.

"중립" 문화도 중요하다. 사실, Globalize 플러그인에서는 "특정 언어 및 국가 정보를 얻을 수 없는 경우 언어는 그냥 넘어가도 모든 형식을 해당 국가에 맞춰 적절히 처리할 수 있는 방법을 추측해주겠다"는 개념으로 접근한다. 나중에 알게 되겠지만 Globalize 플러그인의 이런 특징은 매우 큰 도움이 된다. 웹을 검색하는 사람들이 외국어보다 모국어를 훨씬 선호한다는 건 당연지사이겠지만, 자신의 국가 코드를 결정하는 게 때때로 매우 어려운 일일 수 있다.

JavaScript에서 문화 설정

이제 문제점의 배경과 Globalize 플러그인이 어떻게 Culture 오브젝트를 사용하여 기본 세부사항을 추상화하는지 알았으므로, JavaScript로 작업할 때 문화를 설정하는 방법을 살펴보자.

첫 번째 단계는 Globalize 플러그인 자체를 다운로드하는 것이다(참고자료 참조). 또한, Globalize 플러그인을 사용하는 데 jQuery가 필요하지 않다는 점도 알아두자. 과거에는 필요했지만, 최신 버전에서는 필요하지 않다. Globalize 플러그인은 "기본" 플러그인이 루트 폴더에 있도록 고안되었고 "globalize.js"라고 한다. 이 파일은 크기가 작지만(44KB에 불과함), 오로지 미국 영어만 지원한다. 이는 이 파일에 모든 기능에 대한 기본값만 들어 있고 실제 문화 코드는 없기 때문이다. "cultures" 폴더를 열면 353개의 파일이 있는데, 이로 인해 문제점의 복잡도가 증가할 수 있다. 이 특수 파일을 "globalize.cultures.js"로 식별한다. 이 파일에는 가능한 모든 문화 코드가 포함되어 있으므로 사용해야 할 문화 코드를 따로 로드하지 않아도 된다. 물론, 모든 문화를 포함함으로써 828KB의 큰 파일이 작성된다는 점은 단점이다. 그 정도 크기는 어떤 프로덕션 상황에서도 지나치게 큰 것일 수 있다. 하지만, 당분간은 예제 코드를 작성하는 데 충분히 괜찮은 수준이다.

목록 1. 테스트 환경에 Globalize 로드

				
// Remember, you should only load the globalize.cultures.js when testing and in example
       code like this
// Later sections will show how to dynamically load each Culture as needed
<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="cultures/globalize.cultures.js"></script>

JavaScript 내에서 Culture를 설정하는 것은 대부분의 작업과 마찬가지로 매우 쉬운 일이다. 다음은 Culture를 설정하는 방법을 보여주는 몇 가지 예제다.

목록 2. Culture 설정

				
// Remember, this only works if you include the globalize.js file!
// And, you HAVE to include the globalize.cultures.js file OR
// each individual culture's JS file

// You can set the culture directly by referencing its name
Globalize.culture = Globalize.cultures.de;

// You can set the culture directly by referencing it from
// the Cultures array
Globalize.culture = Globalize.cultures["de-DE"];

숫자 형식화

형식화와 구문 분석은 자국어 지원 작업 시 가장 기본적인 두 가지 기능이다. 결국, 사용자 자신이 원하는 형식으로 숫자와 날짜를 입력할 수 있도록 하자는 것이다. 하지만, 입력 데이터를 작업할 수 있는 형식으로 만들거나(구문 분석) 원하는 형식으로 데이터를 표시해야 한다(형식화).

숫자의 형식화는 JavaScript에서 Number 오브젝트로 저장할 수 있는 실제 숫자를 선택하여 사용자가 숫자를 올바로 인식할 수 있도록 적절히 표시하는 것이다. 미국인은 "1,250.30"이라 쓰고, 독일인은 "1.250,30"이라 쓰는 이전의 예를 다시 떠올려보자.

대부분의 언어에서는 수(소수점 앞의 숫자), 소수(소수점 뒤의 숫자), 백분율(수에 100을 곱하고 "%" 기호로 표시) 및 통화($ 또는 유로 기호와 같이 해당 문화의 통화 기호 표시)의 네 가지 형식 유형이 숫자의 형식화에 관련된다. 각 유형의 형식에서는 패턴을 적절히 적용할 방법을 포맷터에 알려주기 위해 숫자 인수도 취할 수 있다.

n — 수에 사용되어 포맷터에게 이 Number 오브젝트를 수로 바꾸라고 표시한다. 이 인수를 수와 함께 사용하여 포맷터에게 사용할 소수점의 개수를 알려줄 수 있다. 예를 들어, "n3"은 포맷터에게 인수를 3개의 소수점이 있는 수로 만들라는 의미다.
d — 소수에 사용되어 이 Number 오브젝트를 소수를 포함한 수로 바꾸라고 표시한다. 이 인수를 수와 함께 사용하여 포맷터에게 소수점 앞에 사용할 숫자의 개수를 알려줄 수 있다. 예를 들어, "d2"는 포맷터에게 소수점 왼쪽에 두 자리의 수를 강제로 가지도록 한다는 의미다.
p — 포맷터가 수에 100을 곱하고 그 수 뒤에 "%"를 추가한다는 점을 제외하면, "n" 인수와 동일하다.
c — 통화 기호로서, 해당 문화의 통화 기호를 적당한 곳에 추가한다. 숫자 인수도 추가하여 포맷터에게 사용할 소수점 이하 자릿수를 알려줄 수 있다.

목록 3. 숫자 형식화 예제

				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

// test the "n" command
Globalize.format(1839.560, "n1"); // outputs 1.839,6
Globalize.format(1839.560, "n0"); // outputs 1.840
Globalize.format(1839.560, "n6"); // outputs 1.839,560000

// test the "c" command
Globalize.format(1839.560, "c2"); // outputs 1.839,56 €
Globalize.format(1839.560, "c3"); // outputs 1.839,560 €
Globalize.format(1839.560, "c6"); // outputs 1.839,560000 €

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

// test the "n" command
Globalize.format(1839.560, "n1"); // outputs 1,839.6
Globalize.format(1839.560, "n0"); // outputs 1,840
Globalize.format(1839.560, "n6"); // outputs 1,839.560000

// test the "c" command
Globalize.format(1839.560, "c2"); // outputs $1,839.56
Globalize.format(1839.560, "c3"); // outputs $1,839.560
Globalize.format(1839.560, "c6"); // outputs $1,839.560000

하지만, 여기서 사용되는 형식화 기능에 대해 마음에 들지 않는 점이 몇 가지 있다. 우선, 통화 형식화 기능의 유연성이 없어, 통화 기호를 삽입할 곳을 지정할 수 없게 되어 있다. 예를 들어, 프로그래머가 숫자 앞이나 뒤에 공백을 넣거나 넣지 않고 통화 기호를 사용하는 것으로 지정할 수 있는 Java™와 같은 포맷터를 사용할 때와 이 점을 비교할 수 있다. 이 Globalize 플러그인에서도 그렇게 사용할 수는 있지만, "de" Culture 오브젝트를 편집하거나(권장하지 않는 방법임) 사용자 정의 오브젝트를 작성해야 하는 불편이 따른다. 또한, Java 형식화에서는 더욱 강력한 사용자 정의 기능으로서 시작과 끝 부분에 문자를 추가할 수 있는 기능이 있다. 예를 들어, 새로 취직할 때의 사이닝 보너스에 대해 말할 때 원하는 사이닝 보너스를 "$24k"로 쓸 수 있다("k"는 "천(1,000)"을 나타냄). 이런 유형의 약어는 천을 나타내는 "k", 백만을 나타내는 "M", 십억을 나타내는 "B"와 같이, 미국에서는 흔히 사용된다. 불행히도, 현재로선 Globalize 플러그인 형식화에서는 이렇게 쓸 수 없으며, 굳이 쓰려면 Culture 오브젝트를 따로 작성해야 한다.

궁극적으로, 필자는 형식화가 서버 측의 Java만큼 강력하지 않다고 생각하지만 형식화가 필요한 거의 모든 유스 케이스에서 여전히 좋은 솔루션이다.

수의 구문 분석

사용자가 수, 통화 또는 백분율을 입력하면 그 정보를 가져와서 그 정보를 포함한 Number 오브젝트를 작성할 수 있는 양식에 사용해야 한다. 즉, 코드가 해당 정보로 계산 작업을 수행할 수 있는 방식으로 처리해야 한다는 뜻이다. 뿐만 아니라, 해당 정보를 서버로 전달하는 경우 알맞은 양식으로 변환해야 할 것이다. 이런 경우, 수를 구문 분석하여 문자열에서 적당한 수로 바꾸어야 한다.

목록 4. 수 구문 분석 예제

				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

// Call parseInt() on it, and get an object back we can work with
var num = Globalize.parseInt("1.839,56"); // will create an object with value 1840

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

// Call parseInt() on it, and get an object back we can work with
var num = Globalize.parseInt("1,839.56"); // will create an object with value 1840

// Likewise, there's a parseFloat() that will preserve the decimal points
var num = Globalize.parseFloat("1,839.56"); // will create an object with value 1839.56

날짜의 형식화

Globalize 플러그인을 사용할 때 형식화가 수에만 제한되는 것은 아니다. 날짜로 형식화할 수 있다. 예를 들어, 2011년 3월 8일이라는 날짜를 미국에서는 3/8/11, 독일에서는 8/3/11로 쓸 수 있다. 날짜 형식화는 숫자 형식화보다 훨씬 복잡하고 어려우며, 그런 이유 때문에 날짜 형식화에서 사용할 수 있는 모든 옵션을 여기서 자세히 다루지는 않겠다. 자세한 내용은 관련 문서를 통해 파악하도록 한다.

목록 5. 날짜 형식화 예제

				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

// Create a date for March 8th, 2011
// NOTE - months are 0 indexed, but the day isn't...how dumb!
Globalize.format(new Date(2011,2,8),"d"); // outputs 08.03.2011
Globalize.format(new Date(2011,2,8),"M"); // outputs 08 März
Globalize.format(new Date(2011,2,8),"D"); // outputs Dienstag, 8. März 2011

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

Globalize.format(new Date(2011,2,8),"d"); // outputs 3/8/2011
Globalize.format(new Date(2011,2,8),"M"); // outputs March 08
Globalize.format(new Date(2011,2,8),"D"); // outputs Tuesday, March 08, 2011

날짜의 구문 분석

Date 오브젝트의 구문 분석은 쉽게 할 수 있다.

목록 6. 날짜 구문 분석 예제

				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

Globalize.parseDate("3/8/2011"); // creates a JavaScript Date object for August 3rd, 2011
Globalize.parseDate("Tuesday, March 08, 2011"); // returns null

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

Globalize.parseDate("3/8/2011"); // creates a JavaScript Date object for March 8th, 2011
Globalize.parseDate("Tuesday, March 08, 2011"); // creates a JavaScript Date object for
          March 8th, 2011

동적 다국어 지원

지금까지 우리는 코드를 더 쉽게 다루기 위해 예제에서 "globalize.cultures.js" 파일을 사용했다. "globalize.cultures.js" 파일에는 총 350개의 문화가 포함되어 있으며, 그 결과 파일 크기가 828KB로 클 수밖에 없다. 이 기사에서 보여준 예제에서는 괜찮지만, 프로덕션 환경에서는 올바로 작동하지 않는다. 페이지를 로드할 때마다 349개의 불필요한 문화 코드를 안고 갈 필요는 없지 않겠는가? 대부분의 사용자는 페이지에 한두 개의 문화 코드만 로드해도 페이지를 완벽하게 자국어 지원을 할 수 있을 것이다.

그 밖에도, 페이지에 어떤 문화 코드를 로드해야 할지 도대체 어떻게 알 수 있을까? 브라우저가 특정 웹 사이트에 접속하는 사용자가 살고 있는 곳을 정확히 알려줄 수 있는 것처럼 그렇게 간단한 문제가 아니다(그마저도 위치 기반 서비스와 IP 주소 검색에 따라 변함). 랩탑 컴퓨터를 휴대하고서 스톡홀름으로 여행한다고 생각해보자. 그 어떤 사용자도 자신의 실제 위치가 바뀌었다고 해서 모든 사이트가 모든 내용을 자동으로 스웨덴어로 변환하기를 원하지는 않을 것이다. 다른 문화권의 국가로 간다고 해서 사용자가 숫자와 날짜를 읽는 방법을 바꾸지는 않기 때문이다. 사용자가 웹 서핑을 할 때 자신이 기본 설정한 언어와 국가를 자동으로 나타낼 수 있는 방법이 있다면 좋지 않을까?

그런 방법이 있다. 단연코 가장 쉬운 방법은 JavaScript에서 해당 정보에 대한 액세스 권한을 가지는 것이다. 놀랍게도, JavaScript는 브라우저에 대해 많은 정보를 주지만 기본 설정 언어에 대한 정보는 주지 않는다. 하지만, JavaScript에서 그 정보에 대한 액세스 권한을 주지 않더라도 Java 또는 PHP와 같은 서버 측 언어로 그 정보를 얻을 수 있다.

우리의 목표는 사용자가 어떤 언어를 선호하는지 판단하는 것이다. 그런 다음, 트래픽과 페이지 로드 시간을 줄이기 위해 그런 언어를 바탕으로 해당 문화만 페이지로 로드할 수 있을 것이다. 마지막으로, Globalize 플러그인이 모든 것을 어떻게 형식화할지 알 수 있도록 사용자가 기본 설정한 언어를 포함한 Globalize.culture()를 호출한다. 목록 7은 Java 코드, 목록 8은 PHP 코드를 나타낸 것이므로, 웹 페이지를 자동으로 자국어 지원할 때 요긴하게 사용할 수 있다.

JSP 또는 PHP를 사용한다면 Globalize 플러그인을 사용할 계획인 경우 언제든 자유롭게 이 코드를 복사하여 자신의 코드에 붙여넣어 사용하면 된다. 이제 배치할 준비가 되었고 Java 5 이상 또는 PHP 4 이상에서는 외부 종속 항목이 없다.

목록 7. Java 자국어 지원 코드

				
<%
    // the user's preferred language is stored in the Header, and the Accept-Language
    // field
    // For example, in my Firefox browser, it shows 
    // en-us,en;q=0.5
    // This means my primary Culture is "en-us" which has a q=1.0
    // My backup Culture is "en" neutral, which has a q=0.5
    // q values are used to rank the cultures and are a system
    // for safe fail-over
    String header = request.getHeader("Accept-Language");
    
    // Split each language into separate locales
    String[] locales = header.split(",");

    // load the globalize.js file, which must always
    // be loaded to use the Globalize plugin
    out.println("<script src="\"globalize.js\"
                type=\"text/javascript\"></script>");

    // loop through each locale, and load the appropriate Globalize
    // plugin file.
    // for example, since I have 2 locales, it will load the
    // globalize.culture.en-US.js file and the
    // globalize.culture.en.js file
    for (int i=0; i<locales.length; i++)
    {
        int end = (locales[i].indexOf(";") == -1) ? locales[i].length() : 
          locales[i].indexOf(";");
        String locale = locales[i].substring(0,end);
        out.println("<script src="\"cultures/globalize.culture." +
                    locale + 
                    ".js\" type=\"text/javascript\"></script>");
    }

    // Finally, call culture() with the Accept-Language
    // The Globalize plugin accepts the String directly from
    // the Header, and deals with the q values appropriately,
    // even failing over safely on its own
    out.println("<script>$(document).ready(function(){Globalize.culture(\"" +
               header + 
               "\");});</script>");
%>

목록 8. PHP 자국어 지원 코드

				
// Here's the same thing in PHP
<?
$accept_language = $_SERVER["HTTP_ACCEPT_LANGUAGE"];

$languages = explode(",", $accept_language);

echo "<script src="\"globalize.js\" type=\"text/javascript\"></script>";

for each ($languages as $language) {
        $locale = explode(";", $language);

        echo "<script src="\"cultures/globalize.culture.".$locale[0].".js\"
          type=\"text/javascript\"></script>";
}

echo '<script>$(document).ready(function(){Globalize.culture
          ("'.$accept_language.'");});</script>';
?>

Globalize 플러그인은 jQuery 및 JavaScript에 새로 추가된 훌륭한 기능이다. 이 플러그인은 Microsoft에서 다년간 노력하여 내놓은 결과물이며, Microsoft는 이를 jQuery 커뮤니티에 기증했고 우리 모두 그 혜택을 누릴 수 있다. 이 플러그인에는 350가지의 고유한 언어-국가 문화가 포함되어 있으므로 확실히 모든 문화를 포괄할 수 있다. 말 그대로, Globalize 플러그인을 통해 웹 사이트를 방문하는 전 세계 모든 이에게 서비스를 제공할 수 있다. 바로 그 점만으로도 힘들게 자체 제작한 다른 플러그인을 쓰는 대신 이 Globalize 플러그인을 사용하도록 설득하기엔 충분하다. (아이러니하게도, 필자는 developerWorks에 기고한 이전의 기사를 위해 널리 사용되는 jQuery 숫자 형식화 플러그인을 작성했지만 지금은 더 이상 그걸 사용하지 말고 이 Globalize 플러그인을 사용하라고 말하게 되었다.)

Globalize 플러그인을 사용하면 숫자와 날짜를 손쉽게 형식화할 수 있고, 그에 해당하는 값도 구문 분석할 수 있다. 이 플러그인을 사용하면 웹 페이지에서 숫자와 날짜를 표시하는 방식을 사용자 정의하고 웹 페이지에서 "웹 애플리케이션을 좀 더 데스크탑 애플리케이션처럼 보이도록" 하기 위한 다른 중요한 단계를 수행하여 사용자와 더 나은 방식으로 연결할 수 있다. 이전에는 개발자가 각 문화에 대해 숫자와 날짜를 올바로 형식화하려는 경우 Ajax 클라이언트-서버 호출을 수행하거나 서버에서 직접 모든 것을 처리하도록 할 수밖에 없었다. 현재 사용되는 모든 웹 애플리케이션에서 보듯이, 이제는 JavaScript로 클라이언트에서 더 많은 처리와 논리 수행이 이루어지고 있다.

Globalize 플러그인에 대해 좀 더 자세한 부분까지 살펴보지는 않았다. 예를 들어, 사용자 자신에게 맞는 문화를 손쉽게 작성하여 시스템에 연결하기에 충분히 유연하게 플러그인을 조정할 수 있다. 플러그인에 350가지 문화 코드가 이미 포함되어 있다는 점을 알고 있지만, 정말 다른 문화 코드도 필요할지 잘 생각할 필요가 있다. 필요하다고 생각한다면 쉬운 일이지만, 본 기사에서 그 점을 필수적인 주제로 보지는 않았다.

마지막으로, 필자는 웹 사이트 방문자가 자신의 브라우저에서 사용하고 싶은 알맞은 문화를 동적으로 판단한 다음 알맞은 문화 파일을 동적으로 로드하여 Globalize 플러그인과 함께 포함할 수 있는 Java 및 PHP 코드를 보여주었고, 최종적으로 culture()를 동적으로 호출하여 페이지에서 해당 문화를 설정하는 방법을 설명했다. 위 코드를 간단히 복사하고 자체 코드에 붙여넣으면 웹 페이지를 자국어 지원할 수 있다.

교육

이 플러그인의 릴리스에 관한 jQuery 팀의 공식 발표(official announcement from the jQuery team) 내용을 읽어보자.
ISO 639 언어 코드의 목록을 살펴보자.
ISO 3166 국가 코드의 목록을 살펴보자.
W3Schools에서 CSS, JavaScript 및 기타 웹 언어에 대한 자세하고 심도 깊은 배경 지식을 얻을 수 있다.
jQuery로 작업하기, 파트 1: 브라우저로 데스크톱 응용 옮기기, 파트 2: 내일 나올 웹 응용을 오늘 구현해보자 및 파트 3: jQuery와 Ajax로 RIA 만들기(Michael Abernethy, developerWorks, 2008년): 이전에 발표된 이 시리즈에서는 jQuery 라이브러리에 대해 소개한다.
The 오픈 소스에서는 오픈 소스 도구와 오픈 소스 기술 사용에 관한 풍부한 정보를 접할 수 있다.

제품 및 기술

GitHub 사이트에서 Globalize 플러그인을 다운로드하고 관련 문서를 읽어보자.
updated Globalize documentation goals를 탐색해보자.
무료로 IBM 소프트웨어를 체험해보자. 평가판을 다운로드하고 온라인 평가판에 로그인하며 샌드박스 환경에서 제품으로 작업하거나 클라우드를 통해 이에 액세스하자. 100개 이상의 IBM 제품 체험판에서 선택하자.

토론

developerWorks 블로그를 통해 developerWorks 커뮤니티에 참여하자.

기 술 분야에서 12년의 경력을 가진 Michael Abernethy는 광범위한 기술을 토대로 광범위한 클라이언트와 작업해 왔다. 그는 더 우수하고 더 복잡한 웹 애플리케이션을 빌드하고, 실행하는 브라우저의 한계를 테스트하는 동시에, 이런 웹 애플리케이션을 작성하고 유지보수하기에 더 간편하게 만드는 방법을 알아내려고 노력하는 데 집중한다. 컴퓨터 앞에 앉아 있지 않을 때는 자녀들과 함께 시간을 보낸다

[스크랩] jQuery로 Ajax 개발을 단순화 하기

2012-02-05T23:45:45+09:00

jQuery로 Ajax 개발을 단순화 하기

출처 : http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html

Ajax와 DOM 스크립팅을 쉽게 하는 방법

Jesse Skinner, Web Developer, 自由职业者

요약： jQuery는 JavaScript 라이브러리로서 JavaScript™와 Asynchronous JavaScript + XML (Ajax) 프로그래밍을 단순화 하는데 도움이 됩니다. JavaScript 라이브러리와는 달리, jQuery는 복잡한 코드를 간결하게 표현할 수 있는 독특한 철학이 있습니다. jQuery 원리, 기능과 특징을 배우고, 일반적인 Ajax 태스크도 수행하며, 플러그인으로 jQuery를 확장하는 방법도 알아봅니다.

이 기사에 태그： css_(cascading_style_sheets), dom_(document_object_model), ecmascript, xml, xpath_(xml_경로_언어), 자바_스크립트

원문 게재일: 2007 년 9 월 04 일
난이도: 중급
원문: 보기
페이지뷰： 47448 회
의견： 0 (보기 | 의견 추가 - 로그인)

평균 평가 등급 (77 투표수)
아티클 순위

jQuery란 무엇인가?

2006년 초, John Resig가 만든 jQuery는 JavaScript 코드로 작업하는 사람들에게는 훌륭한 라이브러리이다. 여러분이 JavaScript 언어 초보자라서 라이브러리가 Document Object Model (DOM) 스크립팅과 Ajax의 복잡성을 다루어주기를 원하든지, 숙련된 JavaScript 구루로서 DOM 스크립팅과 Ajax의 반복성에 지루해졌다면, jQuery가 제격이다.

jQuery는 코드를 단순하고 간결하게 유지한다. 많은 반복 루프와 DOM 스크립팅 라이브러리 호출을 작성할 필요가 없다. jQuery를 사용하면 매우 적은 문자로 표현할 수 있다.

jQuery 철학은 매우 독특하다. 무엇이든 단순하고 재사용 가능한 것으로 유지하기 위해 디자인 되었다. 여러분이 이러한 철학을 이해하고 여기에 편안함을 느낀다면, jQuery가 여러분의 프로그래밍 방식을 충분히 향상시킬 수 있다.

단순화

다음은 jQuery가 여러분의 코드에 어떤 영향을 미치는지를 보여주는 예제이다. 페이지의 모든 링크에 클릭 이벤트를 붙이는 것 같이 단순하고 일반적인 것을 수행하려면, 플레인 JavaScript 코드와 DOM 스크립팅을 사용하는 것이 낫다. (Listing 1)

Listing 1. 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);
    };
}

Listing 2는 같은 기능에 jQuery를 사용한 모습이다.

Listing 2. jQuery를 사용한 DOM 스크립팅

                
$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});

놀랍지 않은가? jQuery를 사용하면 복잡하지 않게 코드로 표현하고자 하는 것만 나타낼 수 있다. 엘리먼트를 반복할 필요가 없다. click() 함수가 이 모든 것을 관리한다. 또한, 다중 DOM 스크립팅 호출도 필요 없다. 여기에서 필요한 것은 엘리먼트가 어떻게 작동하는지를 설명하는 짧은 스트링이다.

이 코드로 어떻게 작업이 수행되는지를 이해하기는 조금 어렵다. 우선, $() 함수가 있어야 한다. 이것은 jQuery에서 가장 강력한 함수이다. 대게, 이 함수를 사용하여 문서에서 엘리먼트를 선택한다. 이 예제에서, 이 함수는 Cascading Style Sheets (CSS) 신택스를 포함하고 있는 스트링으로 전달되고, jQuery는 효율적으로 이 엘리먼트를 찾는다.

CSS 셀렉터의 기본을 이해하고 있다면, 이 신택스가 익숙할 것이다. Listing 2에서, #external_links는 external_links의 id를 가진 엘리먼트를 찾는다. a 앞에 있는 공간은 jQuery에게 external_links 엘리먼트 내의 모든 <a> 엘리먼트를 찾도록 명령한다. 영어와 DOM은 장황하지만, CSS에서는 매우 간단하다.

$() 함수는 CSS 셀렉터와 매치하는 모든 엘리먼트를 포함하고 있는 jQuery 객체를 리턴한다. jQuery 객체는 어레이와 비슷하지만, 수 많은 특별한 jQuery 함수들이 포함된다. 예를 들어, click 함수를 호출함으로써 클릭 핸들러 함수를 jQuery 객체의 각 엘리먼트에 할당할 수 있다.

또한, 엘리먼트나 엘리먼트의 어레이를 $() 함수로 전달하면, 이것은 엘리먼트 주위에 jQuery 객체를 래핑할 것이다. 이 기능을 사용하여 window 객체 같은 것에 jQuery 함수를 적용하고 싶을 것이다. 일반적으로 이 함수를 다음과 같이 로드 이벤트에 할당한다.

window.onload = function() {
    // do this stuff when the page is done loading
};

jQuery를 사용하면, 같은 코드도 다음과 같이 된다.

$(window).load(function() {
    // run this when the whole page has been downloaded
});

이미 알고 있었겠지만, 윈도우가 로딩하기를 기다리는 일은 매우 지루한 일이다. 전체 페이지가 로딩을 끝마쳐야 하기 때문이다. 여기에는 페이지의 모든 이미지들도 포함된다. 가끔, 이미지 로딩을 먼저 끝내고 싶지만, 대부분의 경우 Hypertext Markup Language (HTML)만 로딩해야 한다. jQuery는 문서에 특별한 ready 이벤트를 만듦으로써 이 문제를 해결한다.

$(document).ready(function() {
    // do this stuff when the HTML is all ready
});

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

$(function() {
    // run this when the HTML is done downloading
});

지금까지, $() 함수를 사용하는 세 가지 방법을 설명했다. 네 번째 방법은, 스트링을 사용하여 엘리먼트를 만드는 것이다. 결과는, 그 엘리먼트를 포함하고 있는 jQuery 객체가 된다. Listing 3은 문단을 페이지에 추가하는 예제이다.

Listing 3. 간단한 문단을 생성하여 붙이기

                
$('<p></p>')
    .html('Hey World!')
    .css('background', 'yellow')
    .appendTo("body");

이전 예제에서 파악했겠지만, jQuery의 또 다른 강력한 기능은 메소드 체인(method chaining.)이다. jQuery 객체에 대해 메소드를 호출할 때마다, 이 메소드는 같은 jQuery 객체를 리턴한다. jQuery 객체에 다중 메소드를 호출하고 싶다면 셀렉터를 다시 입력하지 않고 이를 수행할 수 있다.

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

Ajax로 단순하게!

Ajax는 jQuery를 사용하면 더 단순해 질 수 있다. jQuery에는 쉬운 것도 쉽게 복잡한 것도 가능한 단순하게 만드는 유용한 함수들이 많이 있다.

Ajax에서 사용되는 방식은 HTML 청크를 페이지 영역에 로딩하는 것이다. 여러분이 필요로 하는 엘리먼트를 선택하고 load() 함수를 사용하는 것이다. 다음은 통계를 업데이트 하는 예제이다.

$('#stats').load('stats.html');

일부 매개변수들을 서버 상의 페이지로 전달해야 할 경우가 종종 있다. jQuery를 사용하면 이는 매우 간단하다. 필요한 메소드가 어떤 것인지에 따라서 $.post()와 $.get() 중 선택한다. 선택적 데이터 객체와 콜백 함수를 전달할 수도 있다. Listing 4는 데이터를 보내고 콜백을 사용하는 예제이다.

Listing 4. Ajax를 사용하여 데이터를 페이지로 보내기

                
$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});

복잡한 Ajax 스크립팅을 해야 한다면, $.ajax() 함수가 필요하다. xml, html, script, json을 지정할 수 있고, 여러분이 바로 사용할 수 있도록 jQuery가 자동으로 콜백 함수에 대한 결과를 준비한다. 또한, beforeSend, error, success, complete 콜백을 지정하여 사용자에게 Ajax에 대한 더 많은 피드백을 제공할 수 있다. 게다가, Ajax 요청의 타임아웃이나 페이지의 "최종 변경" 상태를 설정하는 매개변수들도 있다. Listing 5는 필자가 언급했던 매개변수를 사용하여 XML 문서를 검색하는 예제이다.

Listing 5. $.ajax()를 사용하여 복잡한 Ajax를 단순하게

                
$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

콜백 성공으로 XML을 받으면, jQuery를 사용하여 HTML에서 했던 것과 같은 방식으로 XML을 볼 수 있다. 이는 XML 문서 작업을 쉽게 하며 콘텐트와 데이터를 웹 사이트로 쉽게 통합시킨다. Listing 6은 리스트 아이템을 XML의 <item> 엘리먼트용 웹 페이지에 추가하는 success 함수에 대한 확장 모습이다.

Listing 6. jQuery를 사용하여 XML 작업하기

                
success: function(xml){
    $(xml).find('item').each(function(){
        var item_text = $(this).text();

        $('<li></li>')
            .html(item_text)
            .appendTo('ol');
    });
}

HTML 애니메이션

jQuery를 사용하여 기본적인 애니메이션과 효과를 다룰 수 있다. 애니메이션 코드의 중심에는 animate() 함수가 있는데, 이는 숫자로 된 CSS 스타일 값을 바꾼다. 예를 들어, 높이, 넓이, 폭, 위치를 움직일 수 있다. 또한, 애니메이션의 속도를 밀리초 또는 사전 정의된 속도(느림, 보통, 빠름)로 지정할 수 있다.

다음은, 엘리먼트의 높이와 넓이를 동시에 움직이게 하는 예제이다. 시작 값은 없고 종료 값만 있다. 시작 값은 엘리먼트의 현재 크기에서 가져온다. 여기에도 콜백 함수를 첨부했다.

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
    alert('The element is done growing!');
});

jQuery는 빌트인 함수를 사용하여 일반적인 애니메이션도 더욱 쉽게 만든다. show()와 hide() 엘리먼트를 즉각적으로 또는 지정된 속도로 사용할 수 있다. fadeIn()과 fadeOut() 또는 slideDown()과 slideUp()을 사용하여 엘리먼트를 나타나게 하거나 사라지게 할 수 있다. 다음은 네비게이션의 slidedown 예제이다.

$('#nav').slideDown('slow');

DOM 스크립팅과 이벤트 핸들링

jQuery는 DOM 스크립팅과 이벤트 핸들링을 단순화하는데 제격이다. DOM의 트래버스와 조작이 쉽고, 이벤트의 첨부, 제거, 호출은 매우 자연스러운 일이며, 직접 수행하는 것보다 에러도 적게 발생한다.

기본적으로 jQuery는 DOM 스크립팅으로 수행하는 일들을 더욱 쉽게 수행할 수 있도록 해준다. 엘리먼트를 생성하고 append() 함수를 사용하여 이들을 다른 엘리먼트로 연결할 수 있고, clone()을 사용하여 엘리먼트를 중복시키고, 콘텐트를 html()로 설정하고, empty() 함수로 콘텐트를 삭제하고, remove() 함수로 엘리먼트를 삭제하고, wrap() 함수를 사용하여 또 다른 엘리먼트로 엘리먼트를 래핑한다.

DOM을 트래버스 함으로써 jQuery 객체의 콘텐트를 변경할 때 여러 함수들을 사용할 수 있다. 엘리먼트의 siblings(), parents(), children()을 사용할 수 있다. 또한, next() 또는 prev() sibling 엘리먼트도 선택할 수 있다. 아마도 가장 강력한 것은 find() 함수일 것이다. jQuery 셀렉터를 사용하여 jQuery 객체의 엘리먼트 종속 관계들을 통해 검색할 수 있다.

이 함수는 end() 함수와 사용될 때 더욱 강력해진다. 이 함수는 실행 취소 함수와 비슷하고, find() 또는 parents() 또는 다른 트래버싱 함수들을 호출하기 전에 가졌던 jQuery 객체로 돌아간다.

메소드 체인과 함께 사용되면, 복잡한 연산도 단순하게 보이게 할 수 있다. Listing 7은 로그인 폼을 찾고 이와 관련한 여러 엘리먼트를 조작하는 예제이다.

Listing 7. DOM의 트래버스와 조작

                
$('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?');
    });

믿을 수 있는지 모르겠지만, 이 예제는, 공백을 사용한 하나의 연결된 코드 라인일 뿐이다. 우선, 로그인 폼을 선택했다. 그리고 나서, 이 안에 선택 레이블을 찾고, 이들을 숨긴 다음, end()를 호출하여 폼으로 돌아가게 하였다. 패스워드 필드를 찾았고, 보더를 빨간색으로 한 다음, 다시 end()를 호출하여 폼으로 돌아갔다. 마지막으로, 제출 이벤트 핸들러를 폼에 추가했다. 여기에서 특히 재미있는 부분은 jQuery가 모든 쿼리 연산들을 최적화 하기 때문에, 여러분은 모든 것이 서로 잘 연결될 때 엘리먼트를 두 번 찾을 필요가 없다.

공통 이벤트 핸들링은 click(), submit(), mouseover() 같은 함수를 호출하고 여기에 이벤트 핸들러 함수를 전달하는 것만큼 단순하다. 게다가, bind('eventname', function(){})을 사용하여 커스텀 이벤트 핸들러를 할당하는 옵션도 있다. unbind('eventname')를 사용하여 특정 이벤트를 제거하거나, unbind()를 사용하여 모든 이벤트를 제거할 수 있다. 이것과 기타 함수들을 사용하는 다른 방법들은, jQuery 애플리케이션 프로그램 인터페이스(API) 문서를 참조하라. (참고자료)

jQuery 셀렉터의 힘 활용하기

#myid 같은 아이디 또는 div.myclass 같은 클래스 이름으로 엘리먼트를 선택한다. 하지만, jQuery는 하나의 셀렉터에서 거의 모든 엘리먼트 조합을 선택할 수 있도록 하는 복잡하고도 완벽한 셀렉터 신택스를 갖고 있다.

jQuery의 셀렉터 신택스는 CSS3과 XPath에 기반하고 있다. CSS3과 XPath 신택스를 더욱 잘 안다면, jQuery 사용이 더욱 수월해진다. CSS와 XPath를 포함하여 jQuery 셀렉터의 전체 리스트를 보려면 참고자료 섹션을 참조하라.

CSS3에는 모든 브라우저가 지원하지 않는 신택스가 포함되어 있기 때문에, 이를 자주 볼 수 없다. 하지만, jQuery에서 CSS3을 사용하여 엘리먼트를 선택한다. jQuery는 고유의 커스텀 셀렉터 엔진을 갖고 있다. 예를 들어, 테이블의 모든 빈 컬럼 안에 대시(dash)를 추가하려면, :empty pseudo-selector를 사용한다.

$('td:empty').html('-');

특정 클래스를 갖고 있지 않은 모든 엘리먼트를 찾는다면? CSS3은 이를 위한 신택스도 있다. :not pseudo-selector를 사용하는 것이다. 다음은 required의 클래스를 갖고 있지 않은 모든 인풋을 숨기는 방법이다.

$('input:not(.required)').hide();

또한, CSS에서처럼 다중 셀렉터를 콤마를 사용하여 하나로 연결시킬 수 있다. 다음은 이 페이지에서 모든 리스트 유형들을 동시에 숨기는 예제이다.

$('ul, ol, dl').hide();

XPath는 하나의 문서에서 엘리먼트를 찾는 강력한 신택스이다. CSS와는 다르며, CSS로 수행할 수 없는 몇 가지 일을 수행할 수 있다. 보더를 모든 체크 박스의 부모 엘리먼트에 추가하려면, XPath의 /.. 신택스를 사용할 수 있다.

$("input:checkbox/..").css('border', '1px solid #777');

가독성 있는 테이블을 만들려면, 다른 클래스 이름을 테이블의 모든 짝수 또는 홀수 행에 붙인다. 이를 다른 말로 테이블의 스트라이핑(striping)이라고 한다. jQuery를 사용하면 :odd pseudo-selector 덕택에 쉽게 수행할 수 있다. 아래 예제는 테이블의 모든 홀수 행의 백그라운드를 striped 클래스를 사용하여 변경한다.

$('table.striped > tr:odd').css('background', '#999999');

jQuery 셀렉터로 코드를 어느 정도 단순화 할 수 있는지를 보았다. 어떤 엘리먼트를 선택하든지 간에, 하나의 jQuery 셀렉터를 사용하여 이를 정의하는 방법도 찾을 수 있다.

플러그인으로 jQuery 확장하기

대부분의 소프트웨어와는 달리, jQuery용 플러그인 작성은 복잡한 API를 사용해야 하는 힘든 일이 아니다. 사실, jQuery 플러그인은 작성하기가 쉬워서 몇 가지만 작성하면 코드를 더욱 단순하게 유지할 수 있다. 다음은 여러분이 작성할 수 있는 가장 기본적인 jQuery 플러그인이다.

$.fn.donothing = function(){
    return this;
};

단순하지만, 이 플러그인은 약간의 설명이 필요하다. 우선, 함수를 모든 jQuery 객체에 추가하려면, 여기에 $.fn을 할당하고, 이 함수는 this (jQuery 객체)를 리턴하여 이것이 메소드 체인을 깨트리지 않도록 해야 한다.

이 예제를 기반으로 쉽게 구현할 수 있다. css('background')를 사용하는 대신 플러그인을 작성하여 백그라운드를 바꾸려면, 다음을 사용한다.

$.fn.background = function(bg){
    return this.css('background', bg);
};

css()에서 값을 리턴할 뿐이다. 이것은 이미 jQuery 객체를 리턴하기 때문이다. 따라서, 메소드 체인은 여전이 잘 작동한다.

여러분은 반복 작업이 있을 경우에 jQuery 플러그인을 사용하기 바란다. 예를 들어, 같은 일을 여러 번 수행하기 위해 each() 함수를 사용하고 있다면 플러그인을 사용해도 된다.

jQuery 플러그인을 작성이 쉽기 때문에, 여러분이 사용할 수 있는 것도 수백 가지나 존재한다. jQuery는 탭, 곡선형 코너, 슬라이드 쇼, 툴 팁, 날짜 셀렉터, 기타 여러분이 상상하고 있는 모든 것을 위한 플러그인이 있다. 플러그인 리스트는 참고자료 섹션을 참조하기 바란다.

가장 복잡하고 광범위하게 사용되는 플러그인은 Interface이다. 이것은 정렬, 드래그&드롭 기능, 복합 효과, 기타 복잡한 사용자 인터페이스(UI)를 핸들하는 애니메이션 플러그인이다. Interface가 jQuery를 위한 것이라면 Prototype에는 Scriptaculous가 있다.

또한 Form 플러그인도 대중적이고 유용하다. 이것으로 Ajax를 사용하여 백그라운드에서 폼을 쉽게 제출할 수 있다. 이 플러그인은 폼의 제출 이벤트를 하이재킹 하고, 다른 인풋 필드를 찾고, 이들을 사용하여 Ajax 호출을 구현하는 상황에 사용된다.

jQuery 이후의 삶

jQuery를 사용하여 할 수 있는 것의 표면적인 부분만 다루었다. jQuery는 기분 좋게 사용할 수 있고 새로운 트릭이나 기능도 자연스럽다. jQuery는 JavaScript와 Ajax 프로그래밍을 매우 단순화 시킬 수 있다. 새로운 것을 배울 때마다 코드는 더욱 단순해 진다.

jQuery를 배운 후에, 필자는 JavaScript 언어로 하는 프로그래밍에 재미를 발견했다. 지루한 부분은 알아서 처리되기 때문에, 필자는 중요한 코딩 부분에만 집중하면 된다. jQuery를 사용하게 되면서 지난날 for 루프를 작성하던 때는 거의 기억이 나지 않는다. 심지어, 다른 JavaScript 라이브러리를 사용할 생각도 거의 하지 않는다. jQuery는 JavaScript 프로그래밍 방식을 진정으로 바꿔 놓았다.

교육

한국 developerWorks XML 존: 한국 developerWorks XML 존에서 XML 관련 자료를 더 볼 수 있다.
jQuery API 문서
jQuery 튜토리얼
Visual jQuery: jQuery API 레퍼런스.
IBM XML 인증: XML 분야의 IBM 인증 개발자에 도전하십시오.
XML 기술 자료: 한국 developerWorks XML 존에서 다양한 기술 자료, 팁, 튜토리얼, 표준, IBM Redbook 참고하기.

제품 및 기술 얻기

jQuery: jQuery 메인 사이트를 방문해 소프코드 다운로드 하기.
Selectors: CSS3과 XPath 셀렉터를 포함하여 jQuery에 사용되는 모든 셀렉터들.
jQuery 플러그인
Interface
Form 플러그인

토론

jQuery 블로그: : 공식 jQuery 블로그에서 정규 뉴스와 업데이트 확인하기.
XML 존 토론 포럼

Ajax를 사용하여 웹 애플리케이션에 "인스턴트" 기능을 빌드하는 방법 학습하기

Jesse Skinner는 JavaScript와 CSS 전문 프리랜스 웹 개발자이다. 캐나다와 독일이 주 활동 무대이며, CSS 브라우저 호환성 미스터리를 풀고 있다. Jesse에 대해 더욱 알고 싶거나 웹 개발에 대한 글을 더 읽고 싶다면, 블로그 The Future of the Web를 방문해 보라.

[스크랩 ] PHP, XML, jQuery로 순간 검색 만들기

2012-02-05T23:42:23+09:00

http://www.ibm.com/developerworks/kr/library/x-instsearch/#N1007D

순간 검색(Instant)으로 시작하기

자주 사용하는 약어

Ajax: Asynchronous JavaScript + XML
CSS: Cascading Stylesheets
DOM: Document Object Model
HTML: HyperText Markup Language
JSON: JavaScript Object Notation
UI: User Interface
URL: Uniform Resource Locator
XML: Extensible Markup Language

입력하는 동안 결과를 보여주는 새로운 검색의 항샹 기능인 Google의 순간 검색(Instant) 기능은 수많은 논쟁을 불러일으켰고, 그 원인이 무엇인지는 쉽게 알 수 있다. 결과를 얻기 위해 시작하는 일은 입력만 하면 된다. 결과를 보기 위해 Enter 키를 누른 후 검색을 수정하고 Enter를 다시 누를 필요가 없다. 입력하는 동안 바로 나타난다. 아직 해 본 적이 없다면 한 번 시도해 보자. 그렇게 작은 변화로 유용성 면에서 엄청난 차이가 날 수 있다는 것은 놀라운 일이다.

순간 검색 기능의 이러한 유형에 대해 훌륭한 점은, 특히 jQuery(참고자료 참조)와 같이 훌륭한 클라이언트측 도구를 사용할 때에 구현하기에 간편하다는 점이다. 이 기사에서는 간단한 검색 엔진을 빌드하기 위한 프로세스를 따른 후에 그 엔진에 대해 인스턴트 검색 사용자 인터페이스를 빌드한다.

검색하는 데이터를 받으면서 모든 일이 시작된다.

데이터 설정하기

이 기사를 위해 The Simpsons(심슨 가족)의 방송분들을 검색하기로 결정한다. The Simpsons 방송분, 제목, 시즌, 방송분 번호, 방영 날짜 및 방송분 요약이 모두 들어있는 XML 파일(소스 다운로드에 포함됨)을 모았다. 목록 1에서 XML의 일부분을 볼 수 있다.

목록 1. XML 데이터 소스

<?xml version="1.0" encoding="UTF-8"?>
<episodes>
  <episode title='Simpsons Roasting on an Open Fire' episode='1' season='1' 
  aired='17 December 1989'>
     Christmas seems doomed for the Simpson family when Homer receives no
    Christmas Bonus. Homer becomes a mall Santa Claus, hoping to make money and
    bring Marge, Bart, Lisa, and baby Maggie, a happy holiday.
  </episode>
   ...
</episodes>

실로 엄청나게 큰 파일로서 용량이 840K 정도가 된다. The Simpsons가 22년이라는 놀라울 정도로 긴 시간 동안 지속되었으므로 당연한 결과이다.

다음으로 할 일은 XML 구문 분석과 검색을 수행하는 PHP 클래스를 쓰는 것이다. 이 클래스의 이름은 Simpsons이며, 목록 2에 있다.

목록 2. Simpsons 검색 클래스

<?php
class Simpsons {
 private $episodes = array();
 public function __construct() {
   $xmlDoc = new DOMDocument();
   $xmlDoc->load("simpsons.xml");
 foreach ($xmlDoc->documentElement->childNodes as $episode)
   {
     if ( $episode->nodeType == 1 ) {
      $this->episodes []= array( 
      'episode' => $episode->getAttribute( 'episode' ),
      'season' => $episode->getAttribute( 'season' ),
      'title' => $episode->getAttribute( 'title' ),
      'aired' => $episode->getAttribute( 'aired' ),
      'summary' => $episode->nodeValue );
     }
   }
 }
 public function find( $q ) {
   $found = array();
   $re = "/".$q."/i";
   foreach( $this->episodes as $episode ) {
     if ( preg_match( $re, $episode['summary'] ) || 
        preg_match( $re, $episode['title'] ) ) {
     $found []= $episode;
   }
   }
   return $found;
 }
}
?>

클래스에 대한 생성자는 PHP에 표준이 되는 XML DOM 라이브러리를 사용하여 방송분 정보의 XML 파일을 읽는다. 루트 노드의 모든 하위를 통해 반복되어, 시즌, 제목, 방영 날짜 및 방송분 속성과 요약이 들어있는 노드의 텍스트를 추출한다. 그러면 그러한 모든 데이터를 방송분 배열에 해시 테이블로 추가하였으며, 이는 멤버 변수이다.

find 함수가 제목과 요약에 일치하는 간단한 정규식을 사용하여 일치하는 것을 찾도록 방송분 목록을 검색한다. 일치하는 방송분이 있으면 배열에 추가되며, 그러면 호출자에게 리턴된다. 배열이 공백이면 일치하는 것을 찾을 수 없는 것이다.

그 데이터를 가지고 취하는 다음 단계는 순간 검색 UI가 데이터를 검색하도록 호출하는 Ajax 응답자를 빌드하기 시작하는 것이다.

Ajax 응답 페이지 작성하기

UI의 첫 번째 버전은 Ajax 요청에 대해 HTML 응답을 사용한다. 이 접근방식은 순간 검색 UI를 구현하는 가장 간편한 방법이다. 순간 검색 UI 웹 페이지는 그 검색 용어를 취하여 그 용어를 사용하는 서버로 Ajax 요청을 작성한다. 그러면 서버는 응답을 구성하는 HTML 블록을 포맷하고 이를 페이지로 다시 보낸다. 순간 검색 UI 웹 페이지에서 코드는 하나의 간편한 호출로 페이지의 일부를 업데이트된 HTML로 바꾼다.

기사의 뒤 부분에서 서버로부터의 하나의 XML 응답과 하나의 JSON 응답을 사용하여 시연하지만, 지금은 간단히 하기 위해서 HTML 버전으로 시작할 것이다.

첫 번째로 필요한 것은 HTML 응답 페이지이다. 이 페이지는 요청에서부터 쿼리 문자열을 취한다. Simpsons 클래스를 호출하는 문자열을 사용하여 방송분들을 검색한다. 그 후에 HTML로 리턴되는 방송분 배열을 포맷한다. 이에 대한 코드는 목록 3에 있다.

목록 3. HTML Ajax 응답 페이지

<?php
include 'Simpsons.php';

$s = new Simpsons();
$episodes = $s->find( $_REQUEST['q'] );
if ( count( $episodes ) == 0 ) {
?>
No results found
<?php	
} else {
?>
<table>
<?php foreach( $episodes as $e ) { ?>
<tr><td class="episode"><b><?php echo( $e['title'] ) 
?></b> - 
 Season <?php echo( $e['season'] ) ?> 
 Episode <?php echo( $e['episode'] ) ?> - 
 Aired on <?php echo( $e['aired'] ) ?></td></tr>
<tr><td class="summary"><?php echo( $e['summary'] ) 
?></td></tr>
<?php } ?>
</table>
<?php
}
?>

목록 3의 맨 위에 Simpsons 클래스가 포함된다. 코드는 그의 새 인스턴스를 작성하고 찾기 호출을 한다. 그러면 응답이 공백인 것처럼 보이며, 그러한 경우 "No Results Found(결과를 발견할 수 없음)"을 리턴한다. 그렇지 않으면 이는 결과를 루프하고 결과의 테이블을 함께 모은다.

페이지를 테스트하려면 간단히 웹 브라우저로 이동하여 그 페이지를 요청한다. 그림 1에서 출력을 볼 수 있다.

그림 1. HTML Ajax 응답 페이지

이제는 순간 검색 UI 빌드를 시작하기 위해 필요한 것이 모두 마련되었다.

순간 검색 UI 빌드하기

JavaScript jQuery 라이브러리를 사용하여 순간 검색 UI를 놀라울 정도로 간편하게 빌드한다. 목록 4를 살펴보면 필자가 말하는 것을 확인할 수 있다.

목록 4. HTML 응답을 사용하는 순간 검색 페이지

<html><head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Instant Search - HTML Based</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<div id="results">
</div>
<script>
$(document).ready(function() {
$('#term').keyup(function() {
  $.get('search_html.php?q='+escape($('#term').val()), function(data) {
    $('#results').html(data);
  } );
} );
} );
</script>
</body>
</html>

출력이 보기 좋도록 목록 4의 페이지의 맨 위에 jQuery 라이브러리 및 CSS 스타일시트가 포함된다. 페이지의 본문은 검색 용어에 대한 입력 필드와 출력을 보유하는 결과 div가 포함된다.

다량의 작업이 페이지의 맨 아래에서 JavaScript 섹션에서 수행된다. 이는 문서에서 ready 함수를 호출하여 시작된다. 이 호출은 페이지가 준비될 때까지 내부 JavaScript가 실행되지 않도록 보장한다. 내부 JavaScript는 검색 용어 필드에서 키 누름을 모니터하는 검색 용어 입력 오브젝트에서 keyup 함수를 사용한다. 텍스트 필드가 변경될 때에 Ajax get 메소드가 서버로 호출된다. 그리고 그 호출로부터의 데이터 응답은 html 함수를 사용하여 결과 요소를 입력하는 데 사용된다.

JavaScript 코드가 행 노이즈(noise)처럼 보여도 괜찮다. 코드가 선을 넘어 이동해야 하기 때문에 코드 크기를 작게 유지하는 것이 최선이므로 실제로는 JavaScript를 사용하는 최첨단이다.

jQuery 라이브러리 없이 이 모든 작업을 수행할 수 있지만, 라이브러리 사용의 값은 코드가 간결하고 모든 크로스 플랫폼 작업이 사용자를 위해 수행된다. Internet Explorer® 대 Safari 또는 Firefox에 대해 걱정하지 않아도 된다. 코드를 한 번 쓰기만 하면 이는 어디서나 작동한다.

라이브러리를 테스트하기 위해 웹 브라우저에 순간 검색 UI를 도입한다. 그림 2에서 이와 같은 내용을 볼 수 있다.

그림 2. 검색 용어에 입력된 몇 개의 문자들

그림 2는 몇 개의 문자들을 입력한 후의 인터페이스를 보여준다. "frink"라는 용어의 입력을 완료한 후에 그림 3에 결과가 표시된다.

그림 3. 용어를 완성한 후

그림 3은 두 개의 방송분들의 제목이나 시놉시스에 표시되는 "frink"를 보여준다. 데이터가 이렇게 멍청하다니! Frink 교수(아직까지 이 프로그램에서 최고의 인물)는 두 개의 방송분들보다 훨씬 많이 나온다. 그러나 이는 여전히 매우 좋은 재료이다. XML의 840K에 서버 코드 구문 분석까지도 로컬 시스템에서의 응답 시간은 훌륭하다.

이제는 각 키 입력과 실제로 요청할 때와의 사이에 지연을 넣어 요청의 수를 조절하려 할 수 있다. 이를 수행하기 위해 업데이트된 코드는 목록 5에 있다.

목록 5. 지연된 HTML 응답을 사용하는 순간 검색 페이지

<html><head>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="jquery-1.4.2.min.js"></script>
<title>Instant Search - HTML Based With Delay</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<div id="results">
</div>
<script>
delayTimer = null;

function getResults() {
  $.get('search_html.php?q='+escape($('#term').val()), function(data) {
    $('#results').html(data);
  } );
  delayTimer = null;
}

$(document).ready(function() {
$('#term').keyup(function() {
  if ( delayTimer )
     window.clearTimeout( delayTimer );
  delayTimer = window.setTimeout( getResults, 200 );
} );
} );
</script>
</body>
</html>

이 코드는 사용자가 키를 누를 때에 타이머를 작성한다. 그 타이머가 200밀리초 이후에 꺼지면 요청이 작성된다. 타이머가 꺼지기 전에 한 번 더 키 입력을 수행하면 원본 타이머가 취소되고 새 타이머가 작성된다. 결과는 사용자가 입력을 중지한 지 200밀리초 후에 꺼진다. 인터페이스는 여전히 원본과 같이 깔끔하게 보이지만, 특히 사용자가 빠르게 입력할 때에 서버로 작성되는 요청의 수가 엄청나게 줄어든다.

거기에서 중지할 수도 있지만, 이 인스턴트 프로세스를 수행하기 위해 실제로는 방법이 두 개 더 있다.

XML로 마이그레이션하기

첫 번째 방법은 서버에서 클라이언트로 전송 구문으로 XML을 사용하는 것이다. 이 생각은 어느 프로세스나 쿼리를 만들기 위해 사용할 수 있고 클라이언트가 XML을 읽고 원하는 방식으로 포맷할 수 있을 정도로 영리하여 일반 XML 엔드포인트를 서버가 제공한다는 것이다.

XML에 대해 변경하려면 먼저 새 서버 페이지를 목록 6과 같이 작성한다.

목록 6. XML Ajax 페이지

<?php
include 'Simpsons.php';

header( 'Content-type: text/xml' );

$s = new Simpsons();
$doc = new DOMDocument();
$root = $doc->createElement( 'episodes' );
$doc->appendChild( $root );
foreach( $s->find( $_REQUEST['q'] ) as $episode ) {
   $el = $doc->createElement( 'episode' );
   $el->setAttribute( 'title', $episode['title'] );
   $el->setAttribute( 'episode', $episode['episode'] );
   $el->setAttribute( 'season', $episode['season'] );
   $el->setAttribute( 'aired', $episode['aired'] );

   $tn = $doc->createTextNode( $episode['summary'] );
   $el->appendChild( $tn );

   $root->appendChild( $el );
}
print $doc->saveXML();
?>

검색은 정확히 똑같이 유지되지만 결과를 포맷하는 방법은 변경된다. 이제 코드는 XML 문서를 작성하고 리턴된 모든 데이터를 보유하는 노드를 이에 추가한다. 그 후에 스크립트의 끝부분에서 문자열로 XML DOM을 간단히 저장한다. 스크립트의 맨 위에 HTML이 아니라 XML을 내보낸 대로 콘텐츠 유형을 text/xml로 설정한 것도 참고하자.

웹 브라우저에서 이 페이지로 탐색하면 그림 4와 같은 모양을 볼 수 있다.

그림 4. XML 응답 페이지

일부 브라우저는 그럼에도 불구하고 조금 더 구조화된 방식으로 리턴된 텍스트를 보여줄 수 있다. 원본 소스 XML을 보려는 경우 그림 5의 창과 같은 모양을 보기 위해 View - Source를 선택할 수 있다.

그림 5. XML 응답 페이지 소스

확인한 대로 스크립트가 어느 정도 훌륭하게 포맷된 XML을 작성하여 클라이언트측 코드의 새 조각으로 사용할 준비가 되었다.

HTML을 직접 사용하는 것이 아니라 XML을 구문 분석하는 새 클라이언트측 코드는 목록 7에 있다.

목록 7. XML을 사용하는 순간 검색 페이지

<html><head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Instant Search - XML Based</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<table id="results">
</table>
<script>
$(document).ready( function() {
$('#term').keyup( function() {
 $.get('search_xml.php?q='+escape($('#term').val()), function(data) {
html = '<table id="results">';
$(data).find('episode').each( function() {
     var ep = $(this);
         html += '<tr><td class="episode"><b>'+
         ep.attr('title')+'</b>&nbsp;';
         html += 'Season '+ep.attr('season')+'&nbsp;';
         html += 'Episode '+ep.attr('episode')+'&nbsp;';
         html += 'Aired '+ep.attr('aired')+'</td></tr>';
         html += '<tr><td class="summary">'+
         ep.text()+'</td></tr>';
   } );
   html += '</html>';
   $('#results').replaceWith( html );
 } );
} );
} );
</script>
</body>
</html>

키 입력을 모니터하고 Ajax 요청을 작성하는 클라이언트 코드는 거의 비슷하다. 차이점은 HTML 데이터가 아니라 XML 데이터를 받는 다른 URL이다.

데이터를 받은 후 코드는 jQuery를 사용하여 모든 방송분 태그를 찾는다. 그러면 이는 XML의 많은 부분을 포맷하고 replaceWith 함수를 사용하여 이전 테이블을 새 것으로 바꾼다. jQuery로 인해 이 코드는 브라우저의 네이티브 DOM 함수를 사용하는 것보다 사용하기에 훨씬 더 간편하다.

데이터를 전송하는 또 다른 방법은 JSON(JavaScript Object Notation)을 사용하는 것이다.

JSON으로 마이그레이션하기

JSON은 Web 2.0 세상에서 데이터를 이동하는 가장 대중적인 방법이다. 리턴된 JavaScript 코드를 평가하는 일만 하면 되기 때문에 브라우저가 읽기에 간결하고 간편하며 신속하다. 이는 또한 목록 8에서 Ajax 검색 페이지의 JSON 버전에서 확인한 대로 JSON을 작성하기에도 매우 간편하다.

목록 8. JSON Ajax 페이지

<?php
include 'Simpsons.php';

header( 'Content-type: application/json' );

$s = new Simpsons();
print json_encode( $s->find( $_REQUEST['q'] ) );
?>

리턴된 배열을 JSON 코드로 변환하기 위해 json_encode 함수만 사용해야 한다. 궁금하면 JSON을 PHP 기본 유형으로 다시 변환할 수 있는 json_decode 함수도 있다. 대부분의 대중적인 언어는 기본 데이터 구조와 JSON 간에 변환하기에 이만큼 간편한 JSON 메커니즘이 있다.

브라우저에서 JSON 페이지를 살펴보면 그림 6의 응답 페이지와 비슷한 모양을 볼 수 있다.

그림 6. JSON 응답 페이지

이 페이지는 육안으로 보기에는 좋아 보이지 않지만, 브라우저의 JavaScript 인터프리터가 이 페이지를 읽기에 매우 간편하다.

JSON 포맷된 출력을 읽는 해당 순간 검색 UI 웹 페이지 코드는 목록 9에 있다.

목록 9. JSON 순간 검색 UI

<html><head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Instant Search - JSON Based</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<table id="results">
</table>
<script>
$(document).ready( function() {
$('#term').keyup( function() {
 $.get('search_json.php?q='+escape($('#term').val()), function(data) {
   html = '<table id="results">';
   $.each( data, function( ind, ep ) {
         html += '<tr><td class="episode"><b>'+ep.title+'</b>&nbsp;';s
         html += 'Season '+ep.season+'&nbsp;';
         html += 'Episode '+ep.episode+'&nbsp;';
         html += 'Aired '+ep.aired+'</td></tr>';
         html += '<tr><td class="summary">'+ep.summary+'</td></tr>';
   } );
   html += '</html>';
   $('#results').replaceWith( html );
 } );
} );
} );
</script>
</body>
</html>

이 코드는 리턴된 배열에서 jQuery each 함수를 사용한 후에 점(dot) 노테이션을 사용하여 데이터의 모든 중요한 키(즉, 제목, 방송분, 요약 및 기타 등등)에 액세스할 수 있다는 차이점이 있지만 XML 코드와 매우 유사하다.

이제 자체적인 작업의 시작 지점으로 사용할 수 있는 순간 검색 기능의 기본적인 구현을 갖게 되었다.

덧붙이는 내용

이 구현에는 개발자들이 Google에서 수행한 것과 세 가지의 주요 차이점들이 있다. 첫 번째는 스케일링이다. 그들은 이미 하루에 수 십 억 개의 검색을 처리하고 있었고, 이제 각각의 키 입력으로 수 십 억개의 개별적인 작은 검색들을 처리하고 있다. 이와 관련하여 수많은 문제와 해결책이 있지만, 이 경우에 최소한 한 가지 잊지 말아야 할 사항은 바로 브라우저 캐시이다. 사용자가 동일한 용어를 두 번 입력하는 경우, 브라우저 캐시로 인해 하나의 요청만 실제로 수행되고, 두 번째로 요청되면 브라우저는 캐시된 데이터를 리턴하기 때문이다.

Google이 수행하는 또 다른 작업은 프리페치 결과이다. 예를 들어, "mov"를 입력하면 "movies"를 찾고 있다는 힌트를 얻고 검색을 수행하며, 누락한 "ies"는 회색 텍스트로 표시한다.

세 번째 차이점은 페이징을 지원하는 것이며, 이는 비교적 간편하게 해결된다. 페이지의 맨 아래에 페이지 링크에 대해 일부 JavaScript를 추가하고 사용자가 첫 번째 페이지에서부터 이후 페이지로 탐색하도록 클릭할 때에 그 스크립트를 호출하기만 하면 된다.

Google의 순간 검색 UI 기능은 정말 즉각적이다. 혁신적인가? 실제로는 아니다. 하지만 유용성의 심오한 결과가 들어있는 하나의 작은 단계이다. 이 기사에서 확인한 대로 작동의 기본은 XML, PHP 및 jQuery와 같이 표준 도구를 사용하여 구현하기에 어렵지는 않다.

자체적인 프로젝트에서 여기의 코드를 사용할 수 있기를 바란다. 그렇게 하는 경우에 알려주기 바란다. 이를 어떻게 사용하는지 살펴보고 싶다.

설명	이름	크기	다운로드 방식
Source code for article	src.zip	82KB	HTTP