제이쿼리(jQuery)
제이쿼리는 자바스크립트 라이브러리중의 하나입니다. 아마 다들 어디선가 이름을 들어봤을정도로 유명하지 않나 싶은데요. 요새는 잘 쓰이지는 않습니다만, 그래도 유명했던만큼 한번 알아볼까요?
■ 개념
오픈소스기반의 자바스크립트 라이브러리입니다. "write less, do more(적게 작성하고, 많은 것을 합시다)"의 모토로 2006년 미국의 SW 개발자 존레식(John Resig)이 발표하였습니다.
■ 장점
▶ 애니메이션 효과나 대화형 처리를 간단하게 적용해줍니다.▶ 동일한 동작을 하는 프로그램을 짧은 코드로 구현시켜줍니다.
▶ 다양한 플러그인이 있습니다.
▶ 오픈 라이선스라서 누구나 자유롭게 사용할 수 있습니다.
▶ 대부분의 브라우저에서 지원합니다.
▶ 웹페이지 상에서 엘리먼트를 쉽게 찾고 조작할 수 있습니다.
■ 사용하기
제이쿼리 라이브러리를 추가해야합니다. 대표적인 방법 세가지를 소개합니다.
<!-- 적용방법 1 -->
<script src="js/jquery.js"></script>
<!-- 적용방법 2 : cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 적용방법 3 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
▶ 첫번째 방법은 API를 직접 다운받아서 사용하는 방법입니다. (다운)
▶ 두번째 방법은 CDN을 이용하는 것인데 위는 구글에서 돌아다니는 예제를 가져왔습니다.
▶ 세번째 방법은 제이쿼리에서 제공하는 최신 버전의 url입니다.
■ 기본형식
기본적으로 $(document).ready()로 시작합니다.이 구문은 짧게 표현도 가능합니다.
ready()는 제이쿼리이벤트로서 자바스크립트의 load이벤트와 유사한 기능을 가지고 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 기본형식</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
실행문;
});
위 구문은 짧게 표현 가능합니다.
$(function() {
실행문;
});
</script>
</head>
<body>
</body>
</html>
■ 선택자
$() 팩토리 함수
$()함수는 괄호안에 CSS선택자를 정의해서 DOM노드(element)를 반환합니다. 하나의 함수로 여러가지의 종류의 객체를 생성할 수 있습니다.
말이 어려운데요. js에서는 선택자를 사용하려면 querySelector를 사용했서 귀찮기도 했는데 제이쿼리에선 $로 편~하게 사용가능합니다.
선택자 사용법?
$("p") : element셀렉터
$("#id") : id셀렉터
$(".class") : class셀렉터
[]를 사용하게된다면 요소의 속성을 선택할 수 있고 속성에는 간단한 정규표현식을 사용할 수도 있습니다.
- ^ : 앞의 글자 패턴과 같으면 선택
- $ : 뒤의 글자 패턴과 같으면 선택
- * : 속성 안에 글자가 포함되어 있다면 선택
- ~ : 속성 안에 글자가 정확히 포함되어 있으면 선택, 중복 불가
- = : 완전히 일치해야 선택
사용자 정의 선택자 : 선택자 뒤에 콜론(:)을 붙여 사용합니다.
- :eq(index) _ 선택된 요소 중 index에 해당하는 요소
- :odd _ 홀수 행 선택
- :even _ 짝수 행 선택
- :contains("문자열") _ 해당 문자열이 포함된 요소를 선택
- :gt _ >
- :lt _ <
선택자에 대한 내용은 추후에 개별적으로 자세히 다뤄보도록 하겠습니다.
1. 기본 선택자 보러가기
2. 속성 선택자 보러가기
3. 필터 선택자 보러가기
4. 탐색 선택자 보러가기
■ 현재는 하락세...
한때는 휘젓고 다니던 이 제이쿼리가 어째서 하락세인 걸까요? 아직까지도 사용률은 높지만 입지가 좁아지는 이유는 무엇일까요?
1. 웹 표준 API의 확장
: 웹 표준은 끊임없이 발전하고 있는데요. 기존에 편의성과 유연성을 제공하던 제이쿼리지만 이제는 그 대체제가 너무 많이 나온다는 문제가 있는거죠.
그래서 당연히 입지는 좁아지는 거랍니다.
2. 웹브라우저 환경의 변화
: 제이쿼리가 활보하던 시대는 바야흐로 인터넷 익스플로러가 점령하던 시대였습니다. 이 인터넷 익스플로러는 버전 업그레이드가 느렸고, 윈도우환경에 주력했었습니다.
그렇기 때문에 간결한 코드를 원했고 제이쿼리가 그에 합당했던거죠. 하지만 성능이 더 우수하며 빠른 업그레이드를 통해 웹표준을 신속하게 반영하는 크롬이 등장해 버렸습니다. 그래서 더 이상은 제이쿼리와 같은 라이브러리를
사용하지 않아도 좋은 웹 애플리케이션을 구현 가능해지게 되었습니다.
3. 가상 돔을 사용하는 라이브러리의 등장
: 사용자 조작에 맞춰 동적으로 변화하는 대화영 웹을 구현하기위해서는 돔조작이 필수인데요. 대부분의 브라우저에서는 돔 조작이 발생할 때마다 많은 연산이 생겨
브라우저 성능이 낮아지는 문제가 있었습니다. 이러한 문제를 리액트가 해결해줄 수 있었고 리액트는 가상 돔을 채용해서 대중화 시켰습니다. 직접 돔을 조작하는 제이쿼리는 결국
이런 가상돔을 사용하는 라이브러리에 밀리게 된것입니다.
■ 포기하지 않은 제이쿼리
그렇다고 제이쿼리가 포기했느냐? 아닙니다. 제이쿼리도 대응전략을 여럿 세웠는데요. 간단하게만 소개드리고 마치겠습니다. 포기하지 않는 모습이 보기 좋네요
1. 경량화
: 경량화를 위해서 '인터넷 익스플로러11 미만 버전 지원 중단', '시즐(Sizzle)의 내재화'를 내세웠습니다.
2. 브라우저 호환 기능 추가
: 하나의 예시로 제이쿼리 차기 버전은 현재 크롬만 지원하는 기능인 '신뢰할 수 있는 타입'을 모든 브라우저에서 사용 가능하도록 할 계획입니다.
'JQuery' 카테고리의 다른 글
| [제이쿼리] 클래스 관련 메서드 (7) | 2022.09.03 |
|---|---|
| [제이쿼리] 탐색 선택자에 대해 알아보자 (5) | 2022.08.30 |
| [제이쿼리] 필터 선택자에 대해 알아보자 (3) | 2022.08.30 |
| [제이쿼리] 속성 선택자에 대해 알아보자 (5) | 2022.08.30 |
| [제이쿼리] 기본 선택자에 대해 알아보자 (5) | 2022.08.30 |
댓글