제이쿼리
제이쿼리(jQuery)란 HTML 문서에 삽입하여 사용할 수 있는 자바스크립트 라이브러리를 말한다. 단순하게 웹사이트를 만들 때 사용하는 일종의 도구라고 생각할 수 있다. 매우 쉽고 간단하기 때문에HTML, CSS, 자바스크립트에 관한 기초지식만 있다면 짧고 단순한 코드로 다양한 효과를 연출할 수 있다.
목차
개요
등장 배경
제이쿼리는 미국 넷스케이프(Netscape)의 브렌든 아이크(Brendan Eich)가 개발한 스크립트 프로그래밍 언어인 자바스크립트(JavaScript)를 웹사이트에서 더욱더 손쉽게 활용하기 위해 만들어진 오픈 소스 기반의 라이브러리이다.
2006년 1월 16일 웹 디자이너인 존 레식(John Resig)가 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개했으며[1], 현재는 jQuery Team이라는 개발자 그룹이 jQuery Foundation을 통해 개발과 유지 보수를 담당하고 있다.[2]
특징
제이쿼리는 HTML의 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 자바스크립트 라이브러리이다.
비교적 쉽고, 간단하며 더 많은 기능을 사용할 수 있어 인기를 얻을 수 있었다.[3]
HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax를 활용할 때 유용하다.
수많은 라이브러리 중에서도 제이쿼리가 특이 많이 사용되는 이유는 다음과 같다.[4]
특징 설명 단순화 - 불필요한 코드를 줄이고 간결한 형식으로 단순화시킴으로써, 코드 가독성과 개발 효율성을 많이 증가 시켰다.
- 자바스크립트보다 코드가 간결하여 학습이 쉽다.
DOM - 문서 객체 모델을 좀 더 쉽게 접근하여 조작할 수 있다.
이벤트 연결 - 이벤트 연결을 쉽게 구현할 수 있는 기능을 제공한다.
- 브라우저마다 이벤트 전달 방식이 달라 생기는 브라우저 간의 차이로 발생하는 문제점을 쉽게 해결할 수 있다.
크로스 브라우징 - 웹 표준에 기반을 두어 제이쿼리로 다양한 브라우저에서 동작하는 코드를 작성할 수 있다.
- PC와 모바일에서도 작동이 가능하다.
효율적인 셀렉터 - :empty, :odd, :even 등 CSS에서 사용되는 셀렉터를 이용하여 원하는 요소를 편리하게 선택할 수 있다.
- 요소들(elements)을 선택하는 강력한 방법을 제공하여 선택된 요소들을 효율적으로 제어할 수 있는 다양한 수단을 제공한다.
시각적 효과 - 시각적 효과를 쉽게 구현한다.
Ajax의 단순화 - 제이쿼리를 이용하면 Ajax를 더욱 단순하게 만들 수 있어 Ajax 애플리케이션을 쉽게 개발할 수 있다.
애니메이션 구현 - 웹 표준만으로 플래시와 실버라이트를 사용하는 것과 비슷한 효과를 구현할 수 있어 애니메이션 구현을 쉽게 할 수 있다.
장단점
- jQuery 장점
- 멀티 브라우저 지원
- 코드가 단순하여 쉽게 사용 가능
- 서버 사이드 코드와 클라이언트 사이드 코드를 효과적으로 분리작업, 분업작업이 가능
- Ajax를 사용하고, 클라이언트 객체를 통해 작업하여 페이지가 가볍고 빠름
- 오픈 소스이므로 타 개발자들의 소스를 분석 및 플러그인 형태로 붙여넣는 게 쉬움
- 구조적인 코딩이 가능하여 클라이언트용 RIA 컨트롤을 만들기가 용이
- jQuery 단점
- 디버깅, 에러 핸들링이 어려움
- 코드 관리가 어려움
- 업데이트의 문제
- Virtual DOM과 상성이 안 좋음[5]
종류
제이쿼리는 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(syncfusion essential JS 2
싱크퓨전 에센셜 JS 2는 타입스크립트로 만든 상용 라이센스의 자바스크립트 UI 컨트롤 라이브러리이다. 제이쿼리 UI 라이브러리의 대안으로, 웹 애플리케이션을 개선하면서 부하가 적고, 가벼운 모듈형 라이브러리이다. 싱큐퓨전은 앵귤러(Angular), 리액트(React), 뷰(Vue) 등의 프레임워크를 지원한다.[6]
각주
- ↑ Khan Academy, 〈jQuery의 역사: 존은 어떻게 jQuery를 구축했을까요?〉 , 《Khan Academy》, 2006. 1. 16.
- ↑ araikuma, 〈(jQuery) 개요〉,《티스토리》, 2018-11-09
- ↑ 제이쿼리 공식 홈페이지 - https://jquery.com/
- ↑ codedragon, 〈jQuery의 특징〉 , 《티스토리》, 2016-01-14
- ↑ 박종희, 〈이제와서 JQUERY를 쓰면 안되는 이유 PART2〉, 《TOKYO BRANCH》, 2017-09-04
- ↑ 김진범 기자, 〈한물간 제이쿼리(jQuery)를 대체하는 자바스크립트 라이브러리 3가지〉, 《코딩월드뉴스》, 2019-05-10
참고자료
- 제이쿼리 공식 홈페이지 - https://jquery.com/
- 〈jQuery〉, 《위키백과》
- 〈jQuery〉, 《나무위키》
- Khan Academy, 〈jQuery의 역사: 존은 어떻게 jQuery를 구축했을까요?〉, 《Khan Academy》, 2006. 1. 16.
- araikuma, 〈(jQuery) 개요〉, 《티스토리》, 2018-11-09
- 코딩샘, 〈제이쿼리 기초 JQuery 무료 코딩 실습하기 (TCPSchool)〉, 《네이버 블로그》, 2018-12-19
- codedragon, 〈jQuery의 특징〉, 《티스토리》, 2016-01-14
- 송썬, 〈jQuery의 (WEB)특징,장단점〉, 《티스토리》, 2016-01-05
- ZeroCho, 〈제이쿼리는 필요 없을 수도 있다?〉, 《ZeroCho TV》, 2016-08-22
- 박종희, 〈이제와서 JQUERY를 쓰면 안되는 이유 PART2〉, 《TOKYO BRANCH》, 2017-09-04
- 마이구미, 〈jQuery 더이상 쓰지 않아야하는가? ::마이구미〉, 《티스토리》, 2017-08-28
- 김진범 기자, 〈한물간 제이쿼리(jQuery)를 대체하는 자바스크립트 라이브러리 3가지〉, 《코딩월드뉴스》, 2019-05-10
같이 보기