JS

요즘은 왜 jQuery 를 안쓰는가 ?

myDav 2024. 5. 14. 03:32

 

jQuery 를 더이상 사용하지 않는 이유를 알기 위해선, 그 당시 jQuery를 왜 많이 도입하고 사용했는지를 함께 알아보면서 그 때와 지금의 차이점을 알아볼 필요가 있다. 

 

jQuery 의 사용 이유와 더이상 사용하지 않는 이유

 

1. 브라우저 호환성 + 웹 표준 API 확장

 

초기 웹 개발에서는 브라우저 호환성 문제가 큰 문제였다. 브라우저 호환성 또는 웹 호환성이란 운영체제 및 브라우저 간 동일한 웹 사이트 경험을 제공하는 하는 것으로, 이를 준수하지 않으면 다양한 운영체제 환경 및 브라우저에서 사용이 불가능한 문제가 발생한다. jQuery는 이 호환성 문제를 해결하는 강력한 도구로 등장하여, 다양한 브라우저에서 일관된 방식으로 JavaScript를 사용할 수 있도록 해주었다. jQuery가 본격적으로 사용되기 시작한 2007년은 인터넷 익스플로러(IE) 가 웹브라우저 시장의 60%이상을 점유했었다. 그러나 IE는 업데이트가 느렸으며 Windows 환경에 주력했다.

 

2008년 Chrome이 등장하면서 Windows 뿐 아니라, Mac, Linux 데스크톱 OS, 그리고 안드로이드 등의 모바일 OS도 지원하면서 웹브라우저 점유율을 장악해갔고, 2013년 이후 시장 점유율 1위를 지키고 있다. 크롬은 IE와 달리 우수한 렌더링 엔진을 탑재했고, 웹표준을 신속하게 반영했다.

 

더불어 웹 표준은 W3C, WHATWG 와 같은 단체에 의해 계속 발전해왔다. jQuery와 같은 라이브러리를 사용해야만 활용 가능했던 편의 기능을 브라우저에서 기본 API로 제공하는 것도 포함되어 있었다. 대표적인 예가 Fetch API 이다. 아래와 같은 높은 기능성을 갖춘 웹 API가 늘어나면서 jQuery 같은 라이브러리 없이 양질의 웹 어플리케이션을 구현하는 것이 가능해졌다.

// jQuery
$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( result ) {
    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
  }
});

// Fetch API
async function fetchWeather(zipcode) {
	const response = await fetch('/api/getWeather', {
    	method: 'GET', // or 'POST'
  	    headers: {
        	'Content-Type': 'application/json'
      	},
      	body: JSON.stringify({ zipcode })
    });
    const result = await response.json();
}

 

한 가지 덧붙이자면, Babel 과 같은 트랜스파일러 또는 번들러의 등장 또한 jQuery의 입지를 약화시키는 역할을 했을 것이라 추측한다. Babel 과 같은 트랜스파일러는 최신 JS 코드를 이전 버전의 JS로 변환하여, 아직 최신 스펙을 완벽하게 지원하지 않는 브라우저에서도 사용할 수 있게 해주며, Webpack과 같은 번들러는 여러 개의 파일과 모듈을 하나의 파일로 묶어주어 HTTP 요청의 수를 줄이고, 코드를 최적화하여 로딩 시간을 단축시켜 주기에, 특히 큰 규모의 애플리케이션에서 jQuery가 처음 등장했을 때 제공했던 이점들을 다른 방식으로 해결할 수 있게 만들었다.

 

2. 단순화된 코드, 그러나 비대한 크기

 

jQuery는 코드를 단순화해 주었기에, 복잡한 JS 함수를 몇 줄의 간결한 코드로 대체할 수 있게 했고, 이것은 개발 효율의 향상으로 이어질 수 있었다.

// JavaScript
document.getElementById('myDiv')

// jQuery
$('#myDiv')

 

그러나 이것은 기존 네이티브 코드를 Wrapping해서 만든 코드일 뿐이고, jQuery는 Wrapping 을 너무 많이 했다는 문제점이 있다. 단순하게 처리할 수 있는 작업임에도 여러 코드들로 래핑이 되어 있기에, 즉, DOM을 조작하는 작업을 수행하는데 상당히 많은 과정들을 거치게 되기에, JS의 콜스택은 더 쌓이게되고 수행시간이 더 걸리게 된다. (Why I decided to Break up With jQuery 참고)

 

 

3. 복잡해진 모던 웹, 그리고 모던 웹 프레임워크의 등장

 

초기의 웹은 유저 인터렉션과 같은 복잡한 기능이 없었고, 단순한 HTML 조작이 대부분이었다. 그러나 대형화된 현대 모던 앱일수록 복잡한 기능과 높은 성능을 필요로 한다. 이에 따라 효율적인 DOM 조작이 필수적이었고, 가상돔(Virtual DOM)의 등장은 이를 가능하게 했다. jQuery로 DOM 을 조작할 때는 전체 document에서 Layout 과 Reflow 과정이 발생할 수 있으며, 이것은 성능에 상당한 영향을 미친다. 왜냐하면 DOM 변경은 reflow(요소의 위치와 구조를 다시 계산하는 작업)를 발생시키며, 이는 필연적으로 repaint 를 발생시키기 때문이다. 예를 들어, 요소의 크기나 위치를 변경하면, 그 변경이 다른 요소들에게 영향을 줄 수 있으므로, 브라우저는 연쇄적으로 여러 오소의 레이아웃을 다시 계산해야 할 수 있다. (Avoid large, complex layouts and layout thrashing 참고) 

 

반면에, 가상돔을 이용하는 React 같은 모던 웹 프레임워크들은 실제돔의 경량화된 복사본을 메모리에 유지하고, 실제 DOM이 적용하기 전에 모든 변경사항을 이 복사본에서 먼저 처리하기 때문에 효율적인 DOM 조작을 할 수 있다. 가상돔에서 일어나는 일을 간략하게 설명한다면, 첫번째로 변경을 감지하고 먼저 가상돔에 반영된다. 두번째로 Diffing 알고리즘을 통해, 변경 후의 가상돔과 변경 전의 가상돔을 비교하여 실제로 변경된 부분만을 파악한다. 그 이후, 실제 돔에 변경된 부분을 Batch 방식으로 적용하고, 이 때 필요한 경우에만 reflow, repaint 가 발생하므로, 실제 돔 조작에 비해 전체적인 성능이 향상 될 수 있다.

 

그렇다면, jQuery. 더 이상 사용하지 않아야 할까?

 

jQuery 를 사용하고 있는 웹과 개발자는 그럼에도 불구하고 상당하다. 2024년 기준, 놀랍게도 전체 웹사이트 중 76.9%가 jQuery를 사용하고 있으며, 전체 JS 라이브러리 중 시용량은 jQuery가 1위를 차지하고 있다. jQuery 또한 경량화와 브라우저 호환 기능 추가 등을 통해 자체적으로 성능을 향상시키고 있다. 그리고 모던 웹 프레임워크에서 가상돔을 운영하는 것은 실제 돔을 운영하는 것보다 돔의 변경과 돔의 상태를 추적하기 위한 추가적인 계산과 더 많은 메모리를 요구하기 때문에, 초기 렌더링에서는 가상돔의 사용이 더 느릴 수 있다. 그러므로, 어떤 JS 라이브러리를 사용할지는 개발하려는 어플리케이션의 규모와 구조에 맞게 달라져야 하며, 단순한 UI 위주의 웹사이트라면 jQuery가 적절한 도구가 될 수 있다.

 

References

제이쿼리(jQuery)를 아직도 사용하나요? - 제이쿼리의 현재와 미래. 2020 - https://www.samsungsds.com/kr/insights/jquery.html

 

Avoid large, complex layouts and layout thrashing - https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing

 

You (Might) Don't Need jQuery - https://github.com/camsong/You-Dont-Need-jQuery?tab=readme-ov-file

 

Usage statistics and market share of jQuery for websites - https://w3techs.com/technologies/details/js-jquery

 

Usage statistics and market shares of JavaScript libraries -   https://w3techs.com/technologies/overview/javascript_library 

 

Why I decided to Break up With jQuery, 2019 - https://javascript.plainenglish.io/why-i-decided-to-break-up-with-jquery-d597d4b8c84f