jQuery 4.0 Beta 출시 – 여전히 유지되는 이유와 현대 JavaScript의 변화

2024년 2월, jQuery 4.0.0 Beta가 정식 발표되었다. 웹 프론트엔드 개발의 표준처럼 여겨졌던 jQuery는 최근 몇 년 사이 점점 사용 빈도가 줄었지만, 이번 4.0 베타 발표는 이 라이브러리가 여전히 살아 있고, 꾸준히 유지 관리되고 있음을 보여주는거 같다. jQuery 4.0의 주요 변경 사항을 간단하게 정리해보고, jQuery가 여전히 유지되는 이유와 함께, 왜 현대 웹 개발에서는 순수 JavaScript(이하 Vanilla JS)가 더 선호되는지를 고민해보자.

jQuery 4.0 Beta 주요 변경 사항

ES 모듈 지원: jQuery가 AMD에서 ES Modules로 마이그레이션되었습니다.

✅ 모듈 시스템 변경: AMD → ESM

기존의 jQuery는 모듈 시스템으로 AMD(Asynchronous Module Definition)를 주로 사용했었다. 이는 RequireJS 같은 도구와 함께 사용되며, 비동기 방식으로 모듈을 불러오는 구조였다. 그러나 최신 JavaScript 생태계에서는 ES Modules(ESM)이 표준으로 자리잡았고, 대부분의 브라우저와 번들러(Webpack, Rollup, Vite 등)에서 기본으로 지원되고 있다. jQuery 4.0에서는 AMD 대신 ES Modules 방식으로 jQuery를 가져올 수 있도록 공식적으로 지원함.

📦 변경 전: AMD 방식 (RequireJS 등에서 사용)

define(['jquery'], function ($) {
  $(function () {
    console.log('jQuery loaded with AMD');
  });
});

🌐 변경 후: ES Modules 방식 (모던 빌드 툴과 통합)

// 모듈 환경에서 jQuery를 불러옴
import $ from 'jquery';

$(function () {
  console.log('jQuery loaded with ES Modules');
});

💡 참고: ES Modules을 사용하려면 번들러 설정이 필요할 수 있으며, jQuery 4.0은 ESM 번들을 함께 제공.

→ 이로써 Rollup, Webpack, Vite 등 최신 빌드 환경과의 호환이 더욱 쉬워졌다.

불필요한 API 제거: jQuery.isArray, jQuery.trim, jQuery.parseJSON 등과 같이 중복되거나 불필요한 함수들이 제거됨.

✅ jQuery.trim() 제거

• 변경 전 (jQuery 3.x)

const trimmed = $.trim('  hello world  ');
console.log(trimmed); // "hello world"

• 변경 후 (jQuery 4.0)

const trimmed = '  hello world  '.trim();
console.log(trimmed); // "hello world"

→ 이제는 네이티브 String 메서드를 사용하는 것이 표준이다.

✅ jQuery.parseJSON() 제거

• 변경 전 (jQuery 3.x)

const obj = $.parseJSON('{ "name": "NAME" }');

• 변경 후 (jQuery 4.0)

const obj = JSON.parse('{ "name": "NAME" }');

→ 표준 API인 JSON.parse()를 그대로 사용하는 것이 더 권장됨.

✅ jQuery.isArray() 제거

• 변경 전 (jQuery 3.x)

if ($.isArray(myData)) {
  // 배열일 경우 처리
}

• 변경 후 (jQuery 4.0)

if (Array.isArray(myData)) {
  // 이것도 es6 표준
  // 배열일 경우 처리
}

• 브라우저 지원 범위 축소: IE10 이하, Edge Legacy, iOS 11 이하 등의 구형 브라우저에 대한 지원이 제거됨.
• FormData 지원: jQuery.ajax에서 FormData를 지원하여, 바이너리 파일 전송이나 복잡한 요청도 간편하게 처리할 수 있게 됨.
• Trusted Types 및 CSP 호환성 개선: 보안 정책 강화와 관련된 최신 웹 표준을 지원.

이러한 변화는 jQuery가 더 이상 과거에 머무르지 않고, 최신 웹 개발 흐름을 일정 부분 반영하고자 하는거 같다.

jQuery는 왜 아직도 유지보수될까?

1. 레거시 시스템의 존재: 수많은 기존 시스템들이 jQuery를 기반으로 작성되어 있습니다. 기업 내부 시스템, 정부 기관, 오래된 쇼핑몰 등이 대표적.
2. 간단한 문법: 짧고 직관적인 문법 덕분에 간단한 UI 조작이나 DOM 이벤트 처리가 빠르게 가능하다.

// 버튼 클릭 시 요소 숨기기
$('#myButton').on('click', function () {
  $('#myElement').hide();
});

// AJAX 요청
$.ajax({
  url: '/api/data',
  method: 'GET',
  success: function (response) {
    console.log(response);
  },
});

// 클래스 토글
$('#toggleBtn').on('click', function () {
  $('#target').toggleClass('active');
});

3. 브라우저 호환성 처리: 과거에는 브라우저마다 상이한 DOM 처리 방식이 많았고, jQuery는 이를 효과적으로 감쌌다. 지금은 불필요하지만, 그 당시에 만들어진 코드들은 여전히 동작한다.
4. 풍부한 플러그인 생태계: datepicker, slider, validation 등 다양한 jQuery 플러그인이 여전히 사용 중이다.
5. 성숙한 라이브러리: 오랜 시간 동안 검증된 코드베이스는 유지보수 측면에서 안정성을 제공.

Vanilla JavaScript가 더 중요해진 이유

1. 브라우저 표준의 발전

과거에는 DOM 조작, Ajax 호출 등 기본적인 기능조차 브라우저마다 구현이 달라 불편했지만, 현재는 ECMAScript 표준이 자리잡고 대부분의 브라우저가 이를 잘 지원한다.(babel도 있고 ㅎㅎ) 즉, 굳이 jQuery에 의존하지 않아도 되는 환경이 되어버림

// 버튼 클릭 시 요소 숨기기 (Vanilla JS)
const button = document.querySelector('#myButton');
const element = document.querySelector('#myElement');
button.addEventListener('click', () => {
  element.style.display = 'none';
});

// AJAX 요청
fetch('/api/data')
  .then((response) => response.json())
  .then((data) => console.log(data));

// 클래스 토글
const toggleBtn = document.querySelector('#toggleBtn');
const target = document.querySelector('#target');
toggleBtn.addEventListener('click', () => {
  target.classList.toggle('active');
});

2. 파일 사이즈와 성능 이슈

jQuery는 최소화해도 수십 KB의 용량을 차지합니다. 특히 모바일 환경에서 불필요한 자원 낭비로 이어질 수 있다. Vanilla JS는 네이티브이므로 불필요한 오버헤드가 없다.

3. 모던 프레임워크와의 호환성

React, Vue, Svelte 등 컴포넌트 기반 프레임워크가 대세가 되면서, DOM을 직접 조작하는 jQuery는 이들과 충돌하거나 어울리지 않게됨. Vanilla JS 기반의 유연한 스크립트가 훨씬 궁합이 좋다.

4. 더 나은 유지보수성과 예측 가능성

명시적이고 표준화된 API를 사용하면 협업 시 의사소통이 쉬워지고, 디버깅과 테스트가 명확해진다.

기술적 장단점 요약

마무리: jQuery는 사라지는가?

jQuery는 더 이상 ‘주류’는 아니지만, 여전히 웹 역사에서 중요한 위치를 차지하며 살아 있다. 특히 레거시 시스템 유지, 빠른 프로토타이핑, 교육 목적으로는 여전히 의미가 있는 듯 하다. 그러나 최신 웹 개발을 준비하고 있다면, 표준화된 Vanilla JavaScript와 모던 프레임워크를 익히는 것이 더 좋은 선택이 될 것이다.

참고

• jQuery 4.0 Beta!