한빛출판네트워크

제공 : 한빛 네트워크
저자 : 매튜 데이비드(Matthew David)
역자 : 이덕준
원문 : What is jQuery?

jQuery로 작업할 때 "jQuery는 무엇인가?"와 같이 뻔한 질문은 잊기 쉽다. 이 기사는 상사가 물어볼 때 jQuery가 무엇이고, 당신이 하는 일에 jQuery가 중요한 이유를 설명하는데 초점을 맞추었다.

jQuery는 웹 애플리케이션에 복잡한 상호작용을 자바스크립트를 이용해서 쉽게 추가할 수 있도록 해주면서 모든 유명 웹 브라우저에서 돌아가는 오픈소스 자바스크립트 라이브러리로 2006년 1월 존 레식(John Resig)이 발표했다. jQuery가 다양한(IE6-9, FireFox 1-4, Safari, Chrome, Opera 등등 손꼽을 수 없는) 브라우저를 지원한다는 것을 감안하면 이는 엄청난 위업이다.

jQuery는 대부분의 분야에서 그 기반에 자리하고 있으며 수 많은 개발자들이 이를 추종하고 있다. 상위 10,000개 인기 사이트 중 3,000개 이상의 사이트가 jQuery를 사용하는 것으로 추정되는데, 이는 jQuery가 현재 사용되는 가장 인기있는 자바스크립트 라이브러리임을 반증한다. jQuery가 이렇게 유명한 이유 중 하나는 웹 페이지에 적용하기가 아주 쉽기 때문이다. 웹 페이지에 다음 단 한 줄의 코드만 추가하면 jQuery를 돌릴 준비가 끝난다.

위 경로는 바로 구글이 호스트하는 버전의 jQuery를 가리킨다. 놀랍게도 이 자바스크립트 라이브러리의 압축된 "min" 버전의 경우에는 전체 크기가 단 24Kb에 불과하다. 그래서, 이걸로 무얼 할 수 있겠냐고? jQuery API 페이지(http://api.jquery.com)에 자세한 내용이 있지만, 아래에 요약하도록 하겠다.

• (XML의 진정한 비동기 제어를 위한) Ajax 도구
• DOM을 통한 CSS 제어
• 데이터 제어
• 시각 효과
• 일관된 이벤트 액션
• DOM 조작
• 속성
• 셀렉터
• 유틸리티

한 마디로, 이 작은 패키지 하나로 이렇게나 많은 것을 할 수 있다는 이야기다.

jQuery 웹 사이트에 존 레식의 "How jQuery Works"라는 훌륭한 튜토리얼이 있다. 아래는 직접 jQuery 라이브러리를 이용해서 자바스크립트를 작성한 예제이다. 여기에서 존의 예제를 사용하겠다. (고맙네 존, 읽고 있다면)

$(document).ready(function(){
    $("a").click(function(event){
      alert("jQuery ROCKS!");
  });
});

자, 이게 무슨 뜻인가? 첫번째 선언은 $ 부호이다. 이 $ 부호는 대체 뭔가? 그렇다, 이 $ 부호는 이 JS 라이브러리에서 메인 jQuery 객체를 참조하는 키워드 함수이다. 그래서 jQuery("a").click(function(event) 라고 쓰는 대신에 바로 그 $를 쓰면 된다. 장담컨데, 이는 피곤에 절어서 키보드를 두드리는 시간을 많이 줄여줄 것이다.

첫번째 괄호는 모든 웹 페이지와 이미지를 내려받았는지 체크하는 jQuery의 (document).ready 이벤트이다.

두번째 행에서 웹 페이지의 모든 "A" 앵커 엘리먼트에 함수를 더해준다. 앵커가 선택되면 경고창이 뜬다 (셋째줄 참조).

이를 테스트하기 위해, 다음 HTML을 코드 body에 추가한다.

Click me

어떠한 웹 브라우저에서 테스트하든지 동일하게 경고창이 뜰 것이다.

"jQuery를 쓰면 내가 짤 자바스크립트의 양이 줄어들거라고 말하지 않았는가, 그런데 나더러 코드를 짜라니! 이게 뭐가 좋은건데??"라고 생각할 수도 있다. 코드를 짜야하긴 하지만, jQuery를 이용하면 코드를 훨씬 덜 짜도 된다.

jQuery로 더 많은 일을 할 수 있는 방법이 또 있는데, 바로 플러그인을 사용하는 것이다.

플러그인은 폼 유효성 검사, 차트 도구나 정렬 가능한 표와 같은 추가 기능을 부차적인 JS 파일에서 제공하는 jQuery 라이브러리를 말한다. 현재 플러그인 목록은 http://plugins.jquery.com/ 에 있으며 그 블로그에서 플러그인에 대한 튜토리얼이 있다. 현재, jQuery용 플러그인은 1,000개를 넘는다.

플러그인에는 두 가지 종류가 있다는 것을 알게 될 텐데, 바로 코어 플러그인과 커뮤니티 플러그인이다. 코어 플러그인은 코어 프로젝트의 일부로 간주되는 jQuery의 확장이다. 가장 유명한 코어 플러그인은 탭, 아코디언 및 드래그 앤 드롭과 같이 다양하고 멋진 툴을 포함하는 사용자 인터페이스 플러그인인 jQuery UI이다. 마이크로소프트가 최근 부가적인 코어 플러그인인 템플릿, 데이터 링크와 글로벌리제이션(globalization)에 기여한바 있다.

마지막으로, jQuery는 코드를 쉽게 구조화하는 방법을 제공한다. 깔끔하고 잘 정리되어있으며 최적화 되어있다. 실제로, ASP.NET 이나 PHP로 개발하고 있는 당신의 어떤 MVC 프로젝트에든지 완벽히 잘 어울린다. (MVC는 도메인 로직과 사용자 인터페이스 구성요소를 분리시키는 패턴인 Model View Controller를 뜻한다.)

jQuery가 무엇을 하는지에 대한 짧은 설명은 여기에서 줄이겠다. 그렇지만 당신 상사에게 누가 뭐래도 꼭 해야하는 말은 아마도 이것일 것이다. "jQuery는 공짜입니다."