제이쿼리
제이쿼리(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 - 문서 객체 모델을 좀 더 쉽게 접근하여 조작할 수 있다.
이벤트 연결 - 이벤트 연결을 쉽게 구현할 수 있는 기능을 제공한다.
- 브라우저마다 이벤트 전달 방식이 달라 생기는 브라우저 간의 차이로 발생하는 문제점을 쉽게 해결할 수 있다.
크로스 브라우징 효율적인 셀렉터 - :empty, :odd, :even 등 CSS에서 사용되는 셀렉터를 이용하여 원하는 요소를 편리하게 선택할 수 있다.
- 요소들(elements)을 선택하는 강력한 방법을 제공하여 선택된 요소들을 효율적으로 제어할 수 있는 다양한 수단을 제공한다.
시각적 효과 - 시각적 효과를 쉽게 구현한다.
Ajax의 단순화 - 제이쿼리를 이용하면 Ajax를 더욱 단순하게 만들 수 있어 Ajax 애플리케이션을 쉽게 개발할 수 있다.
애니메이션 구현 - 웹 표준만으로 플래시와 실버라이트를 사용하는 것과 비슷한 효과를 구현할 수 있어 애니메이션 구현을 쉽게 할 수 있다.
장단점
장점
- 멀티 브라우저 지원
- 코드가 단순하여 쉽게 사용 가능
- 서버 사이드 코드와 클라이언트 사이드 코드를 효과적으로 분리작업, 분업작업이 가능
- Ajax를 사용하고, 클라이언트 객체를 통해 작업하여 페이지가 가볍고 빠름
- 오픈 소스이므로 타 개발자들의 소스를 분석 및 플러그인 형태로 붙여넣는 게 쉬움
- 구조적인 코딩이 가능하여 클라이언트용 RIA 컨트롤을 만들기가 용이
단점
종류
제이쿼리는 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]
각주
- ↑ 〈jQuery〉, 《나무위키》
- ↑ 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
같이 보기