jQuery의 적절성 - 또 다른 시작

원문
Cody Lindley, https://www.telerik.com/blogs/jquerys-relevancy-there-and-back-again

역자 주
이 글은 최근 jQuery의 적절성에 대한 여러 의견에 대해 Telerik의 Front End 개발자 Cody Lindley가 작성한 의견에 대한 번역입니다. (Telerik은 유명한 WEB UI 컨트롤 개발사입니다)

글을 번역하며 생각보다 이 주제가 과열되어있다는 느낌을 받았습니다. 특정 문구에서 때에 따라 약간 공격적으로 보일 수 있는 부분도 있는데요. (글 내용은 jQuery는 적절하다는 내용입니다) 이런 논란은 jQuery만의 이야기는 아니라고 생각합니다. 맞고 틀리고의 관점이 아니라 양쪽의 주장을 듣고 한 번쯤 jQuery를 사용하는 것에 대해 생각해 보는 것도 좋을거 같습니다.

개인적으로 jQuery가 필요 없다는 글에 완전히 공감할 순 없다. 다만 개인적으로는 jQuery를 사용하는 것이 어떤 의미가 있는지 잊고 있었다는 생각이 들었다. 그래서 이 글을 통해 생각해보는 시간을 갖고자 한다.

나는 이 글을 통해 여러분들이 jQuery가 정확히 어떤 것인지 다시 한번 생각해 볼 기회가 되었으면 한다. 나는 jQuery가 개발 당시부터 지금까지 적절하지 않았던 적이 없다고 생각한다. jQuery의 적절성은 브라우저의 버그나 지원하지 않는 기능보다 jQuery 자체의 추상화된 DOM API 등의 기능에 있다. 잘 만들어진 jQuery의 추상화 기능을 굳이 사용하지 않을 이유는 없다. 어쨌든 사용하면 편하고 좋지 않은가.

jQuery의 적절성에 대해 깊게 이야기하기 전에 jQuery가 무엇이고 왜 사용하는지 생각해 보자.

jQuery?

jQuery는 ‘추상화’, ‘동등성’, ‘문제 수정’, ‘HTML 엘리먼트 조작의 단순화’에 초점을 두고 개발된 JavaScript 라이브러리이다.

조금 더 자세하게 설명하면:

• Document Object Model을 다루는 추상화 인터페이스이다.
• 이종 브라우저 간 다른 DOM 구현을 동등하게 만들어준다.
• 브라우저들의 알려진 CSS, DOM 버그를 신경 쓰지 않아도 되도록 도와준다.

종합하자면, 간단하게 쓸 수 있고, 버그를 줄여주고, Native API 대신 별도로 API를 제공하는 라이브러리가 된다.

위에 언급했던 ‘HTML 엘리먼트 조작’ 에 대해 이야기하자면, jQuery를 사용하면 HTML문서 내에 있는 두 번째 h2엘리먼트를 숨기는 동작을 아래의 코드만으로 정말 간단하게 해결할 수 있다.

jQuery('h2:eq(1)').hide();

위의 코드는 jQuery 메서드를 실행하며 문서 내의 두 번째 h2 엘리먼트를 찾도록 ‘custom jQuery CSS selector’ 를 전달했다. 그다음 jQuery의 hide()메서드를 실행해서 찾은 h2엘리먼트를 숨기도록 한 것이다. jQuery를 이용해서 간단하고, 의미상으로도 깔끔하게 표현되었다.

이제 jQuery를 사용하지 않고 native DOM API를 사용해서 같은 기능을 구현한 코드를 보자.

documet.querySelectorAll('h2')[1].style.setProperty('display', 'none');

어느 쪽을 선호하는가? 또는 어느 쪽이 좀 더 읽기 쉽고 디버깅하기 쉬운가? 아래의 코드가 모든 브라우저에서 사용할 수 있는 코드라고 한다면 어떤가? 사실 아래 코드의 querySelectorAll, setProperty 메서드는 지원하지 않는 브라우저가 있다.

그래서 IE8의 경우 jQuery 코드는 잘 동작하는 반면, native DOM 코드는 JavaScript 오류를 발생시킨다. 하지만 다시 한 번 생각해보자. 양쪽의 코드가 모든 브라우저에서 동작한다면 어느 쪽이 더 읽고 쓰기 쉬운가?

jQuery를 사용하면 브라우저의 지원 범위나 특정 브라우저의 DOM API 버그를 걱정하지 않아도 된다. 결과적으로 여러 고민할 필요 없이 결과물을 빨리 만들어 낼 수 있게 되는 것이다.

jQuery는 JavaScript가 아니다

jQuery가 많이 쓰이고 있으므로 JavaScript를 잊고 jQuery만을 생각하기도 한다. 많은 디자이너나 새 HTML/CSS 개발자들은 JavaScript 프로그래밍을 jQuery로 시작한다. 이런 식으로 그들은 가끔 jQuery와 JavaScript 자체를 혼동하기도 한다.

첫 번째로, jQuery와 JavaScript는 다르다는 것을 알아야 한다. (DOM API조차도 다르다) jQuery는 웹 개발자 커뮤니티에서 개발되고 유지되는 서드파티 오픈소스 라이브러리이다. 또한 jQuery는 W3C (HTML, CSS, DOM 명세를 제정하는 웹 기술 표준 조직)등에서 인정하는 표준 웹 기술도 아니다.

jQuery는 단지 가장 바깥 영역에서 native DOM API의 편의 문법을 제공한 다는 사실을 기억하자. 이런 편의 문법들은 DOM 조작 API가 역사적으로 가지고 있던 복잡한 버그들을 가리고 있을 뿐이다.

jQuery는 HTML 엘리먼트를 다룰 때 선택적으로 적용할 수 있는 라이브러리이다. 솔직히 말하면 대부분의 개발자는 단지 같은 기능을 더 적은 코드로 개발할 수 있으므로 선택하는 것이다.

많은 개발자가 jQuery와 jQuery플러그인을 사용하고 있고, 여러분들도 여러 사이트에서 jQuery가 자주 사용되는 스크립트의 상위에 있다는 것을 볼 수 있을 것이다.

jQuery의 두 가지 기본 컨셉

jQuery는 두 가지 기본 컨셉을 가지고 있다: “find something, do something” 과 “write less, do more.”

이 두 컨셉은 다음의 문장에서 자연스럽게 조합되고 또 설명되고 있다: jQuery의 첫 번째 비즈니스 요구사항은 DOM element를 선택하거나 만들고 무언가를 쉽게 하는 것에 있다, jQuery없이는 같은 기능을 더 많은 코드로 개발해야 하고, DOM에 대한 기본지식도 필요하다. 예를 들어 앞서 이야기했던 h2엘리먼트를 숨기는 과업처럼 말이다.

jQuery가 내가 개발한 내용보다 조금 더 많은 동작을 해 준다는 점이 포인트이다. 게다가 DOM 인터렉션의 추상화 기능뿐만 아니라 비동기 통신에 대한 추상화 기능도 제공하고 있고 그 외에도 여러 가지 문제에 대한 솔루션들도 제공하고 있다. 하지만 jQuery를 사용하는 주목적은 바로 HTML 스크립팅을 쉽고, 빠르고, 짜증 나지 않게 할 수 있다는 점이다.

중요한 점은 나는 단지 jQuery가 가지는 브라우저 버그 해결 솔루션 때문에 추천하지는 않는다는 점이다. 위의 두 기본 컨셉도 마찬가지이다. jQuery의 가치는 간결하고 좋은 DOM API 추상화 메서드에 있다고 생각한다.

jQuery가 모던 웹 개발에 딱 맞는 이유

jQuery는 거의 10년이 다 된 라이브러리이다. 우리가 10년간 개발할 동안 만들어지고 다듬어졌다. 사실 10년전엔 DOM을 다루거나 비동기 통신을 할 때 jQuery는 거의 필요하지 않았다. jQuery로 할 수 있는 일은 jQuery없이도 할 수 있다. 그리고 단지 한 두 브라우저나 간단한 DOM 인터렉션 메서드가 몇개 필요할때는 jQuery를 사용하지 않는 것이 훨씬 좋다.

하지만 BOM(Browser Object Model) 을 다루거나, 간단하지 않은 DOM조작을 해야 하는 경우에는 jQuery를 사용하는 것이 좋다. jQuery없이 이 일을 한다는 것은 바퀴를 개발하는것과 같은 일이며, 이 바퀴를 여러 지면 (브라우저를 뜻한다)에서 매번 테스트해야 하는 것과 같다.

실력있는 개발자들은 언제 잘 만들어진 라이브러리를 사용해야 하는지 아닌지를 알고 있다. 대부분의 경우 DOM을 조금 더 상세히 다뤄야 하는 명세를 따를 때는 jQuery를 사용하는 편이 좀 더 이치에 맞다.

심지어 jQuery가 특정 브라우저의 DOM 을 다루는 데 있어 이슈가 있고 이를 고치지 않는다고 해도 쉬운 DOM 스크립트 API라는 장점을 희석하지는 못한다.

jQuery를 사용하는 것은 적절하다. 문제를 완벽히 해결해 주는 것은 아니지만 DOM API에 대한 추상화 기능을 제공하기 때문이다.

그리고 이 장점은 개발자가 좀 더 영리하고 빠르게 개발할 수 있도록 도와준다. 이것은 명백한 사실이며 라이브러리의 시작부터 쭉 그래왔다. jQuery가 필요 없다는 이야기는 lo-dash나 underscore.js 가 필요 없다는 이야기, 아무것도 필요 없다는 이야기와 같다. 무언가가 필요하다는 이야기가 개발자를 평가하는 척도가 되지 않는다.

jQuery의 API 추상화 기능은 개발 코드의 복잡도를 충분히 줄일 수 있다. 이 이유로 나는 jQuery, lo-dash를 사용한다. 이 라이브러리들은 복잡한 일을 쉽게 할 수 있게 도와준다. (어디까지나 도와줄 때 까지만 이지만). jQuery를 사용하는것은 적절하다.

jQuery가 객관적으로 도움이 되지 않는다고 생각하는 것 때문에 jQuery가 부적절하다고 판단할 수 없다. 이것은 “CoffeeScript 또는 TypeScript” 이야기처럼 특정 개발자 그룹의 선호도의 차이이다. 당신은 둘 다 필요 없다고 할 수 있지만 그것을 선호하는 개발자는 있다. 같은 이야기로 우리는 HTML스크립팅을 위해 jQuery를 사용하지 않아도 되지만 수많은 개발자가 선호한다. 이 점은 jQuery를 사용하는 것이 적절한가에 대해 “그렇다.” 고 이야기하고 있다.

아직 모던 웹 개발에 jQuery를 사용하는 것이 걱정스럽다면 아래의 프리젠테이션을 볼 것을 권장한다. jQuery의 개발자가 이야기하는 모던 웹 브라우저의 진보와 상관 없이 jQuery를 사용해야 하는 사례에 대한 내용이다.

Making the Case for jQuery in a Browser Utopia - TJ VanToll

자 이제 일반적인 웹 사이트를 개발하는데 있어 jQuery를 사용하지 않기로 했다면 그 이유를 듣고 싶다. 코멘트로 남겨주길 바란다.

부록 - jQuery의 중요한 사실들

마지막 내용으로 jQuery에 대한 중요한 사실들에 대해 정리하고자 한다. 아마 몇 가지는 모르거나 jQuery의 시작 당시와는 달라진 부분이 있을 것이다.

jQuery는...

• John Resig 에 의해 2006년 8월 26일 만들어졌다. 슬로건은 “자바스크립트로 HTML을 다루는 방법의 진화”
• 오늘날 가장 유명하고 많이 사용되는 라이브러리이다.
• 무료이고 MIT라이센스를 가지는 오픈 소스 라이브러리이다.
• 두 가지 버전으로 제공된다. 1.x 버전은 IE6, 7, 8을 지원하고, 2.x 버전은 IE8 이하 버전에 대해 지원하지 않는다. 하지만 두 버전 모두 유지되고 있다.
• jQuery 2.x 압축 소스는 약 82kb 정도며, GZIP 압축 후 약 28k정도 된다.
• jQuery 1.x 압축 소스는 약 96kb 정도며, GZIP 압축 후 약 32k정도 된다.
• 소스 코드는 github에서 볼 수 있다.
• 소스를 받아 별도로 빌드해서 쓸 수도 있다.
• bower나 npm 을 통해 설치할수 있다.
• 공식 CDN을 가지고 있고 아무나 사용할 수 있다.
• 커스텀 플러그인을 쉽게 만들 수 있는 메서드를 제공한다.
• jQuery 플러그인 커뮤니티는 엄청 크다. 고퀄의 많은 상용 플러그인들도 구입할 수 있다.