Ajax - jQuery 에 대한 어떤이의 경험글

다음소프트 인턴십하면서 맡게된 업무는
jQuery 를 이용한, Ajax 를 사용하는 차트 UI 구성이다.

그럼 jQuery 가 대체 모냐... 알아보자.

The Write Less, Do More, JavaScript Library

jQuery 홈페이지의 타이틀이다.
jQuery 를 가장 잘 설명하는 문장인거 같다.
코드는 적게 쓰고, 더 많은 걸 해보자는거다. 몰로 ? 자바스크립트 라이브러리로.
jQuery 는 새로운걸 하는 것은 아니다.
(새로워 보이는건 있지만.. 내부를 뜯어보면 아예 새로운게 짠. 나타난건 아니다.)
기존에 자바스크립트로 하던 것들을 하는데 좀 편하게 해보자는거다.

모든지 개요를 살피기 전, 써볼까 말까 고민할 때는 결과물을 보면 된다.
쌈박한 결과물 하나 보자.

jQuery ThemeRoller

jQuery 를 사용한 ThemeRoller 다.
좀 있어 보이는 jQuery UI 들과 색상을 원하는대로 설정할 수 있는 기능이다.
jQuery UI 에서 사용하는 클래스 이름들을 사용한다면,
이 페이지에서 색상정보와 아이콘들을 바로 저장받아 덮어씌워서 사용만 하면 된다.
가끔 기분전환 하고플때, 전체 색상을 확 바꿔쓸 수 있다는거다. 일단 상당히 매력적 - 3-

UI 를 활용한 데모를 몇 개 더 보자.

Sortable 을 활용한 Layout
Draggable 과 Effects 를 활용한 PhotoManager

UI 로 너무 관심 끄는거 아니냐고 할 수 있겠는데...
그렇다.. 나는 이런거에 끌려서 시작했다... ㅜ_ㅜ

하지만 사용하면서 알게된 jQuery 의 매력은 UI 가 아니다.
물론 예쁜 UI 를 적은 코드로 구현할 수 있다는 것도 매력이지만,
실제 Library 소스를 열어보면....
자바스크립트로 하던 노가다를 예쁘게 잘 정리해서 제공하고 있기에 가능한 것이다.
jQuery 홈페이지에 있는 개발팀에게 기부를~!! $10~!!!.... 버튼에 손이 가도록 만드는 노고다... - ㅁ-;;

바로 이 잘 정리된 라이브러리 덕에..
예쁜 UI 구현도, 디버깅도 잘 안되는 노가다 스크립트 코딩도, 복잡한 Ajax 구현도...
쉽게 끝난다. - ㅁ-;;
더군다나 수많은 플러그인...
누군가 스크립트 코딩을 하다 생각난 반짝이는 아이디어들...
이런거 괜찮겠는데.. 혹은 이 노가다 짓을 해야 하나... 라는 생각이 들 때마다..
플러그인을 찾아보면 대부분 있다.
나와 같은 생각을 나만 하는게 아니기에.. 친절하게도 잘 만들어서 올려주시고 있다.

실제 코드로 얘기해보자.
(tistory 내 본문에 jQuery 함수를 어떻게 추가할 수 있을까 ;;)

jQuery 예제 1

누구나 써 본적이 있을것 같은...
select box 내에 값 이리저리 옮기기.
jQuery 를 사용하면 다음과 같이 끝난다.

$('#addButton').click(function(){
    $('#selectBoxLeft option:selected').remove().appendTo($('#selectBoxRight'));
});

$('#removeButton').click(function(){
    $('#selectBoxRight option:selected').remove().appendTo($('#selectBoxLeft'));
});

addButton 이라는 ID 를 가진 엘레먼트를 클릭하면,
selectBoxLeft 라는 ID 를 가진 엘레먼트의 선택된 값을 없애고, selectBoxRight 에 붙이겠다는 것.
removeButton 은 그 반대다.

$ 는 jQuery 의 강력한 seletor 기능으로 문서내에 존재하는 각종 엘레먼트들을 얻어온다.
사용할 수 있는 값은 다음과 같다.

#id - 문서에 처음 나타나는 하나의 엘레먼트. $("#addButton") - id 가 addButton 인 엘레먼트
element - 이름이 element 인 문서에 있는 모든 엘레먼트. $("a") - 문서에 있는 모든 a 태그
.class - 클래스 이름이 class 인 모든 엘레먼트. $("buttonPanel") - buttonPanel 클래스를 사용하는 모든 엘레먼트

jQuery API 를 정리하겠다는건 아니니 이정도로만 하겠다.
이 외에도 combine 과 chaining 이 가능해 상당히 코드가 줄어드는 효과가 있다.

제일 간단한 Ajax 사용 예를 보자.

$('#fragment-1').load(
    "http://www.jfree.org/jfreechart/samples.html",
    null,
    function() {
        $('#menu-home-tabs ul').tabs("enable",0);
    }
);

fragment-1 이라는 id 를 가진 부분에 위 주소를 로딩하고, 로딩이 끝나면 tab 을 활성화시킨다는 코드다.
아래 사용예를 클릭해보면 동작을 확인 할 수 있는데,
fragment-1 이 메인메뉴 중 Home 에 해당하는 부분이다.
처음 리프레시를 시키면 Home 부분이 비활성화 되어 있다가, 잠시 뒤에 활성화 되면서 이미지 파일을 읽어오는 것을 볼 수 있다.

간단한 Ajax 사용예

null 로 주어진 파라미터는 인자를 넘기는 값으로 문서내 값들을 넘길 수 있다.
더 상세한 Ajax 사용은 jQuery API - Ajax 를 참고하기 바란다.

위 사용예제는 jquery, jquery.ui, treeview 를 사용하여 만든 것으로
디자인만 보기 위한 prototype 이다. (라이브러리도 무조건 몽땅 읽어오고 있다 ;;)
색상구성은 ThemeRoller 에서 다운 받은걸 그대로 사용했다.
내부 동작 수정 후에 소스를 정리해서 컴포넌트 별로 누구나 따라하기 쉽게 css와 함께 올리도록 하겠다.
jQuery 예제들을 따라하며 불편한건 css 를 같이 안 올려줘서 예제를 따라해도 모양새가 안 나오는거였다 - _-;;

ps. jQuery 예제들을 본문에 바로 보여주고 싶은데.. 아시는 분 좀 알려주세요~
     html 편집으로 하니 일반 태그는 나오는데.. $(function(){}); 이게 안 먹네요;;