JavaScript, jQuery
JavaScript는 웹브라우저에서 작동하는 스크립트이다.
JQuery 역시 자바스크립트이지만 빈번하게 사용되는 기능들을 조금 더 함축적인 코드를 통해 사용하게 만든 라이브러리, 즉 기능 덩어리이다.
자바스크립트는 아래와 같이 크게 4가지 요소로 구성되어있다.
1. 자바스크립트 core 문법
2. 자바스크립트 core 라이브러리
3. 자바스크립트 BOM (Browser Object Model)
4. 자바스크립트 DOM (Document Object Model)
제이쿼리는 이중 자바스크립트 DOM 작업을 쉽게 처리 할 수 있도록 도와주는 라이브러리이다.
이때,제이쿼리는 DOM 작업을 쉽게 도와주는 라이브러리일 뿐,자바스크립트 문법이나 라이브러리를 대체하는 프로그래밍 언어가 아님을 인지해야한다.
JavaScript, jQuery 차이
<script>
// javascript
//ul 찾기
var ul = document.getElementById("ul");
//li 리스트 구하기
var liList = menu.getElementsByTagName("li");
//li 개수만큼 루프 돌며 스타일 변경
for(var i=0;i<liList.length;i++){
//i번째 li 접근
var li = liList[i];
//스타일 변경
li.style.color="#f00";
}
// jquery
$("#ul li").css("color", "#f00");
</script>제이쿼리의 사용법들을 알고 있다면 개발 속도가 빨라진다.
위의 예시는 간단한 예제이기 때문에 별 차이를 못 느낄 수 있지만 실제 제이쿼리의 한줄에 해당하는 기능은 자바스크립트로는 수십~수백줄을 작성해야한다.
하지만 제이쿼리가 항상 자바스크립트보다 우월한 것은 아니다.
제이쿼리는 어디까지나 자바스크립트를 토대로 만든 것이기 때문에 개발 속도가 아닌 처리 속도 부분에서 성능이 떨어지게된다.
제이쿼리 라이브러리를 거치면서 브라우저에 맞는 네이티브 자바스크립트로 변환된 뒤 실행되기 때문이다.
jQuery 사용법
1. CDN(Contents Delivery Network)?
콘텐츠를 효율적으로 전달하기 위해 분산된 서버에 데이터를 저장해 사용자에게 전달하는 시스템.
CDN 선언 시 특정 서버에 트래픽이 집중되지 않고, 컨텐츠를 자동으로 가장 가까운 서버에서 다운로드 하도록하여 직접 파일을 다운로드 받지 않고도 사용할 수 있다.
아래의 코드를 cdn으로 선언해 주면 제이쿼리를 항상 최신버전으로 사용할 수 있다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>2. jQuery 직접 다운로드 받기
- http://jquery.com 에 접속해서 파일을 다운받아 연결한다.
이때 .js와 min.js의 차이로는 전자는 사용자가 모든 소스를 볼 수있는 풀버전 이라 생각하면 되고,
후자는 불필요한 부분을 삭제하여 용량을 줄인것이라 생각하면 된다.
jQuery는 더이상 필요하지 않다?
jQuery는 JS를 '대체'하는 것은 아니며, DOM을 감출 뿐이다.
jQuery의 성공은 DOM API가 실패했다는 증거이다.
jQuery가 현재 사용되지 않는 주요한 이유는 다음과 같다.
- 사용할 이유가 딱히 없다. 과거와 달리 크로스 브라우징 이슈도 적어졌고, virtual DOM의 인기로 DOM을 직접 조작할 필요가 없어졌다. 또한, jQuery로 할 수 있는 대부분 기능은 바닐라 JS나 TypeScript 등으로 똑같이 구현할 수 있다.
- 무겁다. jQuery는 기존 코드를 래핑(wrapping)해서 새롭게 만든 패키지이다. 문제는 이러한 래핑이 지나치게 많고, 애초에 최적화를 위해 설계되지도 않았다는 점이다.
- 좋은 대안이 많이 생겼다. 리액트만 해도 재사용성을 높이는 컴포넌트를 기반으로 jQuery보다 훨씬 가독성이 높은 코드를 작성할 수 있다. 또한 1번에서 언급했듯이 더는 DOM을 직접 조작하지 않고 virtual DOM을 이용하는 프레임워크가 널리 사용되고 있다. 이러한 패러다임의 변화는 jQuery의 입지를 더욱 좁게 만들고 있다.
