jQuery 에서 벗어나기 시작한 새 시대의 웹 개발

콘텐츠

jQuery 는 자바스크립트 라이브러리 중 하나로, 웹사이트 개발 시 DOM(Document Object Model) 조작, 이벤트 처리, 애니메이션 구현 및 AJAX 요청을 쉽게 할 수 있도록 설계되었다.

이 라이브러리는 한국에선 사실 상 웹 표준으로 사용 되었을 만큼 거의 모든 사이트가 jQuery 기반 이였고 현재 많은 워드프레스 사이트, 플러그인 도 이를 기반으로 하고 있다.

내 기억엔 내가 고등학교 재학 중이던 2010년대엔 프로그래밍 학원을 갈 때 기본적으로 Web 기반으로 프로그램을 만들 면 프론트엔드 개발 시 JavaScript 교육 시간에 jQuery를 가르치며 학원 선생님들도 이 둘을 거의 구분 없이 가르쳤던 기억이 있다.

그러다 모던 자바스크립트(ES6) 도입 이후로 웹 개발자들 사이에서도 jQuery를 사용하지 말자는 의견이 유행하기 시작했다.

이처럼 다양한 JS 기반 라이브러리(React, Angular, Vue.js 등) 가 많아진 지금은 이전 보단 인기가 식은 상태이다.

그럼에도 jQuery를 배워야 하는 이유는 많은 기업 아직 웹이나 솔루션을 기존 기반에서 업데이트 하지 않은 경우가 많기 때문이다.

아직은 완전히 걷어 내려면 좀 더 시간이 필요해 보인다.

jQuery 의 장점

jQuery 확실히 ES6 이후에도 순수 JavaScript 코딩에 비해 장점이 존재한다.

간결하고 직관적인 문법

jQuery 는 DOM 조작에 특화 되어 있으므로 이벤트 처리, 애니메이션 구현 등의 작업이 JS 대비 획기적으로 코드 수를 줄일 수 있다.

간략한 예시로 동일한 className 을 지닌 요소의 CSS 를 변경 할 때에도 한 줄로 간결하게 처리 가능하다.

$('.className').css('color', 'red');

jQuery

JavaScript 는 내가 JavaScript HTML DOM 요소 선택 다루기 에서도 다룬 것과 같이 ES6 이후에도 반복문과 조합하여 변경한다.

const elements = document.querySelectorAll('.className');
elements.forEach(function(element) {
	element.style.color = 'red';
});

JavaScript

크로스 브라우저 호환성

많은 웹 개발자들이 골치 아파 하던 것이 바로 크로스 브라우저 호환성이다.

지금이야 크롬이 대세가 되고 MS 의 기본 웹 브라우저도 크로미움 기반의 Edge 브라우저로 변경 되고 웹표준 이란 개념에 맞춰 사이트가 제작되고 있다.

이로 인해 크로스 브라우저의 호환성을 고려한 개발의 중요성이 적어졌지만, 여전히 브라우저의 차이로 인한 버그가 골치 아프기도 하다.

나 또한 워드프레스 블로그를 운영하다 갑작스레 발생한 버그가 브라우저에 따라 다르게 동작하는 코드 였으니… 이런 점에서 jQuery 는 호환성이 뛰어났다.

강력한 선택자

위의 간결하고 직관적인 문법에서 가볍게 다루었는데 순수 JS 는 이전에 다룬 글처럼 getElementById, querySelector 등 용도에 따라 여러가지 방법으로 요소를 선택한다.

jQuery는 $(‘요소명’) 하나로 id, class, 태그 명 등을 입력해 모두 다룰 수 있다.

풍부한 플러그인 생태계

사실 상 웹 표준이라 한 이유는 정말 수많은 기존 웹 사이트가 jQuery 를 일부라도 사용했다. 그 만큼 수많은 플러그인이 존재한다.

AJAX 지원 – ⭐

jQuery 를 사용하면 자주 사용하게 될 AJAX 는 Asynchronous JavaScript and XML 의 약자로 웹 페이지가 서버와 비동기적(옵션으로 동기화 할 수 있다.) 으로 데이터를 교환하는 기술이다.

쉽게 말하자면 프론트가 백에 데이터를 전송/리턴 받을 수 있게 해주는 것.

이전 웹 학원을 다녔다면 대부분 Spring MVC 기반의 웹 사이트를 제작 했을 것이다.

그렇다면 프론트를 jQuery 로 개발해서 Server (Java) 쪽 Controller 로 데이터를 요청하는 방식으로 개발 했을 것.

이 때 jQuery 의 $.ajax 란 문법을 통해서 호출 했을 것이다.

쉬운 학습 곡선

코드가 간결하고 직관적이다 보니 학습이 아주 용이하다.

jQuery 가 가능한 일은 모두 JS 로 가능하지만, 더 많은 키워드와 메소드를 배우고 이해해야 하며, ES6 가 도입 되면서 새롭게 추가된 개념들도 많다.

jQuery 는 애초에 목적이 JS 로 어려운 걸 쉽게 하기 위해 처음 도입된 만큼 더욱 쉽게 학습하고 다룰 수 있다는 장점이 있다.

현대에 와서 jQuery 를 사용하지 않는 이유

그런데 이렇게 편리하고 영원할 것 같던 jQuery도 결국 시간이 흐르면서 더 이상 사용하지 말자는 분위기로 변해가고 있다. 그 이유가 무엇일까?

모던 JavaScript 의 발전

jQuery 도 계속 발전해 왔지만 JavaScript 도 지속적으로 발전해 왔다.

querySelector 도 원래는 지원하지 않았지만 HTML5 와 비슷한 시기에 도입되어 DOM 을 조작하기 위한 메서드다.

이 querySelector 가 jQuery 의 선택자 기능과 유사 하게 동작하므로 충분히 JS 도 간편하게 선택자 사용이 가능해 지면서 jQuery 의존도가 낮아졌다.

이처럼 발전한 JavaScript 에 의해 굳이 이전 보다 jQuery 를 사용하지 않아도 되는 환경이 되었다.

강력한 신규 라이브러리의 등장

최근 프론트엔드 개발자라면 사용 중 이거나 들어봤을 Angular, React, Vue.js 등, 컴포넌트 기반 아키텍처나 가상 DOM 등이 제공 되며 웹 개발 방식을 크게 변화 시켰다.

이런 현대적인 라이브러리로 복잡한 UI 등을 효율적으로 구현할 수 있게 되면서 jQuery 사용 비중이 자연스럽게 줄어가고 있다.

성능 및 최적화

이는 현대 하드웨어 성능이 뛰어나 지면서 쉽게 체감 되지 않긴 하지만, 어쨌든 순수 JS, 현대 라이브러리 등에 비해 jQuery 는 무거워 성능 저하가 발생 할 수 있다.

그래서 jQuery 는 페이지의 로딩 시간을 증가 하거나 파일 크기가 증가한다. (그래서 파일 크기를 줄이기 위해 min.js 형태로 플러그인이 개발 제공 되는 경우가 많다.)

결론적으로 말하자면 jQuery 는 기존 JS 에서 어려웠던 개발을 효율적으로 진행 할 수 있게 해준 라이브러리다.

근데 그 만큼 JS 의 발전으로 더 이상 jQuery 를 쓰지 않아도 되기 시작하면서 그 역할이 많이 줄은 상태라 보면 된다.

그리고 jQuery 와 다른 개념으로 아예 새로운 개발 방식을 제공하는 현대 라이브러리들 대비 꼭 써야 되는 장점도 현재는 줄은 상태다.

그럼에도 아직 많은 사이트가 전환 되지 않은 시점에 jQuery 의 기초적인 지식은 곧 필요 없어질지 몰라도 아직 까진 익혀 두어야 한다 생각이 들어 한번 정리해볼 계획이다.