jQuery란
제이쿼리는 웹사이트에서 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리이다.
JavaScript란
JavaScript는 웹 페이지에 상호 작용을 추가하는 프로그래밍 언어이다.
웹 서버에서 코드를 실행하는 PHP, ASP.NET과 달리 JavaScript는 클라이언트 측에서 실행된다.자바스크립트는 아래와 같이 크게 4가지 요소로 구성되어있다.
1. 자바스크립트 core 문법
2. 자바스크립트 core 라이브러리
3. 자바스크립트 BOM (Browser Object Model)
4. 자바스크립트 DOM (Document Object Model)
위의 목록 중 자바스크립트 DOM 작업을 쉽게 처리할수있도록 도와주는 라이브러리가 제이쿼리이다.
JavaScript와 jQuery의 차이점
JavaScript는 프로그래밍 언어이며, jQuery는 JavaScript로 작성된 라이브러리이다.
jQuery는 JavaScript를 사용하여 작업을 보다 쉽게 할 수 있도록 설계되어 있다.
따라서 좀 더 큰개념이 자바스크립트이며 제이쿼리는 그를 활용하는 작은 개념으로 이해할 수 있다.
jQuery 적용
제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(.js 파일) 형태로 존재한다.
따라서 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드(load)해야 한다.
웹 페이지에 제이쿼리 파일을 로드하는 방법
- 제이쿼리 파일을 다운받아 로드하는 방법
- CDN(Content Delivery Network)을 이용하여 로드하는 방법
CDN을 이용하여 로드하는 방법
CDN(Content Delivery Network)이란 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술입니다.
이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점이 있다.
JQUERY 공식 다운로드 페이지 하단에 여러 기업에서 CDN목록을 제공한다.
1. jQuery.com CDN : <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
2. 구글 CDN : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3. MS CDN : <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
4. CDNJS CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
5. jsDelivr CDN : <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>script
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$(선택자).동작함수();
})
</script>CDN을 이용하여 이와 같이 구성하면 제이쿼리작성을 위한 환경이 완성된다.
References
https://ko.strephonsays.com/javascript-and-vs-jquery-7953
https://hajoung56.tistory.com/51?category=959598
http://www.tcpschool.com/jquery/intro
https://www.devkuma.com/docs/jquery/jquery-%EC%A0%81%EC%9A%A9-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-cdn/#jquerycom-cdn
