제이쿼리

제이쿼리(jQuery)

제이쿼리(jQuery)

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

개요

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

등장 배경

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

특징

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

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

장단점

장점

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

단점

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

종류

제이쿼리는 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) 등의 프레임워크를 지원한다.

참고자료

• 제이쿼리 공식 홈페이지 - 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

같이 보기

• 프로그래밍 언어
• 자바스크립트
• HTML
• CSS
• 라이브러리

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

개발 : 프로그래밍 □■⊕, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인 프로그래밍 언어 ASP • C 언어 • C++ • C# • CSS • D 언어 • HTML • HTML5 • JSP • PHP • R • XHTML • XML • XSLT • 고(Go) • 고급언어 • 기계어 • 델파이 • 러스트 • 루비 • 루아 • 리액트 • 리퀴디티 • 무브 • 미켈슨 • 베이직 • 브이비스크립트 • 비주얼 C++ • 비주얼베이직(VB) • 비주얼베이직닷넷(VB.NET) • 솔리디티 • 스몰토크 • 스위프트 언어 • 스칼라 • 스크립트 언어 • 알골 • 어셈블리 • 언리얼스크립트 • 얼랭 • 에이잭스(Ajax) • 엠에프씨(MFC) • 오브젝티브-C • 오브젝트 파스칼 • 오카멜 • 웹어셈블리(WASM) • 이와즘(eWASM) • 자바 • 자바스크립트 • 저급언어 • 제이슨(JSON) • 제이쿼리(jQuery) • 카멜 • 코볼 • 코틀린 • 콜드퓨전 • 타입스크립트 • 파스칼 • 파워스크립트 • 파이썬 • 펄(Perl) • 포트란 • 프로씨(Pro-C) • 피엘에스큐엘(PL/SQL) • 피엘원(PL/I) • 하스켈 개발방법론 CBD 개발방법론 • EA • 구조적 개발방법론 • 객체지향 개발방법론 • 라이브러리 • 람다 아키텍처 • 모듈 • 모듈화 • 벤치마킹 • 소프트웨어 개발방법론 • 스크럼 • 스프린트 • 아키텍처 • 아키텍트 • 애자일 • 웹개발방법론 • 정보공학 개발방법론 • 컴포넌트 • 테일러링 • 템플릿 • 폭포수 모델 • 프로젝트 • 프로토타입 • 피드백 코딩 EUC-KR • UTF-8 • 값 • 글루웨어 • 노팔로우 링크 • 두팔로우 링크 • 디버깅 • 디코딩 • 마크업 • 버그 • 부트스트랩 • 세이브포인트 • 소스코드 • 시큐어코딩 • 아스키 • 액티브엑스 • 오픈소스 • 유니코드 • 인코딩 • 재컴파일 • 주석 • 컴파일 • 컴퓨터 프로그램 • 코드 • 코딩 • 태그 • 테스트 • 테이블 • 텍스트 • 파싱 • 퍼블리싱 • 퓨니코드 • 하드코딩 • 하이퍼링크 • 하이퍼텍스트 프로그래밍 C 명령어 • 객체 • 객체지향 • 객체지향 프로그래밍 • 거짓 • 관계연산자 • 기본형 변수 • 널 • 논리 • 논리연산 • 논리연산자 • 다중상속 • 다형성 • 대입 • 대입문 • 대입연산자 • 더블 • 도스 명령어 • 디폴트 • 레지스터변수 • 루프 • 리눅스 명령어 • 리턴 • 메모리 주소 • 메소드 • 멤버 • 명령문 • 명령어 • 무한루프 • 문자 • 문자열 • 바이트 • 반복문 • 배열 • 변수 • 분기 • 분기문 • 불린 • 브레이크 • 비교연산자 • 비트연산자 • 산술연산자 • 상속 • 상수 • 생성자 • 선언 • 선언문 • 설정자 • 속성 • 스위치 • 스태틱 • 시프트연산자 • 실행 • 실행문 • 어노테이션 • 에코 • 역참조 • 연산 • 연산문 • 연산자 • 오버로딩 • 오버라이딩 • 외부변수 • 윈도우 명령어 • 유닉스 명령어 • 인스턴스 • 인스트럭션 • 인클루드 • 인터페이스 • 임포트 • 입력 • 입력문 • 입출력 • 입출력문 • 자료형(데이터 타입) • 자바 명령어 • 자바 예약어 • 자바 컬렉션 • 전역변수 • 접근자 • 접근제어자 • 정보은닉 • 정수형 • 정적변수 • 제어 • 제어문 • 제어자 • 조건 • 조건문 • 조건연산자 • 주소 • 증감연산자 • 지역변수 • 참 • 참조 • 참조변수 • 초기화 • 추상메소드 • 추상클래스 • 추상화 • 출력 • 출력문 • 캡슐화 • 케이스 • 클래스 • 파라미터(매개변수) • 파이널 • 패키지 • 퍼블릭 • 포인터 • 프라이빗 • 프로텍티드 • 필드(멤버변수) • 함수 • 환경변수 명령어 abstract • array • boolean • break • byte • case • char • continue • default • double • do while • echo • elif • else • else if • false • final • float • for • gosub • goto • if • if else • import • include • int • join • long • long long • null • print • printf • println • private • protected • public • return • scanf • short • stdio.h • static • string • switch • temp • then • true • unsigned • void • while 디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴 프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반