jQuery가 jQuery 사용을 중단하라는 좋은 신호인 이유

작사: Shalitha Suranga✏️

jQuery는 오랫동안 존경받는 역사를 갖고 있지만, 새로운 jQuery v4 베타 릴리스에는 현대 웹 개발자를 위한 흥미로운 기능이 없습니다. 지금이 jQuery 사용을 중단하기에 좋은 시기인 데에는 여러 가지 이유가 있습니다.

1. 이제 최신 브라우저와 기본 JavaScript API는 jQuery가 제공하는 모든 기능을 기본적으로 지원하므로 기능이 중복되고 유틸리티 기능이 더 이상 사용되지 않습니다.
2. jQuery를 사용하면 기본 구현에 비해 웹 앱 번들 크기가 불필요하게 늘어나고 성능이 저하됩니다.
3. jQuery 4의 출시는 중요한 새 기능이 부족하고 생존에 중점을 두고 기본 JavaScript 및 최신 프레임워크가 이를 능가한다는 점을 강조함으로써 노후화를 확인합니다.
4. jQuery의 ES 모듈로의 마이그레이션과 jQuery 4의 최신 방식 채택은 웹 개발자에게 새로운 것을 추가하지 않습니다
5. React, Vue, Angular와 같은 최신 프런트엔드 프레임워크에서 jQuery를 사용하면 아키텍처 및 코딩 권장 사항과 충돌할 수 있습니다
6. 최신 프런트엔드 프레임워크는 폴리필이 포함된 프로덕션 코드를 생성하므로 개발자는 jQuery API를 사용하여 이전 브라우저용 웹 페이지를 만들 필요가 없습니다

이러한 점을 더 자세히 살펴보고 jQuery v4가 사용 가능한 기능을 기본 JavaScript 웹 API와 비교하여 10년 간의 여정을 마무리하는 이유를 살펴보겠습니다.

v4 이전의 jQuery 황금 시대

프런트엔드 웹 개발 초기부터 개발자는 JavaScript를 사용하여 HTML 요소를 동적으로 업데이트함으로써 사용자 친화적인 웹 프런트엔드를 구현했습니다.

2000년대 초반에는 React와 같은 모든 기능을 갖춘 구성 요소 기반의 최신 프런트엔드 개발 라이브러리가 없었으며 브라우저도 애니메이션과 같은 고급 CSS 기능과 높은 수준의 개발자 친화적이고 모든 기능을 갖춘 기능을 제공하지 않았습니다. DOM 조작 API로 인해 개발자는 웹 프런트엔드를 구축하기 위해 기존 웹 API로 많은 코드 라인을 작성해야 했습니다. 심지어 AJAX 통신 API와의 브라우저 호환성 문제를 해결하기 위한 코드도 작성해야 했습니다.

jQuery는 DOM 조작을 위한 단축 기능과 크로스 브라우저 AJAX API를 제공하여 이러한 문제를 해결했습니다. 따라서 모든 웹 개발자는 웹 앱에 jQuery 스크립트를 포함시켰습니다.

오늘날 모든 사람이 구성 요소 기반 프런트엔드 프레임워크를 권장하는 것처럼 jQuery는 jQuery의 사용이 몰락하기 전 최고조에 달했던 2000년대 중반에 동적 웹 프런트엔드를 만드는 데 가장 권장되는 접근 방식이었습니다.

공식 Bootstrap 3.4 웹사이트는 공식 CDN의 jQuery를 사용합니다

2000년대 중반 jQuery v1~v3이 사용된 분야는 다음과 같습니다.

• 슬라이더, 이미지 갤러리 등을 구현하기 위한 모든 인기 웹사이트 HTML 템플릿
• Internet Explorer 지원을 통해 DOM 조작을 수행하고 HTTP/AJAX 호출을 수행하는 웹 앱
• 모달, 드롭다운 등과 같은 구성요소를 구현하는 부트스트랩
• DOM 조작을 위한 모든 동적 WordPress 템플릿 및 플러그인

v4 출시에 따른 jQuery의 상태

jQuery는 2024년 2월에 첫 번째 베타 릴리스를 출시했고, 7월에 두 번째 베타 릴리스를 출시했습니다.  —  코드베이스 관리자는 곧 릴리스 후보 버전을 만들 계획입니다. jQuery v4 릴리스에는 다음과 같은 주요 변경 사항이 있습니다.

• IE 10 및 이전 웹 브라우저 버전에 대한 지원 중단
• jQuery.isArray()와 같이 이미 사용되지 않는 메서드가 제거되었습니다.
• Trusted Types API로 생성된 HTML 콘텐츠 사용 지원
• AJAX 메소드에서 기본 JavaScript 바이너리 데이터 사용을 지원합니다
• jQuery 코드베이스는 Rollup Bundler를 사용하여 AMD(requirejs 모듈 필요)에서 ES 모듈로 마이그레이션되었습니다.

jQuery v4 베타 출시와 함께 ES 모듈을 사용하여 코드베이스를 현대화하고 IE 10 지원을 중단하여 번들 크기를 줄이려고 합니다. 이 공식 블로그 게시물에서 향후 jQuery v4 릴리스에 대해 자세히 알아볼 수 있습니다.

jQuery v4가 몰락을 확인하는 이유

jQuery v4 베타 출시가 jQuery를 그만 두는 이유는 아니지만, v4 출시를 통해 보여준 성장과 미래는 최신 웹 기술에서 jQuery의 몰락을 확인시켜 줍니다. 이는 브라우저 표준이 개발자 생산성에 초점을 맞춘 높은 수준의 DOM 조작 기능과 개발자가 JavaScript를 사용하지 않고 동적 스타일을 구현하는 데 도움이 되는 CSS의 고급 기능을 제공하기 시작하면서 천천히 시작되었습니다.

jQuery v1~v3은 브라우저가 기본적으로 제공하지 않는 크로스 브라우저 개발자 친화적인 기능을 구현한 것은 의심할 여지가 없습니다. 예를 들어, jQuery의 Sizzle 선택기 엔진은 브라우저가 document.querySelectorAll()을 구현하기 전에 개발자가 DOM 요소를 쿼리하는 데 도움이 되었습니다. 게다가 $.ajax()는 내장된 AJAX API의 브라우저 호환성 문제로 인해 이전 개발자의 fetch()였습니다.

기존 네이티브 웹 API 대신 jQuery 사용을 권장하는 오래된 StackOverflow 답변

jQuery v2에서 v3까지의 기간 동안 HTML, JavaScript, CSS 및 웹 API가 크게 향상되었으며 jQuery 기능을 위한 표준 API가 제공되어 jQuery는 더 이상 사용되지 않는 선택이 되었습니다.

jQuery는 v3에서 표준 Promise 인터페이스 지원, 중복 코드 제거 등 표준 API를 고수하며 살아남으려고 노력했지만, 표준 브라우저 기능이 현대 개발자의 마음을 사로잡았습니다. jQuery는 기능이 아닌 최신 웹 기술과의 관련성을 유지하기 위해 향상된 기능을 갖춘 v4를 출시했습니다.

jQuery v4는 웹 브라우저가 기본적으로 0kb 클라이언트측 JavaScript 코드와 함께 제공하는 기능을 위해 27kb gzip으로 압축된 번들 증분을 제공합니다!

jQuery와 기본 브라우저 API

여러 개발 요구 사항에 대한 jQuery와 기본 브라우저 API 코드를 나란히 비교하고 최신 웹 API가 jQuery를 쓸모없게 만드는 방법을 살펴보겠습니다.

새 HTML 파일을 생성하고 다음과 같이 공식 CDN을 통해 jQuery v4 베타 버전을 연결하여 시작하세요.

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

DOM 요소 선택

최신 프런트엔드 라이브러리와 프레임워크는 DOM 요소 참조에 액세스하기 위한 ref 개념을 제공하지만, 웹 개발자는 특정 프런트엔드 프레임워크에 의존하지 않는 경우 DOM 요소를 쿼리해야 하는 경우가 많습니다. document.querySelectorAll()이 jQuery와 유사한 간편한 기본 DOM 선택을 구현하는 방법을 확인하세요.

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

결과:

jQuery 및 기본 웹 API를 사용하여 CSS 쿼리로 DOM 요소 선택

jQuery는 역순으로 탐색하여 지정된 선택기에 일치하는 DOM 노드를 찾는 가장 가까운() 메서드를 제공합니다. 기본 DOM API도 OOP 패턴을 사용하여 동일한 메서드를 구현합니다.

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

결과:

jQuery와 기본 웹 API를 사용하여 가장 가까운 DOM 요소 선택

일부 jQuery 기능에는 최신 표준 DOM API와 동일하고 단축된 대안이 없지만 최신 JavaScript 기능과 함께 기존 DOM API 메서드를 효과적으로 사용할 수 있습니다.

예를 들어 jQuery는 비표준 :contains(text) 선택기를 지원하므로 다음과 같이 filter() 배열 메서드를 사용하여 구현해야 합니다.

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

결과:

jQuery 및 기본 웹 API를 사용하여 특정 텍스트 세그먼트가 포함된 요소 필터링

querySelectorAll() 메서드는 최신 CSS 의사 클래스의 강력한 기능을 활용하여 jQuery find() 함수에 대한 더 나은 기본 대안을 제공합니다. 예를 들어, :scope 의사 클래스를 사용하여 jQuery find() 함수와 유사한 기본 쿼리 선택기 호출의 범위를 지정할 수 있습니다.

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

결과:

jQuery와 기본 웹 API를 사용하여 DOM 요소 선택기 범위 지정

DOM 속성 검색 및 업데이트

클래스 속성, 요소별 속성, 사용자 정의 데이터 속성은 웹 개발자가 웹 앱을 개발하는 동안 종종 검색하고 업데이트해야 하는 일반적인 HTML 속성입니다.

과거에는 개발자가 요소 클래스 이름을 업데이트하기 위해 네이티브 className 속성을 수동으로 조작해야 했기 때문에 jQuery의 addClass(), RemoveClass() 및 ToggleClass() 사전 개발된 함수 구현을 사용했습니다. 하지만 이제 기본 classList 객체는 더 나은 클래스 속성 값 처리 지원을 구현합니다.

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

결과:

jQuery 및 기본 웹 API를 사용하여 클래스 속성 값 업데이트

한편, getAttribute() 및 setAttribute() 기본 DOM 메소드는 잘 알려진 jQuery attr() 단축 함수의 표준 대체 기능이 됩니다.

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

결과:

jQuery와 기본 웹 API를 사용하여 HTML 요소 속성 변경 및 검색

jQuery는 개발자가 attr() 함수를 사용하여 사용자 정의 데이터 속성을 설정할 것을 권장하지만 이제 다음과 같이 보다 생산적인 데이터 속성 검색/수정을 위해 내장된 데이터 세트 속성을 사용할 수 있습니다.

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

결과:

jQuery 및 기본 웹 API를 사용하여 사용자 정의 데이터 속성 업데이트

DOM 요소 조작

과거에는 기본 DOM 조작 API가 개발자 생산성에 초점을 맞춘 기능을 제공하지 않았기 때문에 대부분의 개발자가 DOM 조작에 jQuery를 사용했습니다. 이제 모든 최신 표준 웹 브라우저는 생산적이고 높은 수준의 내장형 DOM 조작 지원을 구현합니다.

요소 생성 및 추가는 DOM 조작 작업에서 가장 자주 수행되는 작업입니다. jQuery와 기본 웹 API를 모두 사용하여 수행하는 방법은 다음과 같습니다.

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

결과:

jQuery와 네이티브 웹 API를 사용하여 before() 및 after() 함수 사용

DOM 요소 애니메이션

10여년 전에 웹 앱을 구축한 숙련된 웹 개발자라면 jQuery fadeIn(), fadeOut() 및 animate() 함수가 웹 앱을 보다 대화형으로 만드는 데 어떻게 도움이 되었는지 알고 있을 것입니다. 이러한 애니메이션 기능은 보다 부드러운 애니메이션을 구축하기 위해 애니메이션 완화도 지원했습니다.

기본 CSS 애니메이션/전환 및 JavaScript 웹 애니메이션 API로 인해 jQuery 애니메이션 API가 더 이상 사용되지 않습니다. 표준 웹 애니메이션 API를 사용하여 fadeIn()을 구현하는 방법은 다음과 같습니다.

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

결과:

jQuery 및 기본 웹 API를 사용하여 이벤트 핸들러 연결 및 제거

jQuery와 기본 DOM API 모두 이벤트 리스너를 연결하는 간단한 방법을 제공합니다.

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

jQuery는 이벤트 핸들러를 한 번 트리거하는 one() 함수도 제공합니다. 이제 모든 표준 웹 브라우저는 동일한 목적으로 한 번 옵션을 지원합니다.

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

웹 서비스와 통신

과거의 모놀리식 웹 앱은 업데이트된 데이터가 포함된 새 페이지를 얻기 위해 백엔드 서버에 HTTP 요청을 보내는 경우가 많았습니다.  —  웹 앱은 각 주요 사용자 작업에 대해 전체 페이지를 렌더링했습니다.

나중에 개발자들은 AJAX를 통해 HTML 콘텐츠를 요청하여 웹페이지의 일부를 업데이트함으로써 더 나은 대화형 웹 앱을 만들었습니다. 내장된 AJAX API의 브라우저 호환성 및 생산성 문제로 인해 jQuery를 사용하여 AJAX 요청을 보냈습니다.

이제 개발자는 jQuery의 AJAX 기능 대신 표준 fetch() 기능을 사용할 수 있습니다.

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

결과:

jQuery 및 기본 웹 API를 사용하여 HTTP 요청 보내기

요즘 대부분의 개발자는 RESTful API를 사용하여 프레젠테이션 계층에서 데이터 소스를 분리합니다. jQuery는 RESTful 서비스에서 JSON 데이터를 가져오기 위한 생산적인 단축 기능을 제공하지만 기본 fetch()는 더 나은 표준 접근 방식을 제공합니다.

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

결과:

jQuery 및 기본 웹 API를 사용하여 RESTful 웹 서비스에서 JSON 데이터 요청

유틸리티 기능

jQuery는 웹 개발자의 시간을 절약하기 위해 사전 개발된 다양한 유틸리티 기능을 제공합니다. 요즘에는 다음 표에 나열된 것처럼 jQuery v4에 존재하는 사전 개발된 모든 유틸리티 함수에 대해 내장된 ECMAScript 기능을 찾을 수 있습니다.

$.parseJSON()과 같은 이전 유틸리티는 이미 이전 jQuery 버전에서 더 이상 사용되지 않으며 v4에서는 제거되었습니다.

Vue, React 또는 Angular에서 jQuery를 사용할 수 있나요?

웹 개발자는 최신 앱 개발 프런트엔드 라이브러리가 없을 때 jQuery를 사용했습니다. 그들은 전체 웹페이지를 새로 고치지 않고 프런트엔드를 동적으로 업데이트하기 위해 주로 jQuery의 DOM 조작과 AJAX 기능을 사용했습니다. 이제 최신 프런트엔드 프레임워크/라이브러리의 SPA(단일 페이지 애플리케이션) 개발 기술을 통해 웹 개발자는 구식 AJAX 기반 렌더링 기술을 사용하지 않고도 고도로 대화형이고 잘 구조화된 경량 웹 앱을 구축할 수 있습니다.

널리 사용되는 프런트엔드 라이브러리/프레임워크처럼 Vue, React 및 Angular와 함께 jQuery를 사용할 수 있지만 jQuery를 이러한 프런트엔드 라이브러리와 통합하는 것은 현대 프런트엔드 개발 생태계에 어떤 가치도 가져오지 않기 때문에 권장되지 않습니다.

모든 인기 있는 프런트엔드 라이브러리는 구성 요소 내의 DOM 요소 참조에 액세스하기 위한 ref 개념을 제공하므로 jQuery 또는 document.querySelector()를 사용할 필요가 없습니다. 예를 들어

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

<스크립트>
'jquery'에서 $ 가져오기;

기본값 내보내기 {
 탑재() {
   const elm = $('#elm');
   console.log(elm);
 }
}
</스크립트>

<템플릿>
 <div>



<p>Vue와 같은 최신 프런트엔드 라이브러리에서는 수동 DOM 조작이 거의 발생하지 않습니다. 하지만 이러한 상황에 직면한다면 네이티브 웹 API를 사용하는 것이 좋습니다.</p>

<h2>
  
  
  결론
</h2>

<p>jQuery는 의심할 여지 없이 DOM 조작 및 AJAX 기술을 사용하여 웹 앱 프런트엔드를 구축하기 위한 생산적이고 개발자 친화적인 접근 방식을 도입한 놀라운 JavaScript 라이브러리였습니다. jQuery는 브라우저 호환성 문제와 기본 웹 API의 개발자 중심 기능 부족으로 인해 인기를 얻었습니다. W3C와 ECMAScript는 새로운 웹 API와 JavaScript 언어 기능을 도입하여 이러한 문제를 해결했습니다. </p>

<p>현재 웹 API 상태는 jQuery가 보유한 모든 기능에 대해 더 좋고 현대적이며 개발자 친화적인 클래스와 기능을 제공하므로 최신 웹에서는 jQuery가 필요하지 않습니다. </p>

<p>최근 jQuery v4 베타 릴리스에서는 혁신보다는 유지 관리에 초점을 맞춘 기능 제거 및 개선을 통해 이를 확인했습니다. V4 및 기타 jQuery 릴리스에서는 브라우저 간 기본 웹 API를 사용할 수 있으므로 더 많은 기능이 제거될 가능성이 높습니다. </p><p>대부분의 사용자가 최신 브라우저를 사용하는 경향이 있으므로 향후 버전에서는 이전 브라우저에 대한 지원이 종료될 수 있습니다. 또한 현재의 네이티브 웹 API는 안정적이고 표준화가 잘 되어 있어 jQuery가 다시 인기를 끌지는 못할 것이라고 생각합니다. 하지만 jQuery에 의존하는 레거시 웹 앱으로 작업하는 개발자들은 계속해서 jQuery를 사용하고 프로젝트를 jQuery v4, v5, 곧. 즉, 널리 사용되는 웹 브라우저에서 쉽게 찾을 수 있는 개발 기능을 위해 jQuery를 추가하여 웹 앱 번들 크기를 늘리고 싶어하는 사람은 아무도 없습니다!</p>


<hr>

<h2>
  
  
  LogRocket: 컨텍스트를 이해하여 JavaScript 오류를 더 쉽게 디버깅합니다.
</h2>

<p>코드 디버깅은 항상 지루한 작업입니다. 하지만 오류를 더 많이 이해할수록 오류를 수정하는 것이 더 쉬워집니다.</p>

<p>LogRocket을 사용하면 이러한 오류를 새롭고 독특한 방식으로 이해할 수 있습니다. 당사의 프런트엔드 모니터링 솔루션은 JavaScript 프런트엔드에 대한 사용자 참여를 추적하여 오류를 초래한 사용자의 행동을 정확하게 확인할 수 있는 기능을 제공합니다.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173087043468616.jpg" alt="Why jQuery s a good reminder to stop using jQuery"></p>

<p>LogRocket은 콘솔 로그, 페이지 로드 시간, 스택 추적, 헤더 본문이 포함된 느린 네트워크 요청/응답, 브라우저 메타데이터 및 사용자 정의 로그를 기록합니다. JavaScript 코드의 영향을 이해하는 것은 결코 쉬운 일이 아닙니다!</p>

<p>무료로 사용해 보세요.</p>