jQuery, 이제 사용하면 안 될까요?

들어가며: jQuery 사용, 정답은 없습니다.

결론부터 말하면, 프로젝트에 사용하는 것이 좋다면 사용하시면 됩니다.

최신 기술이라고 해서 반드시 장점만 있는 것도 아니고, 오래된 기술이라고 해서 단점만 있는 것도 아닙니다. jQuery의 사용 여부 역시 정해진 정답이 있는 문제가 아니라, 개발 환경과 필요, 그리고 개발자의 선택에 따라 달라지는 문제입니다.

• 지양해야 할 환경: React나 Vue처럼 가상 DOM을 사용하는 프레임워크 기반 프로젝트에서는 jQuery 사용을 지양하는 것이 일반적입니다. DOM을 직접 조작하는 방식이 프레임워크의 구조와 충돌할 수 있기 때문입니다.

• 권장되는 환경: 프로젝트 구조가 단순하거나 이미 jQuery 기반으로 구성되어 있다면 이를 유지하는 것이 더 효율적인 선택이 될 수 있습니다.

1. 제이쿼리(jQuery)의 탄생과 찬란했던 목표

jQuery는 2006년, 미국의 개발자 존 레식(John Resig)에 의해 개발된 자바스크립트 라이브러리입니다.

90년대부터 2000년대 중반까지는 브라우저마다 자바스크립트 동작 방식이 달라 코드가 서로 다르게 동작하는 문제가 자주 발생했습니다. 이로 인해 개발자는 브라우저별 차이를 직접 처리해야 했습니다. 이후 HTML5, CSS3, ECMAScript 5(ES5) 등 웹 표준이 점차 정립되었고, 2015년 ES6가 등장하면서 자바스크립트가 크게 발전하게 되었습니다.

크로스 브라우징과 생산성 혁신

jQuery는 이러한 초기 웹 환경에서 브라우저 간 호환성 문제를 해결하는 데 중점을 두고 개발되었습니다. 다양한 브라우저에서 동일한 결과를 보장하는 것을 목표로 했으며, 이를 통해 개발자들은 브라우저 차이를 크게 신경 쓰지 않고 자바스크립트를 사용할 수 있게 되었습니다.

또한 복잡한 DOM 조작, 이벤트 처리, ajax 요청 등을 간단한 문법으로 처리할 수 있도록 하여 개발 생산성을 크게 높였습니다.

코드 비교: jQuery vs 순수 자바스크립트(ES5)

// jQuery를 사용한 ajax
$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  success: function(response) {
    console.log('응답 성공', response);
  },
  error: function(xhr, status, error) {
    console.log('error', error);
  }
});

// jQuery를 사용한 DOM 탐색
var ele = $('#example');

// ES5를 사용한 ajax
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('응답 성공', xhr.responseText);
  } else {
    console.log('error', xhr.status);
  }
}
xhr.onerror = function() {
  console.log('network error');
}

xhr.send();

// ES5를 사용한 DOM 탐색
var ele = document.getElementById('example');

이처럼 jQuery는 당시 기준에서는 코드를 상당히 간결하게 작성할 수 있게 해주는 혁신적인 도구였습니다.

2. 왜 jQuery는 '구시대의 산물'이라 불리게 되었나?

jQuery를 사용하지 말아야 한다는 이야기는 최근에 나온 것이 아니라 이미 약 10년 전부터 지속적으로 제기되어 왔습니다. 이제는 왜 jQuery가 필요하지 않게 되었을까요?

1. 모던 브라우저의 웹 표준 준수: 브라우저들이 웹 표준을 잘 준수하게 되면서, jQuery가 제공하던 브라우저 간 호환성 처리 기능(크로스 브라우징)의 필요성이 급격히 줄었습니다.

2. 자바스크립트(Vanilla JS)의 자체 발전: ES6부터 클래스, 모듈, 화살표 함수 등의 기능이 추가되었고, fetch() API도 기본적으로 제공되기 시작했습니다. 이제는 순수 자바스크립트만으로 간결하게 Ajax를 구현할 수 있습니다.

3. 컴포넌트 기반 프레임워크의 등장: React, Vue, Angular 같은 모던 프레임워크들이 주류가 되면서 DOM 을 직접 조작하는 방식 자체가 줄었습니다. 대신 상태 기반 UI 관리 방식이 보편화되었습니다.

중요한 점은 jQuery가 "느리다"거나 "무겁다"는 본질적인 결함이 있다기보다는 기술의 발전으로 인해 굳이 사용할 필요성이 줄어들었다는 점입니다. 필자 역시 과거에는 jQuery를 많이 사용했지만, 최근 몇 년간 신규 프로젝트에서는 사용하지 않고 있습니다.

3. 그렇다면 이제 절대 사용하면 안 되는 걸까?

결코 그렇지는 않습니다. 여전히 다음과 같은 상황에서는 충분한 경쟁력을 가집니다.

• 생산성과 익숙함: 순수 자바스크립트보다 jQuery 문법에 훨씬 익숙하다면 그것만으로도 훌륭한 사용 이유가 됩니다.

• 레거시 프로젝트의 효율성: 이미 jQuery 기반으로 튼튼하게 구축된 기존 프로젝트라면 시스템을 완전히 갈아엎는 것보다 유지보수나 기능 확장을 위해 계속 사용하는 것이 비용 측면에서 훨씬 효율적입니다.

4. 타임라인으로 보는 jQuery의 현재 상태와 높은 사융률

jQuery는 구시대의 유물로 멈춰 있는 것이 아니라, 여전히 꾸준한 유지보수와 업데이트가 이루어지고 있습니다.

약 10년 만의 업데이트 타임라인

• 2024년 2월 6일: 4.0.0 베타 버전 공개

• 2024년 7월 17일: 두 번째 베타 버전 공개.

• 2026년 1월 17일: jQuery 4.0.0 정식 버전 전격 공개

이번 메이저 업데이트를 통해 jQuery는 낡은 레거시 코드를 대거 정리하고 현대 웹 환경에 맞춘 대응을 반영하며 건재함을 과시했습니다.

웹 세상을 뒤받치고 있는 높은 사용률

w3Techs 통계에 따르면(2024년 12월 4일 기준), 수많은 웹사이트에서 여전히 jQuery를 사용하고 있는 것이 엄연한 사실입니다.

이는 워드프레스와 같은 CMS 환경이나 기존에 이미 거대하게 구축된 글로벌 프로젝트들이 여전히 jQuery에 의존하고 있기 때문입니다. 이러한 생태계적 구조 때문에 jQuery의 사용률이 급격히 제로(0)로 줄어들 가능성은 매우 낮습니다.

결론: 기술의 우열이 아닌 선택의 문제

jQuery를 사용하지 말아야 한다는 이야기가 나온 지는 이미 10년이 넘었지만, 여전히 다양한 실무 환경에서 제 역할을 다하고 있습니다. 따라서 jQuery의 사용 여부는 기술의 우열 문제가 아니라 프로젝트의 구조와 필요에 따른 선택 문제로 바라보아야 합니다.

• 신규 프로젝트: 신규 웹 프론트엔드 프로젝트에서의 사용 빈도는 확실히 줄어들고 있습니다.

• 유지보수 영역: 기존 웹 생태계를 유지보수하는 영역에서는 여전히 강력하고 의미가 있습니다.

• 학습자 입장:다만, 자바스크립트를 처음 학습하는 개발 지망생이라면 jQuery 문법 자체에 의존하기보다는 순수 자바스크립트 역량을 단단하게 익히는 것을 강력히 권장합니다.