나무모에 미러 (일반/밝은 화면)
최근 수정 시각 : 2025-04-03 14:15:33

jQuery

웹 프레임워크 기술
{{{#!wiki style="margin:0 -10px"
{{{#!folding [ 펼치기 / 접기 ]
{{{#!wiki style="margin:-5px 0px -10px; word-break:keep-all"
$ 유료 포함 • 취소선 단종 및 중단
<colbgcolor=#f6f6f9,#2f3241> 프론트엔드<colbgcolor=#fcfcfd,#272935> CSS BootstrapTailwind CSSBulmaFoundationSkeletonPico
JSX ReactSolidJSAstroPreactGatsbyRemixInfernoQwik
JS AngularSvelteBackbone.jsjQueryAstrohtmxEmber.jsLit11tyMarkoVanJSAlpine.js
Vue Vue.jsVuePressGridsomeQuasarAstro
Python Reflex
백엔드 Java SpringStrutsGWTGrailsJoobyPlay! FrameworkScala
Kotlin Ktor
JS ExpressNestJSkoaHonofastify
.NET ASP.NET$
PHP LaravelCodeigniterReasonablephalconSymfonyzendCakePHPFuelPHPYiiSlimPHPixe
Python DjangoFlaskFastAPI
Ruby Ruby on RailsSinatra
Go GinechoFiber
풀스택 JSX Next.jsAstroSolidStartRemixQwik City
JS SvelteKitFreshAstroMarko
Vue Nuxt.jsAstro
Java Vaadin$
Python StreamlitReflex
Rust RocketActixLeptosAxum
하이브리드 .NET Blazor
Dart Flutter
Kotlin Kotlin Multiplatform
}}}}}}}}} ||
<colbgcolor=#0769ad><colcolor=#fff> 제이쿼리
jQuery
파일:jQuery 로고.svg
제작자 존 레식(John Resig)
분류 자바스크립트 라이브러리
출시 2006년 8월 26일
언어 JavaScript
버전 3.7.1 (4.0.0 Beta)
라이선스 MIT 라이선스
링크 파일:홈페이지 아이콘.svg 공식 사이트
파일:홈페이지 아이콘.svg jQuery UI
파일:홈페이지 아이콘.svg jQuery Mobile
파일:페이스북 아이콘.svg 파일:GitHub 아이콘.svg파일:GitHub 아이콘 화이트.svg
1. 개요2. 특징3. 현황4. 여담


1. 개요

write less, do more.
HTML클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 JavaScript 라이브러리이다. 존 레식(John Resig)에 의해 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개되었다.

JavaScript의 지속적인 개선으로 대부분은 바닐라 JavaScript로 구현할 수 있게 되었고, Virtual DOM을 이용하는 React와 같은 좋은 대안들의 등장 등의 이유로 현재는 출시 초기의 위상에 비하면 입지가 많이 낮아진 상태이다. Template Engine을 활용한 구식 SSR과 함께 사실상 레거시 용도.

2. 특징

jQuery는 다음과 같은 기능을 갖고 있다.
기능적으로야 더 좋은 라이브러리들도 많지만, jQuery가 순식간에 업계를 장악한 특장점은 바로 무지하게 쉽고 간편하다는 점이다. 'write less, do more.'가 모토로서 비프로그래머인 웹디자이너들도 어렵지 않게 이해할 수 있을 만큼 쉬운 편이다. DOM 구조와 CSS에 대한 지식만 있다면 애니메이션 같은 건 바로 이해가 가능할 정도다. 실제로 저자인 존 레식은 프로그래머들의 칭찬보다 순수 웹디자이너들의 감사 인사가 더 특별한 기쁨이라고 한다.

출시되었을 당시 좀 더 근본적인 목표는 모든 웹 브라우저에서 동일한 방법으로 자바스크립트를 구현하는 것이었다. 이것은 동시기에 나온 다른 자바스크립트 라이브러리도 마찬가지였다. jQuery가 나왔던 2000년대 중반은 웹 브라우저들간의 자바스크립트 호환성이 낮아서 개발자들이 골치를 썩던 시절이었다[6]. 따라서 라이브러리에서 제공하는 별도의 API를 통해 자바스크립트 코드를 작성하고, 라이브러리에서 이 코드를 사용자들이 접속한 웹 브라우저에 맞게 변환하여 실행하는 여러 라이브러리가 나왔고, 그 중 가장 쉽고 간편한 API 문법을 제공했던 jQuery가 살아남은 것이다.

jQuery는 Behavioral model(행동 모델)에 기초한 아키텍처를 따른다. 특히 jQuery는 메서드 체이닝을 통해 DOM 엘리먼트를 조작한다. 예를 들어 기존에 이렇게 했다면[7],
#!syntax javascript
const textNode = document.querySelector("#textNode");
textNode.style.color = "red";
document.querySelector("#someDiv").appendChild(textNode);

jQuery에선 이렇게 한다. 대신에 속도가 좀 더 느리다. 속도가 느린 이유는 jQuery 라이브러리를 거치면서 브라우저에 맞는 네이티브 자바스크립트로 변환된 뒤 실행되기 때문이다.
#!syntax javascript
$("#textNode").css("color","red").appendTo("#someDiv");

jQuery는 MIT 허가서GPL v2의 듀얼 라이선스를 가진 자유 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, AJAX 개발이 쉽도록 디자인 되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다. 덕분에 수많은 jQuery 플러그인들이 개발되어 있다!

마이크로소프트노키아는 자사 플랫폼에 jQuery를 포함하는 계획을 발표한 바 있다. 마이크로소프트Visual Studio의 ASP.NET AJAX 프레임워크와 ASP.NET MVC 프레임워크에 적용했고, 노키아는 자사의 런타임 웹 위젯 개발 플랫폼에 통합하였다.

jQuery를 기반으로 하는 라이브러리가 많은데, HTML5 Boilerplate나 트위터 Bootstrap 버전 4 이하[11]도 jQuery 기반으로 작동한다.

jQuery Mobile도 있었는데, 모바일 웹페이지나 HTML5 웹앱 등의 제작에 사용하는 웹 개발 프레임워크다.[12] HTML5 웹앱 프레임워크들이 대개 그렇듯 iOS, 안드로이드는 당연히 지원하고, Windows Phone, 블랙베리, 심비안 등 웬만한 기기는 다 지원했다. 2014년 이후 업데이트 없었고 2018년에 중단되었다. 현재로써는 거의 사양세.

3. 현황

여전히 웹 프론트엔드에서 막강한 영향력을 차지하고 있는 jQuery이지만 최근 웹 개발 트렌드인 React, Vue.js, Svelte 같은 SPA프레임워크나 라이브러리의 등장으로 위세가 약해지고 있다. SAP 프레임워크를 통해 컴포넌트, MVC, 양방향 데이터 바인딩 등의 고수준적인 개념을 활용하여 jQuery 없이도 높은 생산성을 보여주기 때문이다. [13]

하지만 SPA 프레임워크와 jQuery를 혼용할 수 있고, SPA 프레임워크가 모든 요구사항을 만족시킬 수 있는 만능 솔루션이 아니기 때문에 jQuery에 대한 수요는 앞으로도 있을 것이다.[14] 애초에 jQuery는 SPA 프레임워크와 기능이 겹치지 않으며 완전한 경쟁관계가 아니다. 오히려 jQuery의 경쟁상대는 표준 자바스크립트라고 볼 수 있다. 따라서 React나 Vue를 통해 웹사이트를 구축하면서도 jQuery를 사용하기도 하고, React나 Vue를 사용할 수 없는 요구사항에는 대부분 jQuery가 포함된다. jQuery의 장점은 간결한 문법과 높은 생산성인데, 표준 네이티브 자바스크립트가 많이 발전했어도 여전히 jQuery가 단순하고 편리하다. 예를들어 DOM을 쿼리하는 코드만 봐도 표준 자바스크립트 코드는 document.querySelector()이지만 jQuery는 $()로 훨신 간결하다.

SPA[15]가 아닌 MPA[16]로 웹사이트를 개발해야 하거나 백엔드를 기존의 오픈소스 솔루션을 사용한다면 여전히 jQuery가 유효하다. 예를들어 아직도 많은 점유율을 차지하는 CMS[17]워드프레스그누보드, XpressEngine 등은 서버에서 프론트엔드(스킨, 테마 등)로 뿌려주는 결과물이 HTML이라 React 같은 것을 사용하기에 곤란한 점이 많다. 또 다른 예로는 SEO[18]가 중요하면서 정적 컨텐츠 위주의 웹사이트인 경우 SPA보다는 MPA로 개발하는 것이 유리하며, 이 경우 jQuery가 유용하게 사용될 수 있다.[19]

그럼에도 jQuery는 개발 트렌드의 변화와 웹개발 기술의 발전으로 예전만큼 높은 위상을 유지할 수가 없을 것이다. 점차 SPA 프레임워크/React/ES6 이후의 최신 표준 바닐라 JS로 대체되거나 아예 사멸할 것이라는 의견도 종종 보인다. 네이버 포탈마저 일반 JS였다가 jQuery로 바뀌었다가 네이버카페등 일부 서비스에서 Vue.js 를 사용한다. 실제로 jQuery로 짜다가 ECMAScript 6 이상의 표준으로 네이티브 자바스크립트 코딩을 해 보면 예전과 달리 jQuery와 개념이 많이 유사해졌다는 것을 알 수 있다. 자바스크립트가 그 동안 발전이 안 된 것이 아니라서 예전처럼 복잡하게 코딩을 할 필요성이 많이 줄어들었기 때문이다.

2021년 하반기 기준, 추세를 보면 JavaScript의 기능 자체가 좋아지면서 jQuery 의존도가 점차 낮아지는 경향이 있다. 차세대 프로젝트로 갈아엎어짐과 동시에 그누보드, XE의 점유율 자체가 낮아진 효과로 보인다. 워드프레스는 SPA 기반 소스가 있다.

2025년 4월 기준으로 전체 웹 사이트의 74%는 jQuery를 사용하고 있다.# 지난 10년간은 국내 기업이 가장 많이 사용하는 오픈소스도 jQuery다.[20]

4. 여담


[1] 어디까지나 브라우저가 지원하는 것까지만. IE8 이하에서는 죽어라 border-radius 등을 줘도 안먹는다.[2] 간단한 것만 가능하며 복잡한 애니메이션이 필요하다면 jQuery UI라는 확장기능을 사용해야 한다.[3] IE, 모질라 파이어폭스, 오페라, WebKit 등을 판별할 수 있다. 다만 1.9 버전 이후부터 삭제되었다. 굳이 사용하고 싶다면 jQuery Migrate라는 플러그인을 사용해야 한다. 이 플러그인은 구형 버전에서 지원되었으나 최신 버전에서 삭제된 함수를 사용 가능하게 해 준다.[4] 삭제되었다기 보다는 플러그인으로 분리되어 나갔다고 보는게 더 옳다. migrate는 말 그대로 삭제된 기능을 되살리는 플러그인이고, 브라우저를 구분해주는 플러그인은 따로 있다. 플러그인으로 분리해 두지 않으면, 메인 jQuery자체가 버전업 되기 전까지는 새로 출시된 브라우저들을 지원할 수 없고, 역으로 브라우저 정보만 업데이트 되고 기능상 변경이 거의 없는데도 메인 버전이 올라가는 사태를 방지하기 위해서 분리되었다고 보는게 옳다.[5] 배열이나 객체 등의 집합에서 요소를 차례로 훑는다. native JS에서는 "forEach" 함수가 비슷한 역할을 한다.[6] 특히 표준과 따로 노는 IE가 가장 악명높았다. 이쪽은 아예 명칭부터가 JScript였다. IE가 하도 따로 노는 데다 점유율도 높다 보니 파이어폭스에서도 document.all 같이 IE 전용 문법을 도입할 지경이었다.[7] 사실 jQuery가 각광을 받았던 2000년대 말~2010년대 초중반 때는 이렇게 쓸 수 없었다. const 는 크롬21(2012년), IE11(2013년) 이상 등에서 지원하며 querySelector 는 IE 8이상에서만 실행됐기 때문에 하위호환성을 위해 쓰기 어려운 getElementsByID 같은 구문을 써야 했다.[8] CSS 선택자와 동치이다. 해당 선택자는 HTML 태그 중 id="textNode"라는 값이 있는 맨 첫번째 요소를 가리킨다(id는 HTML 문서 내에서 유일한 값이어야 한다).[9] 기적의 호이스팅(변수나 함수를 먼저 사용하고 후에 선언문을 추가해도 제대로 돌아간다)이 생겨서 쥐도 새도 모르게 $를 재선언한다면 jQuery.noConflict()를 호출해서 $대신 jQuery()라는 함수를 사용해도 된다. 또한 제이쿼리로 쓰는 모듈을 (function($){○○○○○○})(jQuery)로 감싸기도 한다.[10] 해당 DOM 요소에 style = "color:red;"를 적용[11] 버전 5부터는 jQuery가 제외되었다.[12] 즉, 모바일 웹페이지에서 jQuery를 사용하려면 그냥 jQuery를 사용하는 것이지 jQuery Mobile를 사용하는 것이 아니다.[13] ES6등장 이후 DOM을 직접 건드리는 개발 방식은 안티패턴(나쁜패턴)을 양산할 수 있기 때문에 기피되는 분위기이다.[14] 실제로 전세계 트래픽 상위 1만 개 사이트 중 jQuery 의 점유율은 2020년에도 여전히 과반인 54%나 차지 하고 있으며 2025년 현재도 여전히 jQuery 사용하는 웹사이트 비율이 높다. (참고)[15] Single Page Application[16] Multi Page Application[17] 웹사이트에 컨텐츠를 게시하고 관리하기 위한 소프트웨어 또는 플렛폼[18] Search Engin Optimization[19] SPA는 Web Application 개발에 큰 장점을 가지지만, 정적 컨텐츠 위주의 Web Site 개발에는 장점이 희석되는 편이다.[20] 국내 기업이 가장 많이 사용하는 오픈소스는 j쿼리, 2021-03-08, 지디넷코리아[21] 구현을 전혀 못했을 시 실격 사유에 해당된다. 물론, 부정행위는 아니니 응시 제한 등의 불이익은 없다.[22] 특히 10 버전 이전의 Internet Explorer가 그렇다.[23] 강제업그레이드를 하는 이유는, 구형 브라우저 취약점이 악용돼 감염된 컴퓨터는 DDoS 봇이나 랜섬웨어의 배포 경유지로 악용돼 남들까지 피해를 입히기 때문이다. 다만 구버전의 OS는 강제 업그레이드에서 비껴가는 경우가 많다. 대표적으로 Windows XP는 IE 8까지만 지원한다.