검수요청.png검수요청.png

"제이쿼리"의 두 판 사이의 차이

위키원
이동: 둘러보기, 검색
잔글
잔글
 
(같은 사용자의 중간 판 하나는 보이지 않습니다)
1번째 줄: 1번째 줄:
[[파일:제이쿼리 로고.png|썸네일|200픽셀|'''제이쿼리'''(jQuery) 로고]]
+
[[파일:제이쿼리 로고.png|썸네일|200픽셀|'''제이쿼리'''(jQuery)]]
[[파일:제이쿼리 글자.png|썸네일|300픽셀|'''제이쿼리'''(jQuery) 로고와 글자]]
+
[[파일:제이쿼리 글자.png|썸네일|300픽셀|'''제이쿼리'''(jQuery)]]
 +
 
 
'''제이쿼리'''<!--jquery-->(jQuery)란 [[HTML]] 문서에 삽입하여 사용할 수 있는 [[자바스크립트]] [[라이브러리]]를 말한다. 단순하게 웹사이트를 만들 때 사용하는 일종의 도구라고 생각할 수 있다. 매우 쉽고 간단하기 때문에[[HTML]], [[CSS]], [[자바스크립트]]에 관한 기초지식만 있다면 짧고 단순한 코드로 다양한 효과를 연출할 수  있다.
 
'''제이쿼리'''<!--jquery-->(jQuery)란 [[HTML]] 문서에 삽입하여 사용할 수 있는 [[자바스크립트]] [[라이브러리]]를 말한다. 단순하게 웹사이트를 만들 때 사용하는 일종의 도구라고 생각할 수 있다. 매우 쉽고 간단하기 때문에[[HTML]], [[CSS]], [[자바스크립트]]에 관한 기초지식만 있다면 짧고 단순한 코드로 다양한 효과를 연출할 수  있다.
 
 
  
 
== 개요 ==
 
== 개요 ==
93번째 줄: 92번째 줄:
 
최근 몇 년 사이 웹 브라우저에서 자바스크립트를 처리하는 기능까지 나왔기 때문에 호환성 문제에 대해서는 제이쿼리가 필요 없다.
 
최근 몇 년 사이 웹 브라우저에서 자바스크립트를 처리하는 기능까지 나왔기 때문에 호환성 문제에 대해서는 제이쿼리가 필요 없다.
 
그래서 제이쿼리를 대신할 대체재가 많이 생겼다.
 
그래서 제이쿼리를 대신할 대체재가 많이 생겼다.
===캐시(cash)===
 
[[캐시]]는 MIT라이선스에 따라 배포되는 오픈 소스 자바스크립트 라이브러리이다. [[깃허브]](github)에서 3,570개 이상의 별을 받은 [[프로그램]]으로 브라우저용 '매우 단순한 제이쿼리 대체재'로 유명하다. 캐시를 이용하면 제이쿼리 스타일의 문법으로 [[DOM]]을 사용할 수 있으며, 압축 없이 32KB의 공간만 차지한다. 네임스페이스 이벤트, 타임스크립트 형식, 현대화된 빌드 등을 지원한다.
 
  
===젭토(zepto)===
+
===캐시===
[[젭토]]는 폭넓은 제이쿼리 호환성을 지원하는 API가 포함된 초경량 자바스크립트 라이브러리이다. 제이쿼리를 써왔던 개발자라면 무리 없이 사용할 수 있다고 한다. 또한 제이쿼리보다 더 작고 빠르게 로드되며, 모바일 혹은 [[데스크톱]] 브라우저용 폰갭(PhoneGap) 툴셋과도 함께 사용할 수 있다.
+
[[캐시]](cash)는 MIT 라이선스에 따라 배포되는 오픈 소스 자바스크립트 라이브러리이다. [[깃허브]](github)에서 3,570개 이상의 별을 받은 [[프로그램]]으로 브라우저용 '매우 단순한 제이쿼리 대체재'로 유명하다. 캐시를 이용하면 제이쿼리 스타일의 문법으로 [[DOM]]을 사용할 수 있으며, 압축 없이 32KB의 공간만 차지한다. 네임스페이스 이벤트, 타임스크립트 형식, 현대화된 빌드 등을 지원한다.
 +
 
 +
===젭토===
 +
[[젭토]](zepto)는 폭넓은 제이쿼리 호환성을 지원하는 API가 포함된 초경량 자바스크립트 라이브러리이다. 제이쿼리를 써왔던 개발자라면 무리 없이 사용할 수 있다고 한다. 또한 제이쿼리보다 더 작고 빠르게 로드되며, 모바일 혹은 [[데스크톱]] 브라우저용 폰갭(PhoneGap) 툴셋과도 함께 사용할 수 있다.
 +
 
 
===싱크퓨전 에센셜 JS 2===
 
===싱크퓨전 에센셜 JS 2===
 
[[싱크퓨전 에센셜]] JS 2는 타입스크립트로 만든 상용 라이선스의 자바스크립트 [[UI]] 컨트롤 라이브러리이다. 제이쿼리 UI 라이브러리의 대안으로, 웹 애플리케이션을 개선하면서 부하가 적고, 가벼운 모듈형 라이브러리이다. 싱크퓨전은 [[앵귤러]](Angular), [[리액트]](React), [[뷰]](Vue) 등의 [[프레임워크]]를 지원한다.<ref>김진범 기자, 〈[https://www.codingworldnews.com/article/view/848 한물간 제이쿼리(jQuery)를 대체하는 자바스크립트 라이브러리 3가지]〉, 《코딩월드뉴스》, 2019-05-10</ref>
 
[[싱크퓨전 에센셜]] JS 2는 타입스크립트로 만든 상용 라이선스의 자바스크립트 [[UI]] 컨트롤 라이브러리이다. 제이쿼리 UI 라이브러리의 대안으로, 웹 애플리케이션을 개선하면서 부하가 적고, 가벼운 모듈형 라이브러리이다. 싱크퓨전은 [[앵귤러]](Angular), [[리액트]](React), [[뷰]](Vue) 등의 [[프레임워크]]를 지원한다.<ref>김진범 기자, 〈[https://www.codingworldnews.com/article/view/848 한물간 제이쿼리(jQuery)를 대체하는 자바스크립트 라이브러리 3가지]〉, 《코딩월드뉴스》, 2019-05-10</ref>
124번째 줄: 125번째 줄:
 
* [[라이브러리]]
 
* [[라이브러리]]
  
{{로고 필요}}
 
 
{{프로그래밍|검토 필요}}
 
{{프로그래밍|검토 필요}}

2020년 7월 2일 (목) 16:32 기준 최신판

제이쿼리(jQuery)
제이쿼리(jQuery)

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

개요[편집]

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

등장 배경[편집]

제이쿼리는 미국 넷스케이프(Netscape)의 브렌든 아이크(Brendan Eich)가 개발한 스크립트 프로그래밍 언어자바스크립트(JavaScript)를 웹 사이트에서 더욱더 손쉽게 활용하기 위해 만들어진 오픈 소스 기반의 라이브러리이다.
2006년 1월 16일 웹 디자이너인 존 레식(John Resig)가 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개했으며[2], 현재는 jQuery Team이라는 개발자 그룹이 jQuery Foundation을 통해 개발과 유지 보수를 담당하고 있다.[3]

특징[편집]

제이쿼리는 HTML의 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 자바스크립트 라이브러리이다. 비교적 쉽고, 간단하며 더 많은 기능을 사용할 수 있어 인기를 얻을 수 있었다.[4] HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax를 활용할 때 유용하다. 수많은 라이브러리 중에서도 제이쿼리가 특이 많이 사용되는 이유는 다음과 같다.[5]

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

장단점[편집]

장점[편집]

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

단점[편집]

  • 디버깅, 에러 핸들링이 어려움
  • 코드 관리가 어려움
  • 업데이트의 문제
  • Virtual DOM과 상성이 안 좋음[6]

종류[편집]

제이쿼리는 jQuery Team이라는 개발자 그룹이 jQuery Foundation을 통해 버전 개발 및 유지 보수가 진행되고 있다.

jQuery 버전 1[편집]

2006년 6월 30일 : 1.0a 버전 출시
최신 버전 : jQuery Core 1.12.4
jQuery 버전 1은 익스플로러 6, 7, 8 버전에서의 동작까지 모두 지원하는 버전이다.

jQuery 버전 2[편집]

2013년 4월 18일 : 2.0 버전 출시
최신 버전 : jQuery Core 2.2.4
jQuery 버전 2는 버전 1에서 지원하는 익스플로러 6, 7, 8 버전에 대한 지원을 중단한 버전이다.

jQuery 버전 3[편집]

2016년 6월 9일 : 3.0 버전 출시
최신 버전 : jQuery Core 3.4.1
jQuery 버전 3은 기존 버전과의 호환성을 유지한 채 더욱더 간결하게 작성되고, 더욱더 빠르게 동작하도록 변경되었다.

문제점[편집]

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

대안[편집]

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

캐시[편집]

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

젭토[편집]

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

싱크퓨전 에센셜 JS 2[편집]

싱크퓨전 에센셜 JS 2는 타입스크립트로 만든 상용 라이선스의 자바스크립트 UI 컨트롤 라이브러리이다. 제이쿼리 UI 라이브러리의 대안으로, 웹 애플리케이션을 개선하면서 부하가 적고, 가벼운 모듈형 라이브러리이다. 싱크퓨전은 앵귤러(Angular), 리액트(React), (Vue) 등의 프레임워크를 지원한다.[7]

각주[편집]

  1. jQuery〉, 《나무위키》
  2. Khan Academy, 〈jQuery의 역사: 존은 어떻게 jQuery를 구축했을까요?〉 , 《Khan Academy》, 2006. 1. 16.
  3. araikuma, 〈(jQuery) 개요〉,《티스토리》, 2018-11-09
  4. 제이쿼리 공식 홈페이지 - https://jquery.com/
  5. codedragon, 〈jQuery의 특징〉 , 《티스토리》, 2016-01-14
  6. 박종희, 〈이제와서 JQUERY를 쓰면 안되는 이유 PART2〉, 《TOKYO BRANCH》, 2017-09-04
  7. 김진범 기자, 〈한물간 제이쿼리(jQuery)를 대체하는 자바스크립트 라이브러리 3가지〉, 《코딩월드뉴스》, 2019-05-10

참고자료[편집]

같이 보기[편집]


  검수요청.png검수요청.png 이 제이쿼리 문서는 프로그래밍에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.