티스토리 뷰
웹을 공부한다고 하면 절대 빼놓을 수 없는게 HTML, CSS, JavaScript 일 것이다.
하지만 이 세가지 외에도 부가적으로 더 배워야할 것들이 많은데
이번엔 그 중에서도 jQuery에 대해 공부하려고 한다.
※ 본 내용은 w3schools jQuery 튜토리얼에 잡담, 추가로 검색해서 넣은 내용 등으로 이루어져 있으므로
원래 내용은 아래 링크를 참고하자.
https://www.w3schools.com/jquery/default.asp
00 jQuery란 무엇인가?
jQuery는 JavaScript를 더 편하게 쓰기위한 라이브러리이다.
제대로 알기 전까진 C와 C++ 관계처럼 다른 언어인줄 알았는데 그냥 자바스크립트 위에 얹는 라이브러리였다.
HTML/DOM 조작, HTML 이벤트 메소드, 효과 및 애니메이션 등을 더 편하게 사용할 수 있도록 해준다.
AJAX도 jQuery로 사용이 편리하다는데 AJAX는 나중에 따로 다루도록 하자.
01 jQuery 시작하기
jQuery 라이브러리를 적용하는 방법에는 두가지가 있는데
첫번째는 직접 다운로드 받아 적용하는 방법, 두번째는 CDN을 통해 적용하는 방법이다.
1) 직접 다운받기
먼저 jQuery 사이트에서 라이브러리를 다운받는다. (jQuery.com)
Production 버전과 Development 버전이 있는데
Production 버전은 압축된 형태라 내부는 볼 수 없고 Development 버전은 내부 코드까지 읽을 수 있다는 차이가 있다.
jQuery를 분석할게 아니라면 그냥 Production 버전을 받으면 되는듯.
다운받은 파일을 프로젝트 파일 WebContent 밑에 넣는다.
보통 WebContent/script 이런식으로 폴더를 만들고 거기다 넣는 식이다.
그 다음엔 아래 코드를 그냥 자바스크립트 head 부분에 추가하면 된다.
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
jQuery 라이브러리는 자바스크립트 파일 하나로 되어 있어서 import하기 굉장히 쉬운 편이다.
2) jQuery CDN(Content Delivery Network) 사용하기
파일 다운받는게 싫다면 CDN을 사용하면 된다.
CDN은 여러 노드를 가진 네트워크에 데이터를 저장하여 컨텐츠를 효율적으로 전달하는 시스템을 말하는데,
좀 더 쉽게 말하면 일종의 캐시 역할을 할 수 있도록 전체 네크워크 상에 동일한 컨텐츠 내용을 복제해서 인트라넷 또는 인터넷상에 분산시켜 놓은 시스템을 말한다.
뭔가 여기에다 설명하기엔 조금 길어질 것 같아서 따로 포스팅을 해야겠고
사진 하나를 보면서 간단하게 이해하고 넘어가자.
사용 방법은 그냥 아래 코드를 추가하면 된다. 별도의 파일을 다운받을 필요가 없어서 편리하다.
둘 중에서 마음에 드는 회사(?)로 골라적자.
- 구글 CDN
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
- 마소 CDN
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
두 방법 각각 장단점이 있는데
CDN은 CDN 서버의 성능이 별로라든지, CDN 노드들이 많이 보유되지 않았다든지 하는 문제만 없으면 첫번째 방법보다 효율적이라고 할 수 있다.
하지만 구글이나 마소는 믿을만한 회사들이니(CDN에 한해서ㅎ) 그냥 두가지 방법 중에 마음에 드는 방법으로 하면 된다.
'공부 > jQuery' 카테고리의 다른 글
| [jQuery] 모바일 웹 클립보드 복사 후 키보드 뜨는 현상 해결하기 (0) | 2021.11.24 |
|---|---|
| [jQuery] 3. jQuery와 DOM (0) | 2018.09.11 |
| [jQuery] 2. jQuery 효과, Callback과 Chaining (0) | 2018.03.27 |
| [jQuery] 1. jQuery 문법, Selector와 Event (0) | 2018.01.22 |