1. 라이브러리

Index

Index 1. 라이브러리 1.1 라이브러리 1.2 jQuery 1.3 jQuery CDN과 Download 1.4 jQuery 사용하기 1.5 버전별 차이

1. 라이브러리

1.1 라이브러리

라이브러리란 자주 사용하는 코드를 재사용 할 수 있는 형태로 가공하여 프로그래밍 효율을 높여주는 코드들을 말합니다.

자바스크립트의 가장 유명한 라이브러리는 jQuery입니다. 2022년 전 세계 사용양 2위이고, 앞으로 몇년간은 이 순위는 유지할 것으로 보입니다.

jQuery는 Front-end 개발자가 가장 많이 사용했던 라이브러리로 현재는 리엑트에 밀려 1위에서 2위로 밀려났고 jQuery를 걷어내고 있는 분위기이지만 여전히 많은 레거시 코드로 인해 공부를 해둘 필요가 있습니다. 아래 통계는 스택오버플로우 2021 통계치이고 매년 발표됩니다.

https://insights.stackoverflow.com/survey/2021

1.2 jQuery

jQuery는 빠르고, 작고, feature-rich한 자바스크립트 라이브러리입니다.

엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트를 효율적으로 제어할 수 있는 다양한 수단을 제공합니다.

다음은 jQuery에 대해 참고할 수 있는 사이트들입니다.

http://jquery.com/

http://www.jqueryrain.com/

물론 요즘 프로젝트에서는 jQuery를 걷어내는 작업을 하는 경우도 많지만, 여전히 강력한 영향력을 끼치고 있는 라이브러리임에는 틀림이 없습니다.

예를 들어 Bootstrap에서는 현재 jQuery를 걷어냈지만 의존하고 있는 여러 플러그인들이 아직 jQuery를 사용하기 때문에 어쩔 수 없이 다시 jQuery를 붙여야 하는 웃지못할 상황이 발생되곤 합니다.

1.3 jQuery CDN과 Download

먼저 구글에서 가장 최신의 jQuery cdn을 찾습니다.

jQuery cdn Code


<body>
  ...
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>

cdn에서 복사해 온 코드를 본래 가지고 있던 html 파일에 붙여 넣습니다.

다른 방법으로는 공식홈페이지에서 다운로드 받는 방법이 있습니다.

Download jQuery | jQuery

Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download a sourcemap file for use when debugging with a compressed file.

https://jquery.com/download/

클릭한 다음 우클릭 하셔서 다른 이름으로 저장 누르시고 프로젝트 폴더에 넣어주시면 됩니다.

1.4 jQuery 사용하기

jQuery는 다음과 같이 사용할 수 있습니다.

jQuery test Code


$("p").hide();
$("#test").show();
$(".test").click(function(){
	alert("클릭!");
});
$(".test").click(function(){
	$(this).css('color', 'red');
});
$('.test').text('hello world');
$('#test').html('<b>hello</b> world');
$('#test').css('color', 'red');
$('img').attr('src', 'a.jpg');
$('.one .two').text('hello world');
$('p#two').text('hello world');

1.5 버전별 차이

jquery-1.x : 구형 브라우저 대부분 지원, 가장 안정적인 버전, 최신 버전과 호완문제가 있어 migrate를 함께 넣어주어야 합니다.

jquery-2.x : 익스플로러 8버전 버림, 따라서 파일 크기 감소. 9버전 이상을 호환할 것이라면 2.x를 사용할 것!

jquery-3.x : Promises와 ajax, when, data 등 여러 최신 플러그인과 HTML5 호환