[본문스크랩] JQuery

*출처 : Standard Magazine Forum ( http://forum.standardmag.org/viewtopic.php?id=1152)

 

물론 javascript library를 너무 믿고 과용하면 안된다는 우려의 소리도 들립니다만, 잘 사용하면 작업의 효율성도 높이고 또 웹 브라우저들 간의 호환성 걱정을 덜어내면서 사용자들의 사용성도 같이 올릴 수 있는 좋은 도구라고 생각합니다.

수 많은 여러 javascript library들 중에 제가 가장 마음에 들어하는 라이브러리로는 jQuery를 들 수 있습니다.
여러 잡다한 기능들로 너무 비대하지도 않고 핵심 기능들을 잘 갖추고 있는 라이브러리라고 생각됩니다. 물론 다른 필요한 기능들도 plugins 형태도 선택적으로 추가할 수도 있고, 또 만들어지는 plugin들은 정해진 특정 형식을 따르기 때문에 추가 적용하는 것도 이미 익숙할 것이라는 장점이 있습니다. 최근에 와서는 YUI Extensions Library(yui-ext)를 중간에서 중개자 역할을 하는 adapter를 통해 jQuery를 core library로 삼아서 쓸 수 있도록 하는 개발이 진행되고 있다는 소식도 들리고 있습니다.

jQuery 를 처음 접하면서 제일 먼저 마음에 들었던 것은 문법이 저한테는 간단하면서도 아주 자연스럽게 느껴지더군요. 예를 들어, 특정 elements에 접근할 때는 이미 친숙한 CSS(혹은 XPath) Selector들을 사용해서 익숙하게 접근할 수 있고, method들을 연속적으로 묶어서('chain') 사용할 수 있게 되면서 코드의 길이를 상당히 줄여주는 효과를 볼 수도 있답니다. 개발 문서도 다른 경쟁 라이브러리들 보다 잘 갖추어져 있는 듯 합니다. 그리고 Visual jQuery 1.1와 jQuery 1.1.2 API Browser도 잽싸게 참고할 때는 많은 도움이 되더군요. 이 곳에 가시면 jQuery 1.1 버전을 위한 Cheat Sheet도 받으실 수 있습니다. 덤으로, Mac 개발자들에게 친숙한 TextMate용 jQuery Bundle의 언급을 빼놓을 수 없겠군요. 이놈을 쓰면 손놀림이 무척 간소해지죠.

jQuery의 설계 철학(대부분은 Protytype과의 비교가 되어버렸지만)을 엿보고 싶으시면 개발자가 쓴 글을 읽어보시면 많은 참고가 되실 겁니다.
마지막으로 FireBug와 jQuery의 조합을 가지고 특정 웹 페이지를 맘대로 조작하는 bookmarklet을 만드는 과정을 담은 동영상도 맛보기 영상으로 적당할 듯 합니다.

 

============================================================================

* 아래는  댓글로 올라온 글을 갈무리한것입니다. (출처: jQuery 간단한 소개 및 prototype, yui와 간단 비교)

 

 

우선 jQuery에 대해 간단히 설명을 하자면,
prototype.js같은 javascript framework(혹은 library)종류중 하나인데, XPath 라는 것을 지원한다.
사실 jQuery하면 대표되는것이 XPath인데, 간단하게 설명하면..

$("/html/body//p")

이런거다 ㅎㅎ.

jQuery는 yui처럼 화려한 기능과, Demo를 제공하지 않는다. 이건 단점일 수 도 있겠지만 장점일 수 도 있다.
이를 다른말로 하면 가볍다라는 말로도 표현 할 수 있기 때문이다.
물런, yui도 원하는 js만 빼서 쓰면 되지만, 너무 많은 js 들이 있고, 어떤게 어떤걸 사용하고 호출하고..@_@; 완전 다단계다 ㅠ,.ㅠ
(물런 필자가 yui를 많이 안써봐서 그렇게 느끼는 걸 수 도 있다)

jQuery의 가벼움은 prototype.js 보다도 가볍다.
정말 딱 뼈다귀만 구현해놓은 Library라고 할 수 있다.
prototype.js처럼 class틱하게 코딩도 가능하다.

필자는 처음에

그럼 yui처럼 구현할려면 삽질해야 겠네..

라고 걱정했다. 하지만 이 걱정은 곧 접어야 했다. 왜냐면 수많은 Plugin들이 존재하고 자신이 필요로 하는 Plugin만 다운받아 적용하면 되기 때문이다.

jQuery의 Plugin이 많은 이유를 추측해보자면..
간단하고 직관적인 구성때문에, jQuery는 쉽게 사용할 수 있다.
그렇다 보니..당연히 많은 사람들이 사용하게 될 것 이고..
그럼 결국 필요에 의해 여러 종류의 Plugin들이 나오게 된것이 아닐까..?

그리고 기본적으로 jQuery 는 Compression 되어서 나오기 때문에, 더욱더 용량이 줄어든다.

prototype.js : 66,529 byte
jQuery.js : 20,975 byte

용량 jQuery의 압승~
하지만 prototype.js 은 Compression 을 안했기 때문에 불공정한 시합이었다.
그래서 prototype.js도 Compression 하고 난 후 용량을 비교해 보았다.
결과는 역시나 jQuery의 승리였다.

prototype.js : 27634 byte
jQuery.js : 20975 byte

jQuery의 단점은 수많은 Plugin들 중에 자신이 원하는것을 찾는다는게 쉽지 않다는 것정도..?
검색해보고 쓸만한거 직접 써보고, 아니면 다시 찾아보는 검증(?)작업, 일명 삽질을 해야 한다.
하지만 이것도 유익한 삽질이다.
이런식으로 여러 Plugin들에 대해 알아놓으면, 훗날 Plugin을 찾을때 좀 더 쉽게 찾을 수 있지 않은가?



총 정리를 하자면.

1. prototype.js 의 가벼움 보다 더욱 가볍다.
2. yui는 그 자체에서 골라내서 사용할 수 있고, jQuery는 뼈대만 가지고 살(Plugin)은 알아서 붙이는 형태.
   
3. XPath 라는 Selector가 재밌다.
4. 거기다 수많은 Plugin이 존재한다.
5. 물런 원하는 Plugin을 찾기 위해선 노가다를 좀 해야 한다.