제이쿼리 편집하기

[[파일:제이쿼리 로고.png|썸네일|200픽셀|'''제이쿼리'''(jQuery)]]
[[파일:제이쿼리 글자.png|썸네일|300픽셀|'''제이쿼리'''(jQuery)]]

'''제이쿼리'''<!--jquery-->(jQuery)란 [[HTML]] 문서에 삽입하여 사용할 수 있는 [[자바스크립트]] [[라이브러리]]를 말한다. 단순하게 웹사이트를 만들 때 사용하는 일종의 도구라고 생각할 수 있다. 매우 쉽고 간단하기 때문에[[HTML]], [[CSS]], [[자바스크립트]]에 관한 기초지식만 있다면 짧고 단순한 코드로 다양한 효과를 연출할 수  있다.

== 개요 ==
제이쿼리는 자바스크립트 안에 있는 여러 라이브러리 중 하나이다. 2006년 존 레식(John Resig)에 의해 처음 공개되는데 빠르고, 짧고 간단하다는 장점으로 업계를 장악할 수 있었다. 하지만 버전 2 이후로 IE 8 이전 버전에서 호환이 중지되면서 여전히 많은 웹 사이트에서는 jQuery 버전 1을 많이 사용하고 있다. 최근 해외 추세를 보면 자바스크립트의 기능 자체가 좋아져 제이쿼리의 의존도가 점차 낮아지는 경향이 있다.<ref>〈[https://namu.wiki/w/jQuery#fn-1 jQuery]〉, 《나무위키》</ref>

== 등장 배경 ==
제이쿼리는 미국 넷스케이프(Netscape)의 브렌든 아이크(Brendan Eich)가 개발한 [[스크립트]] [[프로그래밍 언어]]인 [[자바스크립트]](JavaScript)를 [[웹 사이트]]에서 더욱더 손쉽게 활용하기 위해 만들어진 [[오픈 소스]] 기반의 라이브러리이다. <br>2006년 1월 16일 [[웹 디자이너]]인 존 레식(John Resig)가 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개했으며<ref>Khan Academy, 〈[http://a.to/19DspzB jQuery의 역사: 존은 어떻게 jQuery를 구축했을까요?]〉 , 《Khan Academy》, 2006. 1. 16.</ref>, 현재는 jQuery Team이라는 개발자 그룹이 jQuery Foundation을 통해 개발과 유지 보수를 담당하고 있다.<ref name="아라이쿠마">araikuma, 〈[https://araikuma.tistory.com/605?category=820803 (jQuery) 개요]〉,《티스토리》, 2018-11-09</ref>

== 특징 ==
제이쿼리는 HTML의 [[클라이언트]] 사이드 스크립트 언어를 단순화하도록 설계된 [[브라우저]] 호환성이 있는 자바스크립트 라이브러리이다. 비교적 쉽고, 간단하며 더 많은 기능을 사용할 수 있어 인기를 얻을 수 있었다.<ref>제이쿼리 공식 홈페이지 - https://jquery.com/</ref> HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 [[Ajax]]를 활용할 때 유용하다. 수많은 라이브러리 중에서도 제이쿼리가 특이 많이 사용되는 이유는 다음과 같다.<ref>codedragon, 〈[https://codedragon.tistory.com/3466 jQuery의 특징]〉 , 《티스토리》, 2016-01-14</ref>

:{|border=2 width=900
|+<big></big>
!align=center|특징
!align=center|설명
|-
|align=center|단순화
|align=left|
* 불필요한 코드를 줄이고 간결한 형식으로 단순화시킴으로써, 코드 가독성과 개발 효율성을 많이 증가 시켰다.
* 자바스크립트보다 코드가 간결하여 학습이 쉽다.
|-
|align=center|DOM
|align=left|
* 문서 [[객체]] 모델을 좀 더 쉽게 접근하여 조작할 수 있다.
|-
|align=center|이벤트 연결
|align=left|
* 이벤트 연결을 쉽게 구현할 수 있는 기능을 제공한다.
* 브라우저마다 이벤트 전달 방식이 달라 생기는 브라우저 간의 차이로 발생하는 문제점을 쉽게 해결할 수 있다.
|-
|align=center|  크로스 브라우징 
|align=left|
* 웹 표준에 기반을 두어 제이쿼리로 다양한 브라우저에서 동작하는 코드를 작성할 수 있다.
* [[PC]]와 [[모바일]]에서도 작동이 가능하다.
|-
|align=center|  효율적인 셀렉터 
|align=left|
* :empty, :odd, :even 등 CSS에서 사용되는 셀렉터를 이용하여 원하는 요소를 편리하게 선택할 수 있다.
* 요소들(elements)을 선택하는 강력한 방법을 제공하여 선택된 요소들을 효율적으로 제어할 수 있는 다양한 수단을 제공한다.
|-
|align=center|시각적 효과
|align=left|
* 시각적 효과를 쉽게 구현한다.
|-
|align=center|[[Ajax]]의 단순화
|align=left|
* 제이쿼리를 이용하면 Ajax를 더욱 단순하게 만들 수 있어 Ajax [[애플리케이션]]을 쉽게 개발할 수 있다.
|-
|align=center|애니메이션 구현
|align=left| 
* 웹 표준만으로 [[플래시]]와 실버라이트를 사용하는 것과 비슷한 효과를 구현할 수 있어 애니메이션 구현을 쉽게 할 수 있다.
|}

== 장단점 ==
===장점===
* 멀티 브라우저 지원
* 코드가 단순하여 쉽게 사용 가능
* 서버 사이드 코드와 클라이언트 사이드 코드를 효과적으로 분리작업, 분업작업이 가능
* Ajax를 사용하고, 클라이언트 객체를 통해 작업하여 페이지가 가볍고 빠름
* 오픈 소스이므로 타 개발자들의 소스를 분석 및 [[플러그인]] 형태로 붙여넣는 게 쉬움
* 구조적인 코딩이 가능하여 클라이언트용 RIA 컨트롤을 만들기가 용이

===단점===
* [[디버깅]], 에러 핸들링이 어려움
* 코드 관리가 어려움
* [[업데이트]]의 문제
* Virtual DOM과 상성이 안 좋음<ref>박종희, 〈[https://www.tokyobranch.net/archives/7463 이제와서 JQUERY를 쓰면 안되는 이유 PART2]〉, 《TOKYO BRANCH》, 2017-09-04</ref>

== 종류 ==
제이쿼리는 jQuery Team이라는 개발자 그룹이 jQuery Foundation을 통해 버전 개발 및 유지 보수가 진행되고 있다.
=== jQuery 버전 1 ===
2006년 6월 30일 : 1.0a 버전 출시<br>
최신 버전 : jQuery Core 1.12.4<br>
jQuery 버전 1은 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전이다.
=== jQuery 버전 2 ===
2013년 4월 18일 : 2.0 버전 출시<br>
최신 버전 : jQuery Core 2.2.4<br>
jQuery 버전 2는 버전 1에서 지원하는 익스플로러 6, 7, 8 버전에 대한 지원을 중단한 버전이다.
=== jQuery 버전 3 ===
2016년 6월 9일 : 3.0 버전 출시<br>
최신 버전 : jQuery Core 3.4.1<br>
jQuery 버전 3은 기존 버전과의 호환성을 유지한 채 더욱더 간결하게 작성되고, 더욱더 빠르게 동작하도록 변경되었다.

== 문제점 ==
제이쿼리의 가장 큰 단점은 속도이다. 속도가 순수 자바스크립트로 [[코딩]]한 것보다 느리고, 특히 애니메이션을 할 경우, 브라우저가 지원하는 [[CSS]] 애니메이션보다 느린 경우가 많다. 브라우저는 특정 상황에서 [[GPU]]를 사용하여 애니메이션을 표현하기 때문에 훨씬 빠르다. <BR>여기서 문제 되는 게 구형 브라우저일수록 더 느리다는 것이다. 제이쿼리를 하는 이유가 [[IE]]를 쉽게 지원하기 위해서이지만, 오히려 구형 브라우저에서 속도 문제를 야기할 수 있다. <br>또다른 문제는 코드 관리가 어렵다는 것이다. 제이쿼리는 코드가 간결하기 때문에 사람들이 쉽게 생각 할 수 있는데, 코드가 짧기 때문에 코드를 평소보다 많이 붙이게 되어 코드가 꼬이거나 겹칠 경우가 많다.
특히 자바스크립트를 접한 지 얼마 안 된 초보자들이 제이쿼리의 원리를 모른 채 코딩을 하게 되어 코드의 품질이 낮아지는 문제가 있다.<BR>또한 버전 2부터 IE 8 이전 버전은 호환이 안 되기 때문에 사람마다 너무 다른 버전을 사용하고 있기 때문에 버전 1 을 사용하는 사람들의 경우 차후의 서포트를 받지 못하게 될 수 있다.

== 대안 ==
최근 몇 년 사이 웹 브라우저에서 자바스크립트를 처리하는 기능까지 나왔기 때문에 호환성 문제에 대해서는 제이쿼리가 필요 없다.
그래서 제이쿼리를 대신할 대체재가 많이 생겼다.

===캐시===
[[캐시]](cash)는 MIT 라이선스에 따라 배포되는 오픈 소스 자바스크립트 라이브러리이다. [[깃허브]](github)에서 3,570개 이상의 별을 받은 [[프로그램]]으로 브라우저용 '매우 단순한 제이쿼리 대체재'로 유명하다. 캐시를 이용하면 제이쿼리 스타일의 문법으로 [[DOM]]을 사용할 수 있으며, 압축 없이 32KB의 공간만 차지한다. 네임스페이스 이벤트, 타임스크립트 형식, 현대화된 빌드 등을 지원한다.

===젭토===
[[젭토]](zepto)는 폭넓은 제이쿼리 호환성을 지원하는 API가 포함된 초경량 자바스크립트 라이브러리이다. 제이쿼리를 써왔던 개발자라면 무리 없이 사용할 수 있다고 한다. 또한 제이쿼리보다 더 작고 빠르게 로드되며, 모바일 혹은 [[데스크톱]] 브라우저용 폰갭(PhoneGap) 툴셋과도 함께 사용할 수 있다.

===싱크퓨전 에센셜 JS 2===
[[싱크퓨전 에센셜]] JS 2는 타입스크립트로 만든 상용 라이선스의 자바스크립트 [[UI]] 컨트롤 라이브러리이다. 제이쿼리 UI 라이브러리의 대안으로, 웹 애플리케이션을 개선하면서 부하가 적고, 가벼운 모듈형 라이브러리이다. 싱크퓨전은 [[앵귤러]](Angular), [[리액트]](React), [[뷰]](Vue) 등의 [[프레임워크]]를 지원한다.<ref>김진범 기자, 〈[https://www.codingworldnews.com/article/view/848 한물간 제이쿼리(jQuery)를 대체하는 자바스크립트 라이브러리 3가지]〉, 《코딩월드뉴스》, 2019-05-10</ref>

{{각주}}

== 참고자료 ==
* 제이쿼리 공식 홈페이지 - https://jquery.com/
* 〈[https://ko.wikipedia.org/wiki/JQuery jQuery]〉, 《위키백과》
* 〈[https://namu.wiki/w/jQuery#fn-1 jQuery]〉, 《나무위키》
* Khan Academy, 〈[http://a.to/19DspzB jQuery의 역사: 존은 어떻게 jQuery를 구축했을까요?]〉, 《Khan Academy》, 2006. 1. 16.
* araikuma, 〈[https://araikuma.tistory.com/605?category=820803 (jQuery) 개요]〉, 《티스토리》, 2018-11-09
* 코딩샘, 〈[https://blog.naver.com/coding_sam/221422380387 제이쿼리 기초 JQuery 무료 코딩 실습하기 (TCPSchool)]〉, 《네이버 블로그》, 2018-12-19
* codedragon, 〈[https://codedragon.tistory.com/3466 jQuery의 특징]〉, 《티스토리》, 2016-01-14
* 송썬, 〈[http://a.to/19Vn92q jQuery의 (WEB)특징,장단점]〉, 《티스토리》, 2016-01-05
* ZeroCho, 〈[http://a.to/19f2rdi 제이쿼리는 필요 없을 수도 있다?]〉, 《ZeroCho TV》, 2016-08-22
* 박종희, 〈[https://www.tokyobranch.net/archives/7463 이제와서 JQUERY를 쓰면 안되는 이유 PART2]〉, 《TOKYO BRANCH》, 2017-09-04
* 마이구미, 〈[https://mygumi.tistory.com/204 jQuery 더이상 쓰지 않아야하는가? ::마이구미]〉, 《티스토리》, 2017-08-28
* 김진범 기자, 〈[https://www.codingworldnews.com/article/view/848 한물간 제이쿼리(jQuery)를 대체하는 자바스크립트 라이브러리 3가지]〉, 《코딩월드뉴스》, 2019-05-10

== 같이 보기 ==
* [[프로그래밍 언어]]
* [[자바스크립트]]
* [[HTML]]
* [[CSS]]
* [[라이브러리]]

{{프로그래밍|검토 필요}}