[자바스크립트] 왜 jquery를 사용하는가?

* jquery는 정말로 편하고 좋은 라이브러리이다. 최적화도 잘되어있고 다양한 기능이 아주 쉽게 들어가있다. 하지만 자바스크립트 개발자라면 이 jquery의 활용에 대해서 고민을 해봤을수도 있고, 좋은 라이브러리라니까 가져다 쓰고 활용을 할수도 있을 것이다. 하지만 적어도 이유는 알고 사용하고, 사용을 안 한다면 왜 사용을 안 해야하는지에 대해서 고민을 해보자.

* 서론

: 자바스크립트를 숱하게 해오다가 처음으로 jquery라는 라이브러리를 대충 듣게 되고, 이것이 무엇인지도 모른체 지내다가 나중에 jquery를 처음 알게 되었을 때에는 너무나도 놀라웠다. 기존에 자바스크립트로 사용했던 DOM 탐색의 경우 끽해야 id 탐색, class 이름과 태그명으로 탐색했었는데 이러한 것들을 CSS 의 검색 스타일로 너무나 쉽게 적용을 해서 나타난 것이다.

document.getElementById("divId");
document.getElementsByClassName("className");
document.getElementsByTagName("input");

: 매번 document.getElement어쩌고 이러한 구문을 쓰고 있을 때에 떡하니 $ 이러한 요상한 문자 하나의 함수가 나타난 것이다. 그래서 위의 구문들을 이렇게나 간단하게 바꿔놓은 것이다.

$("#divId");
$(".className");
$("input");

: 허구헌날 document.getElement어쩌고 함수들을 치는 것이 귀찮았는데 너무나 간단하게 바꿔버린것이다. 게다가 CSS의 selector 규칙도 따라서 따로 어렵게 공부할 필요도 없었던 것이었다. 그래서 jquery를 사랑하기로 했다.

* jquery

: jquery는 아래의 사이트에서 말하길 가볍고, DOM 탐색이나 이벤트, 애니메이션, ajax등을 활용할 때 유용하게 사용할 수 있는 라이브러리라고 하고, 아래의 사이트에서 다운로드/API 문서를 확인할 수 있다.

http://jquery.com

로고도 쌈빡하다.

: jquery는 모질라 소속이었던 John Resig이 개발한 라이브러리로 현재 가장 인기 있는 자바스크립트 라이브러리 중 하나로 꼽히고 있다. jquery 자체에 대한 이야기를 많이 하지는 않을 것이니 아직 jquery를 한번도 접해보지 않은 사람이라면 위의 사이트를 방문해서 간단하게 둘러보는 것도 괜찮을 것이다. 사용은 안 하더라도 현재 제일 잘나가는 자바스크립트 라이브러리 중 하나인니까 소스를 다운 받아서 보는 것도 재미있을 것이다.

* jquery의 장점

: 그렇다면 jquery의 가장 큰 장점이 무엇이라고 생각하는가? jquery를 사용해본 사람이라면 단축된 문법이라던가 여러 가지 말을 하는 것보다는 '멀티 브라우져 지원'을 말할 것이다. 어느 브라우져에서나 동일하게 작동을 한다는 것은 자바스크립트 개발자로서는 너무나 매력적인 일이다. 특히 IE의 독자노선 행보로 인해 IE와 다른 브라우져들은 자바스크립트에서 지원하는 기능이 다르거나, 같은 기능이 있더라도 사용 방법이 다른 경우 jquery에서는 이것을 전부다 해결해준다는 것이 제일 큰 장점이라고 말할 수 있을 것이다.

jQuery 지원 브라우져: IE 6 지원! 이것만으로 말 다했다

: 멀티 브라우져에서의 ajax이용, 이벤트 설정, DOM 탐색이야말로 jquery의 핵심적인 기능인 것이다.

: 또 다른 장점은 바로 간단하게 이용할 수 있는 핵심 기능들을 포함하고 있다는 것이다. 다른 것보다도 아마 가장 많이 이용할 기능은 바로 toggleClass나 removeClass가 아닌가 생각한다. 일을 할 수 밖에 없게 되는 것을 toggleClass 하나로 해결하게 된 것이다. addClass는 그냥 += 을 이용하면 간단하게 해결되지만 제한된 상황이 아닌 용도에서 정규표현식을 잘 모르면 indexOf, replace, substring 등등 매우 복잡하고 무거운 함수를 만들어야 할 것이다.

: 특히, jquery-mobile을 이용해본 사람이라면 모든 모바일 단말에서의 똑같은 UI와 동작으로 인해 그 매력에 빠졌을지도 모른다. 단순히 attribute를 설정해주는 것만으로 UI들이 바로바로 적용되는 놀라운 기능들을 소개해주고 있다. 물론, 그 디자인을 보게 되면 너무나 투박하기 짝이 없기는 하지만 말이다.

jQuery mobile의 themeRoller: 마음대로 테마도 설정할 수 있다

: 모든 모바일에서 동일한 디자인이 적용된다는 것은 또한 아주 매력적인 장점이 될 수 있을 것이다.

: 그 외에도 클래스로 선택했을 경우 $("className").click() 와 같이 이용할 경우 forEach를 하듯이 모든 element에 속성 부여나 이벤트 부여를 쉽게 해줄 수 있다는 것이 매우 큰 장점 중 하나이다.

* jquery의 단점

: 하지만 언제나 만능은 없는 법. jquery도 단점은 있기 마련이다. 무엇보다도 jquery라는 라이브러리를 이용하기 위해 새로운 API를 학습해야한 다는 것이 큰 이슈일 것이다. 이는 jquery를 한번도 접해보지 않은 사람이 처음으로 jquery를 보고 겪게 되는 그 충격을 기억하고 있다면, 공감할 수 있을 것이다. 게다가 그것에 자바스크립트라는 언어를 잘 모를 때, 겉핥기 정도로 밖에 모를 때 이것은 큰 이슈일 것이다. 심지어는 jquery를 자바스크립트가 아닌 새로운 하나의 언어로 받아들이게 되는 지경이 될지도 모른다. (처음에 실제로 그렇게 느꼈었다. 이건 자바스크립트가 아닌것 같았다.) 게다가 API로 기존의 자바스크립트와는 상이하기 때문에 효과적으로 사용하기 위해서는 jquery API를 별도로 공부해야하기까지 한다.

: 뭐, 위의 단점은 충분히 극복이 가능한 단점이지만, jquery로 극복하지 못하는 아주 큰 단점이 하나 있다. 바로 퍼포먼스의 문제이다. 어플리케이션마다 다른 요구사항에 최적화를 하기 위해서는 직접 jquery를 파고 들어가야하는 경우도 있을지도 모른다. 물론 이러한 최적화는 라이브러리를 잘 구성해 놓은 jquery에서는 큰 고민이 아닐지도 모르지만, 그것보다도 더 큰 퍼포먼스의 문제는 32k나 되는 용량의 문제이다. gzip까지 했는데도 32k라는 용량을 왠만한 사이트 자바스크립트의 전체를 합친양 정도 될지도 모른다. 그런데 단순히 한두 기능을 사용하려고 jquery 전체를 가져오는 것은 너무나도 비효율적인 투자다.

32k를 투자할만한 가치가 있는지 판단하고 사용하자

: jquery의 $ selector는 document.querySelector와 document.querySelectorAll을 통해서도 충분히 구현이 가능하고, 멀티브라우져 ajax와 event 핸들러는 함수 몇가지만 이용하면 쉽게 구현이 가능하다. toggleClass와 removeClass 또는 regular expression을 이용하면 3~4줄이면 가능하다. 1k이면 충분히 해결하고도 남는 기능들만을 사용하기 위해 32배가 넘는 용량을 가져오는 것은 지양해야할 것이다. 또 다른 예로 document.getElementById 이런 구문 백번이면 될 간단한 자바스크립트를 $로 표현하기 위해 jquery를 가져오는 것은 배보다 배꼽이 커지는 실수인 것이다.

: 하지만 퍼포먼스가 그다지 필요하지 않은 웹페이지라면 이러한 단점들도 그다지 커지지는 않는다.

* 왜 jquery를 사용하는가?

: 그러면 다시 제목의 질문으로 돌아와서 왜 jquery를 사용하는가? 하는 질문을 하고 싶다. jquery를 쓰기 좋을 때는 멀티브라우져 지원, 이벤트+애니메이션+복잡한 CSS 변환+AJAX의 기능 모두를 다양하게 사용할 때, 그리고 위의 기능들을 구현할만한 시간적 여유가 없고 jquery에 대해서 이미 알고 있을 때. 그리고 무엇보다도 페이지가 퍼포먼스를 크게 요구하지 않고 사용자와의 인터렉션이 많지 않을 때 사용해야할 것이다.

: 그리고 반대로 자바스크립트에 대해 충분히 이해하고 jquery의 소스를 볼줄 안다면, jquery의 소스를 전부다 가져오는 것 보다는 일부 기능만 가져오거나 그 구현을 보고 자기만의 라이브러리를 만드는 것이 웹페이지의 퍼포먼스상 도움이 많이 될 것이다.

: 인터넷 속도가 1Gbps까지 올라가는 시대에 고작 32k를 가지고 퍼포먼스를 이야기하는 것도 웃긴 이야기지만, 이것은 http request가 하나 더 늘어난다는 점, 페이지의 구동이 느려진다는 점, 이후 최적화가 부족하다는 점이 완제품인 jquery를 가져오는 것의 단점이라고 말할 수 있다. 또한 중요한 것은 인터넷 속도 뿐만아니라 자바스크립트가 실행되는 브라우져 자체의 속도이기도 한데, 이것을 최적화하기 위해 jquery가 웹페이지의 목적에 맞게 튜닝이 되어있는지 뒤지는 것보다는 최적화된 자기의 라이브러리를 만드는 것이 훨씬 더 빠를 것이기 때문이다.

: 하지만 분명한 것은 jquery는 최적화가 잘 된 좋은 라이브러리이며 멀티브라우져 지원에 대해 고민할 필요를 없애주는 너무나 고마운 라이브러리라는 것이지만, 페이지의 궁극적인 목적에 따라 그 사용 여부를 조심스럽게 결정을 해야한다는 것이다.

끝.