jQuery

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

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

jQuery는 Behavioral model(행동 모델)에 기초한 아키텍처를 따른다. 특히 jQuery는 메서드 체이닝을 통해 DOM 엘리먼트를 조작한다. 예를 들어 기존에 이렇게 했다면,

const textNode = document.querySelector("#textNode");
textNode.style.color = "red";
document.querySelector("#someDiv").appendChild(textNode);

jQuery에선 이렇게 한다. 대신에 속도가 좀 더 느리다.

$("#textNode").css("color","red").appendTo("#someDiv");

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

여기저기서 많이 쓰다 보니 JavaScript로 웹 개발을 하는 개발자라면 당연히 jQuery를 쓴다고 생각하는 모양. 실제로도 경험이 부족한 개발자들이 jQuery가 없으면 간단한 DOM 조작도 어려워한다.[4] jQuery는 JavaScript를 편하게 사용할 수 있게 지원하는 라이브러리이지 정식 언어가 아니다! 언제까지나 기초는 JavaScript임을 명심하고 기초를 튼튼히 하자. jQuery만 쓰게 되면 이렇게 된다. 부연설명을 하자면, JavaScript에서 덧셈을 하는 방법을 묻고 있는데 댓글들은 뜬금없이 jQuery 사용하라고, jQuery가 최고라고 찬양하는 상황이고 그런 댓글들에 추천이 달려 있다. “jQuery요법을 썼더니 10kg가 빠졌어요!”라는 말도 하고 맨 밑의 올바른 설명을 한 댓글은 jQuery 사용을 안했다고 비추천이 달려 있다(...). 물론 사람들이 놀려먹는 것이고, Stack Overflow 규정 상 이럴 일은 없다.

여전히 웹 프론트엔드에서 막강한 영향력을 차지하고 있는 jQuery이지만 최근 웹 개발의 트렌드는 리엑트, Vue.js, 스벨트, 같은 SPA용 프레임워크나 라이브러리로 옮겨가고 있다. 프레임워크를 통해 컴포넌트, MVC, 양방향 데이터 바인딩 등의 고수준적인 개념을 활용하는 것에 반해 jQuery는 여전히 밑바닥 DOM을 건드리는 데 지나지 않는지라...[5] 하지만 프레임워크를 쓰면서도 jQuery의 기능을 사용할 수 있고, 프레임워크가 모든 경우에 정답은 아니기 때문에 jQuery에 대한 수요는 앞으로도 있을 것이다.[6](참고) SPA 개발을 위해 나온 것으로 React도 있는데, 이건 프레임워크가 아니라 jQuery와 같은 라이브러리이다. 페이스북에서 개발하였으며 jQuery보다 우수한 Virtual DOM의 활용 등으로 순식간에 점유율을 크게 확대하였다. 다만 jQuery에 비해 난이도가 좀 더 높고, JSX라는 별도의 문법을 사용해서 해서[7] 전체적으로는 아직 jQuery가 React보다 많이 쓰인다.

다만 이것은 반쯤 걸러 들어야 할 것이, 2000년대 중반 거의 JS가 나온지 5~6년 남짓 된 웹 초창기 시절부터 2010년대 중반까지의 무려 10년간 확고한 위치를 고수했던 관계로 Legacy가 많아서 그런 것이지, 현재로써는 신규 프로젝트, 신규 인력만 놓고 본다면 Angular도 한 물 가고 있고, React 가 대다수이고 Vue.js도 일부 있다. 십중팔구 React. 레거시가 많고 아예 자체 프레임워크/라이브러리를 가진 대기업이 아닌 대부분의 중소기업, 스타트업, 중견기업의 신규 웹 프로젝트도 React. 여기에 Vue.js가 꼽사리 끼는 정도이다. 원티드 또는 로켓펀치의 채용공고나, 오키 등의 개발자 커뮤니티 등을 찾아보면 신규 프로젝트, 신규 인력 기준으로는 React : Vue.js : Angular : 기타 == 6 : 2 : 1 : 1 정도의 비율을 보인다. 구글 검색 통계만 봐도 React가 압도적이다. 리액트 관련 기술문서, 자료의 조회수의 1/3~절반 정도가 Vue.js의 통계와 유사하고, Angular는 1/5정도, jQuery는 10% 정도이다. 물론, 기술문서나 자료를 검색하고 찾아보는 사람들이 전부 해당 스택으로 개발 중이라는 보장은 없고, jQuery는 나온지 15년이나 되었으니 개발자들도 충분히 숙련되고 정석 수준으로 사내 매뉴얼, 각종 도서 등이 정리가 돼서 구글링의 빈도가 줄어드는 효과도 있고 대부분 커뮤니티 등에서 조언을 구해도 "대충 jQuery코드 읽을줄만 알면 된다."''' 라는 반응이 대부분이다.

아무래도 진부화 및 노후화로 jQuery는 결국 저물 수밖에 없다. Legacy가 아무리 많다고 해도 퇴직 직전의 40~50대 시니어 개발자가 아닌 이상 신입 개발자에겐 jQuery는 미래가 없다. 뭐 10년 정도만 일자리가 보장이 되면 대강 일하다가 10년 뒤에 시한부 밥그릇이 통째로 아작나도 상관없는 시니어라면 모르겠으나, 주니어라면, 유지보수하는 곳보다는 신규 프로젝트를 하는 곳이 좋다고 한다. 어디 임베디드 기기나 POS기, 전광판 같은데 짱박혀서 돌아가는 코드도 아니고, 5년이면 강산이 바뀌는 웹이기에 2020년대 중후반만 되어도 Legacy 마저 점차 프레임워크/React/ES6 이후의 최신 표준 Native JS로 부분부분 대체되거나 아예 서비스 종료 또는 밑바닥부터 재개발 등의 이유로 사멸할 것이라는 의견도 종종 보인다. 당장 그 대표적인 네이버 포탈마저 일반 JS였다가 jQuery로 바뀌었다가 네이버카페등 일부 서비스에서 Vue.js 를 사용한다.

물론 이렇게 하려면 프론트엔드와 백엔드를 모두 새로 개발하는 프로젝트여야 하며, 백엔드를 기존의 오픈소스 솔루션을 사용한다면 여전히 jQuery가 유효하다. 특히 아직도 많은 점유율을 차지하는 워드프레스나 그누보드, XpressEngine 등은 백엔드(코어)에서 프론트엔드(스킨, 테마 등)로 뿌려주는 결과물이 HTML이라 React 같은 것을 사용하기에 곤란한 점이 많다. 코어 소스를 수정하거나[8] 플러그인 등을 사용해서[9] 결과물을 JSON 같은 것으로 오가게 하는 방법이 있지만 전자는 사이트 유지보수가 크게 어려워지는 단점이 생기고, 후자는 플러그인을 한 단계 더 거치기 때문에 서버 부하가 커지는 단점이 생긴다.

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

라이브러리 이걸 기반으로 하는 경우가 많은데, HTML5 Boilerplate나 트위터 Bootstrap[10]도 jQuery 기반으로 작동한다.

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

jQuery는 다음과 같은 기능을 갖고 있다.

덕분에 대한민국의 국가기술자격인 웹디자인기능사 실기시험에서 기존에는 애니메이션 효과를 Flash로 주다가 2017년부터는 jQuery로 바꿔서 출제되고 있다. 웹디자인기능사 자격증을 취득하려는 사람들은 의무적으로 jQuery를 사용해서 서브메뉴와 팝업창을 숨겼다 띄웠다 할 줄 알아야 하고, 대형 이미지 슬라이드를 움직일 줄 알아야 하는 것이다.

jQuery는 본래 1.x, 2.x, 3.x 버전의 세 가지 종류가 있었다가 1.x, 2.x 버전은 모두 업데이트가 종료되고, 3.x 버전만 업데이트되고 있다. 후대 버전으로 갈수록 구형 브라우저 지원을 위한 레거시 코드를 삭제하여 용량이 작고 속도도 더 빠르다. Internet Explorer 8 이전 버전의 호환이 필요하다면 1.x를 사용해야 한다. 1.x 버전 중에서도 특히 1.9 버전은 하위 호환성이 떨어지는데, 1.9에서 삭제된 것들이 많기 때문이다. 이 때문에 연식이 오래된 툴일 경우에는 호환성 문제 때문에 1.8 버전에서 머무는 경우가 많다. 1.9 버전 이상을 사용하면서 1.8 이하 버전의 호환성을 유지하려면 jQuery Migrate라는 플러그인을 사용하면 된다. 하지만 구형 브라우저는 jQuery뿐만 아니라 HTML5에만 있는 태그와 CSS에서도 문제를 일으키는 데다가[17] 보안 문제 때문에 강제업그레이드가 이루어지며 사용자가 거부할 수 없게 되어 있다.[18] 따라서 2020년 현재는 3.x버전을 쓰는 게 정답이다.

2018년 하반기 기준, 역시 국내는 논외로 하고 해외 추세를 보면 JavaScript의 기능 자체가 좋아지면서 jQuery 의존도가 점차 낮아지는 경향이 있다.

2020년 12월 기준으로 전체 웹 사이트의 77.2%는 jQuery를 사용하고 있다.#

서버 사이드 JavaScript 엔진인 Node.js에서도 jQuery를 사용할 수 있다. 단 Node.js에는 window 전역 객체가 없기 때문에 jsDom이라는 라이브러리를 추가로 설치해야 한다. 역시 DOM 조작에 사용한다. 보통 복잡한 템플릿 코드를 서버 쪽에서 생성하거나 웹 크롤러를 만들 때 사용한다.

2016년 6월 9일, jQuery 3.0이 정식 출시되었다.

나무위키에서는 the seed 4.12.0(2019년 9월 말 전)까지 jQuery 2.1.4 버전을 사용했다.