| 최신판 |
당신의 편집 |
| 1번째 줄: |
1번째 줄: |
| − | [[파일:제이쿼리 로고.png|썸네일|200픽셀|'''제이쿼리'''(jQuery)]]
| + | '''제이쿼리'''<!--jquery-->(jQuery)란 [[HTML]] 문서에 삽입하여 사용할 수 있는 [[자바스크립트]] [[라이브러리]]를 말한다. <br>매우 쉽고 간단하기 때문에[[HTML]], [[CSS]], [[자바스크립트]]에 관한 기초지식만 있다면 짧고 단순한 코드로 다양한 효과를 연출할 수 있다. |
| − | [[파일:제이쿼리 글자.png|썸네일|300픽셀|'''제이쿼리'''(jQuery)]] | |
| | | | |
| − | '''제이쿼리'''<!--jquery-->(jQuery)란 [[HTML]] 문서에 삽입하여 사용할 수 있는 [[자바스크립트]] [[라이브러리]]를 말한다. 단순하게 웹사이트를 만들 때 사용하는 일종의 도구라고 생각할 수 있다. 매우 쉽고 간단하기 때문에[[HTML]], [[CSS]], [[자바스크립트]]에 관한 기초지식만 있다면 짧고 단순한 코드로 다양한 효과를 연출할 수 있다. | + | [[파일:제이쿼리 로고글자.png|썸네일|700픽셀|'''제이쿼리'''(jQuery)]] |
| | | | |
| | == 개요 == | | == 개요 == |
| − | 제이쿼리는 자바스크립트 안에 있는 여러 라이브러리 중 하나이다. 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> | + | 제이쿼리는 미국 넷스케이프(Netscape)의 브렌든 아이크(Brendan Eich)가 개발한 [[스크립트]] [[프로그래밍 언어]]인 [[자바스크립트]](JavaScript)를 [[웹사이트]]에서 더욱 손쉽게 활용하기 위해 만들어진 [[오픈 소스]] 기반의 라이브러리이다. 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> | + | 제이쿼리는 HTML의 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 자바스크립트 라이브러리이다.<br> 비교적 쉽고, 간단하며 더 많은 기능을 사용할 수 있어 인기를 얻을 수 있었다.<ref>제이쿼리 공식 홈페이지 - https://jquery.com/</ref> <br>HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 [[Ajax]]를 활용할 때 유용하다. <br>수많은 라이브러리 중에서도 제이쿼리가 특이 많이 사용되는 이유는 다음과 같다.<ref>codedragon, 〈[https://codedragon.tistory.com/3466 jQuery의 특징]〉 , 《티스토리》, 2016-01-14</ref> |
| | | | |
| | :{|border=2 width=950 | | :{|border=2 width=950 |
| 20번째 줄: |
20번째 줄: |
| | |align=center|단순화 | | |align=center|단순화 |
| | |align=left| | | |align=left| |
| − | * 불필요한 코드를 줄이고 간결한 형식으로 단순화시킴으로써, 코드 가독성과 개발 효율성을 많이 증가 시켰다. | + | * 불필요한 코드를 줄이고 간결한 형식으로 단순화시킴으로써, 코드 가독성과 개발 효율성을 크게 증가 시켰다. |
| | * 자바스크립트보다 코드가 간결하여 학습이 쉽다. | | * 자바스크립트보다 코드가 간결하여 학습이 쉽다. |
| | |- | | |- |
| | |align=center|DOM | | |align=center|DOM |
| | |align=left| | | |align=left| |
| − | * 문서 [[객체]] 모델을 좀 더 쉽게 접근하여 조작할 수 있다. | + | * 문서 객체 모델을 좀 더 쉽게 접근하여 조작할 수 있다. |
| | |- | | |- |
| | |align=center|이벤트 연결 | | |align=center|이벤트 연결 |
| | |align=left| | | |align=left| |
| | * 이벤트 연결을 쉽게 구현할 수 있는 기능을 제공한다. | | * 이벤트 연결을 쉽게 구현할 수 있는 기능을 제공한다. |
| − | * 브라우저마다 이벤트 전달 방식이 달라 생기는 브라우저 간의 차이로 발생하는 문제점을 쉽게 해결할 수 있다. | + | * 브라우저마다 이벤트 전달 방식이 달라 생기는 브라우저간의 차이로 발생하는 문제점을 쉽게 해결할 수 있다. |
| | |- | | |- |
| | |align=center| 크로스 브라우징 | | |align=center| 크로스 브라우징 |
| | |align=left| | | |align=left| |
| | * 웹 표준에 기반을 두어 제이쿼리로 다양한 브라우저에서 동작하는 코드를 작성할 수 있다. | | * 웹 표준에 기반을 두어 제이쿼리로 다양한 브라우저에서 동작하는 코드를 작성할 수 있다. |
| − | * [[PC]]와 [[모바일]]에서도 작동이 가능하다. | + | * PC와 모바일에서도 작동이 가능하다. |
| | |- | | |- |
| | |align=center| 효율적인 셀렉터 | | |align=center| 효율적인 셀렉터 |
| 46번째 줄: |
46번째 줄: |
| | * 시각적 효과를 쉽게 구현한다. | | * 시각적 효과를 쉽게 구현한다. |
| | |- | | |- |
| − | |align=center|[[Ajax]]의 단순화 | + | |align=center|Ajax의 단순화 |
| | |align=left| | | |align=left| |
| − | * 제이쿼리를 이용하면 Ajax를 더욱 단순하게 만들 수 있어 Ajax [[애플리케이션]]을 쉽게 개발할 수 있다. | + | * 제이쿼리를 이용하면 Ajax를 더욱 단순하게 만들 수 있어 Ajax 어플리케이션을 쉽게 개발할 수 있다. |
| | |- | | |- |
| | |align=center|애니메이션 구현 | | |align=center|애니메이션 구현 |
| | |align=left| | | |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://jquery.com/ |
| − | * 〈[https://ko.wikipedia.org/wiki/JQuery jQuery]〉, 《위키백과》 | + | * 위키백과 공식 홈페이지 - https://ko.wikipedia.org/wiki/JQuery jQuery |
| − | * 〈[https://namu.wiki/w/jQuery#fn-1 jQuery]〉, 《나무위키》 | + | * 나무위키 공식 홈페이지 - https://namu.wiki/w/jQuery#fn-1 jQuery |
| − | * Khan Academy, 〈[http://a.to/19DspzB jQuery의 역사: 존은 어떻게 jQuery를 구축했을까요?]〉, 《Khan Academy》, 2006. 1. 16. | + | * 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 | + | * araikuma, 〈[https://araikuma.tistory.com/605?category=820803 (jQuery) 개요]〉 , 《티스토리》, 2018-11-09 |
| − | * 코딩샘, 〈[https://blog.naver.com/coding_sam/221422380387 제이쿼리 기초 JQuery 무료 코딩 실습하기 (TCPSchool)]〉, 《네이버 블로그》, 2018-12-19 | + | * 코딩샘, 〈[https://blog.naver.com/coding_sam/221422380387 제이쿼리 기초 JQuery 무료 코딩 실습하기 (TCPSchool)]〉 , 《네이버 블로그》, 2018-12-19 |
| − | * codedragon, 〈[https://codedragon.tistory.com/3466 jQuery의 특징]〉, 《티스토리》, 2016-01-14 | + | * 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]]
| |
| | * [[라이브러리]] | | * [[라이브러리]] |
| | | | |
| − | {{프로그래밍|검토 필요}} | + | {{프로그래밍|토막글}} |
| | + | |
| | + | [[분류:프로그래밍 언어]] |
