javaScript. lib. 제이쿼리(jQuery)

제이쿼리(jQuery) 

 

write less, do more 이라는 모토로 만들어진

오픈소스 기반의 자바스크립트 라이브러리.

 

쉽게 element를 찾고 조작할 수 있고, 브라우저의 호환성이 뛰어나다.

또한 메소드 체이닝 등 짧고, 유지관리가 용이한 코드를 지원한다.

 

장점	IE8,9를 지원한다.  모든 브라우저에서 호환 가능. 코드가 보기 좋다. (디자인을 위해) 플러그인을 지원한다. (다양한 기능 추가 가능) 애니메이션, AJAX도 간단히 사용 가능.
단점	무겁다. 바닐라 자바스크립트보다 10배~100배정도 느리다. 모듈화가 안되어있다.

예>

$(document).ready(function(){
  alert("Hello World!");
  $("#blackBox").hide();
});

window.onload = function() {
  alert( "Hello World!" );
  document.getElementById("blackBox").style.display = "none";
};

- DOM조작의 단순화, AJAX호출, Event (en-US)핸들링에 초점을 맞춤.

 

 

그러나! 결론적으로 말하면

jQuery의 사용률은 여전히 높지만, 개발자들 사이에서는 위상이 추락하고 있다

 

 

>> 

 

 

1 / 웹 표준 API의 확장

W3C(World Wide Web Consortium)·WHATWG(Web Hypertext Application Technology Working Group)와 같은 단체의 노력으로 웹 표준은 끊임없이 발전해왔다.

그러나 그 노력의 이면에는 제이쿼리와 같은 라이브러리를 사용해야만 활용 가능했던 편의 기능을

브라우저에서 기본 API로 제공하는 것도 포함되어 있다.

 

예> Fetch API

제이쿼리에서 가장 널리 사용되던 jQuery.ajax() 메소드 수준의 편의성과 유연성을 제공한다.

 

2 / 웹브라우저 환경의 변화

제이쿼리가 본격적으로 사용되기 시작한 2007~2008년은 인터넷 익스플로러(Internet Explorer)가 전 세계 웹브라우저 시장의 60% 이상을 점유하면서 절대 강자로 군림하고 있었다.

인터넷 익스플로러는 마이크로소프트의 다른 애플리케이션처럼 안정적인 변화를 추구하여 버전 업그레이드가 느렸으며 데스크톱 기반의 윈도우(Windows) 환경에 주력하였습니다.

따라서 생산성과 가독성이 높은 간결한 코드를 작성하기 위해서는 제이쿼리가 필요했다.

 

그러나 2008년 구글사의 크롬(Chrome)이 등장하면서 브라우저 시장은 큰 변화가 일어났다.

윈도우, 맥(Mac), 리눅스(Linux) 등의 데스크톱 OS뿐만 아니라 안드로이드 등의 모바일 OS도 지원하는 크롬은 IE 점유율을 빠르게 잠식했으며, 몇년간 글로벌 시장점유율 1위를 지키고 있다.

성능이 더 우수한 렌더링 엔진을 탑재하였고 빠른 버전 업그레이드를 위해 웹 표준을 신속하게 반영했다.

그 결과 제이쿼리와 같은 라이브러리를 사용하지 않고도 양질의 웹 애플리케이션 구현이 가능해졌다.

 

3 / 가상 돔(Virtual DOM)을 사용하는 라이브러리의 등장

웹페이지는 브라우저상에서 돔(DOM, Document Object Model)이라는 표준 형식으로 파싱(Parsing)되어 표현된다.

 

>> 사용자 조작에 맞춰 동적으로 변화하는 대화형 웹(Interactive Web)을 구현하기 위해서는 돔 조작이 필수적.

그런데 대부분의 브라우저에서 돔 조작이 발생할 때마다 배치나 화면 표시에 많은 연산을 발생시키다 보니 조작이 빈번해질수록 브라우저 성능이 낮아지는 문제가 있었고 이는 개발자의 창의력을 저해하는 요소로 작용하였다.

 

이를 해결하기 위해 자바스크립트 라이브러리의 하나인 리액트(React)는 가상 돔을 채용하여 대중화시켰습니다.

- 리액트를 활용하면 메모리에 가상 돔을 구성하여 실제 돔과의 차이점을 비교하고 변경된 부분을 실제 돔에 적용 가능.

 

+) 이후 등장한 뷰(Vue.js) 등의 프레임워크와 라이브러리도 가상 돔을 적극 채용하고 있다.

 

(cr: https://www.samsungsds.com/kr/insights/jQuery.html)

 

 

위와 같은 이유로 사용하지 않는 것이 대세라고 하지만!

 

그러나, 여전히 제이쿼리의 점유율이 높기 때문에

jQuery에 대해서 우리는 알아야한다!

 

 

---

jQuery를 다운받는 방법

 

• 파일로 다운받아서 홈페이지 안에 넣는 방법
• cdn을 사용하는 방법
• bower이나 npm같은 패키지 매니저를 사용하는 방법

- 가장 간단하고 속도도 괜찮은 cdn을 사용하는 방법은 다음과 같다.

 

<script src="//code.jquery.com/jquery-latest.min.js"></script>

HTML 문서 내에 다른 script보다 위에 넣어주면 설치된다.

 

 

 

 

---

Ref.

 

jQuery - 용어 사전 | MDN

(jQuery) jQuery(제이쿼리)