[2025-01-09] jQuery를 더 이상 사용하지 않는 이유

jQuery란?

jQuery는 javascript의 여러 문제점을 보완하기 위해 2006년 등장한 경량 자바스크립트 라이브러리이다.

당시의 javascript 만으로는 DOM을 조작한다거나, 이벤트를 처리한다거나, AJAX 요청을 한다거나, 자바스크립트로 애니메이션을 구현한다든지의 기능을 사용하기가 무척 까다로웠다.

또한 당시에는 IE와 여러가지 브라우저가 난립하던 시대였는데 브라우저마다 위의 것들의 동작 방식이 전부 달라 크로스브라우징이 매우 어렵던 시기였기도 하다.

아래에서 자세히 설명하겠지만 자바스크립트만으로 작성하면 매우 길어지는 코드를 제이쿼리는 달러사인 하나로만 압축시켜 혁신적인 코딩을 할 수 있게 해주는 편리한 라이브러리였다.

하지만 최근에는 제이쿼리의 사용이 거의 없다고 보면 되고, 심지어 모던 웹 생태계에서는 권장하지 않는다고도 한다. 그 이유가 무엇인지 살펴보겠다.

jQuery가 많이 사용되지 않는 이유

jQuery로 작성된 웹페이지는 아직도 많다. 그래서 유지보수를 위해 jQuery를 사용해야 하는 경우가 생길 순 있지만, 새로 만들어지는 서비스의 경우 jQuery를 사용하여 제작하는 경우는 많이 줄었다.

강의 현황만 봐도 그렇다. 초심자들을 계속해서 양성해내는 기관들과 강의에서도 jQuery는 언급만 하고 넘어가고 심도있게 다루지 않는다.

그 이유는 무엇일까?

1. 모던 브라우저의 발전

jQuery의 탄생은 자바스크립트의 복잡성과 브라우저의 미비한 기능 때문이었다. 하지만 자바스크립트도 계속해서 업데이트 되고 있고, 모던브라우저도 정말 많은 기능이 추가되고 있기 때문에 jQuery의 필요성이 많이 약해진 모습이다.

querySelector, fectch, addEventListener와 같은 기능을 자바스크립트만으로 브라우저에서 구동시키게 복잡함이 있었고, jQuery로 이를 구현하면 굉장히 짧은 문법으로 구현이 가능하였는데, 요즘에는 브라우저의 네이티브 기능으로도 제공하는 기능들이라 필요성이 많이 약해졌다.

예를 들어
과거에는 자바스크립트만으로 DOM 요소를 선택하려면 아래와 같이 선택자를 작성해야 했다.

var elements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++) {
  if (allElements[i].className === 'my-class') {
    elements.push(allElements[i]);
  }
}

my-class라는 클래스를 하나 선택하는데 저렇게 끔찍한 코드를 작성해야 한다니, 나는 좋은 세대에 태어난 것 같다는 생각을 해본다.
그러나 jQuery는 위 문법을 아래와 같이 축소시켜주었다.

$('.my-class');

이 달러사인 하나만으로 특정 DOM 요소를 선택할 수 있게 된 것이다. 쓰지 않을 이유가 없었을 것이라고 생각한다.

모던 자바스크립트를 배우는 독자라면 모던 자바스크립트에서는 이것을 어떻게 처리하는지 익히 잘 알고 있을 것이다.

document.querySelector('.my-class');
document.querySelectorAll('.my-class'); // 여러 요소 선택

querySelector를 활용해 이렇게만 작성하면 되기 때문에 jQuery를 익힐 필요가 없어진 것이다.

그리고 위에서 언급했던 이벤트 핸들링이나 ajax 요청 등은 오히려 jQuery보다 Javascript가 훨씬 간결하고 강력하다.

2. 프레임워크와 라이브러리의 대세화

어떻게 보면 가장 큰 이유가 아닐까 생각한다.

현재의 웹 생태계를 보면 React, Vue, Next, Angular 등의 프레임워크 또는 라이브러리가 지배적으로 점유하고 있다. 이런 프레임워크는 jQuery와는 다르게 컴포넌트 기반으로 설계되어 있어 복잡한 웹서비스의 경우 유지보수 하기가 훨씬 편리해졌다.

사용량의 통계는 굳이 말하지 않아도 이미 알고 있으실 거라 생각하고 넘어가겠다.

3. 성능 및 번들 크기의 문제

jQuery는 라이브러리의 크기가 상대적으로 크다. 현대의 웹 서비스의 가장 큰 특징은 성능 최적화에 있고, 이 때문에 Next.js가 다시 부상하게 된 것도 있는데 최적화에 불리한 jQuery가 현대의 웹 서비스에서 살아 남기는 힘들었을 것이다.

jQuery는 v3.x 버전 이후로는 압축 전 라이브러리의 크기가 280kb 정도 된다.
물론 이것을 통으로 사용한다기 보다 웹 최적화를 위해 필요한 만큼 압축해서 사용하겠지만 압축을 해도 60kb 가량 용량을 차지한다.

하지만 1번에서 언급했듯, jQuery에서만 사용 가능했던 것을 vanilla javascript로도 처리가 가능하니 굳이 라이브러리 로딩에 저런 용량을 사용할 필요가 없어지게 된 것이다.

물론 javascript의 fetch 함수는 강력하지만 실무에서는 ajax 요청에서 axios 정도의 라이브러리는 선택적으로 사용하기도 한다. 하지만 이것은 내가 좀 더 편하게 사용하기 위해 일부의 기능 정도만 라이브러리로 사용하는 것이라, jQuery를 통으로 사용하는 것보다는 훨씬 가볍다.

4. Javascript의 발전

jQuery의 등장은 Javascript 사용의 불편함 때문에 생겨난 것이었다. 하지만 Javascript도 ES6 문법이 도입되면서 대폭 발전했고, arrow function, template literals, async/await 등의 신문법이 도입되면서 그동안 복잡했던 사용이 정말 간결해졌다.

jQuery가 없더라도 vanilla javascript만으로도 충분히 웹 서비스를 편하고 간결하게, 그리고 유지보수가 쉽게 만들 수 있게 된 것이다. jQuery는 완전히 새로운 코드를 작성해야 하기 때문에 Javascript를 배운다 하더라도 새롭게 배워야 한다는 단점이 있다. 이것은 라이브러리의 어쩔 수 없는 특징이다. React.js가 이토록 사랑받을 수 있는 이유도 그 생태계의 방대함 때문인데 Javascript만으로 충분히 간결하게 웹 서비스를 개발할 수 있다면 jQuery를 새롭게 익혀가며 굳이 라이브러리를 사용할 필요가 없게 되는 것이다.

5. 사후 지원 미흡

위의 여러가지 이유로 jQuery는 시장에서 도태되고 있고 이러한 이유로 사후지원도 느리다.