[JQuery] 제이쿼리를 사용해보자! #제이쿼리란? #다운로드 #CDN #참조사용

 

안녕하세요.
용테크의 용사장 입니다.

 

 

이번 포스팅은

요즘시대의 웹 개발자라면 필수로 알아야하는!

 

제이쿼리에 대해

간단히 알아보고 사용해보려고 합니다!

 

 

자, 시작할까요?

 

 

 

 

● 제이쿼리란?

 

 

제이쿼리는 쉽게말해서

 

자바스크립트를 쉽게

사용할 수 있도록 도와주는 친구,

 

자바스크립트 라이브러리,

자바스크립트 컴포넌트,

 

유용한 자바스크립트를 모아놓은 집합체
정도로 보시면 되겠습니다.

 

 

얼마나 간단하고 좋은지
객체를 불러와서 안보이게 하는 로직으로 예를 들어보겠습니다.

 

 

순수 자바스크립트만을 사용한다면

이렇게 하셔야겟지요?

 

 

 

근데 제이쿼리를 사용한다면 이렇게 간단해집니다.

 

 

 
 
와우, 언빌리버블!

 

 

이게 제이쿼리의 로고인데요.

 

 

 

" writh less, do more. "

 

 

조금써서 많이 써먹는다.

딱 맞는 표현이지요?

 

이 친구가 생김으로써

웹개발자들은 축복, 버프를 받았다고 할 수 있어요!

 

항상 골치이던 크로스브라우징이라던지

웹에서의 표현력, 효율성까지
모두 잡아준 친구지요!

 

그리고 꾸준한 개발을 통해서

현재는 3.0버전까지 안정화가 되었습니다.

 

그럼 이 좋은 제이쿼리, 어떻게 사용할까요?

 

 

 

 

● 제이쿼리를 어떻게 사용하나요?

 

 

일단 제이쿼리는 무료입니다.

 

 

사용하는 방법,

즉 참조하는 방법은 모든 JS파일이 그렇듯 2가지가 있는데요.

 

 

 1. 파일을 다운받아서 프로젝트 폴더에 넣고 참조
 2. CDN을 이용한 참조
 

일단 다운로드 받아서 하는 방법을 해봅시다.
먼저 홈페이지에 들어가줍니다!

http://jquery.com/

 

 

 

 

그리고 Download JQuery를 눌러주세요.

 

 

 

아래쪽에 jQuery 3.0.0 release notes 라고 있습니다.

들어가주시면 중간에 URL 2개가 보이실거에요!

 

 

 

여기서 jquery-3.0.0.js 와 jquery-3.0.0.min.js가 있는데

 

뒤에 min 붙은거는 기능이

조금없는대신 좀 가볍다 생각하시면되요.

 

 

두개 눌러서 다운로드 합니다!

자, 파일은 다운로드 받았으니 프로젝트 폴더에 넣어주시고

 

 

 

소스에서 참조를 해줍니다.

 

 

 
이러면 제이쿼리 사용 준비 완료!!

 

자, 근데 CDN 이라고 제가 위에서 언급을 했었어요.
이거는 뭘까요?

 

 

 

 

음... 어렵군요.

 

 

쉽게 말해서 내 폴더에 있는거 말고
"다른 사이트에 있는거 참조해서 쓴다" 정도로 보시면 되요!

 

 

자, 방법은 엄청쉽습니다.

아까 위에서 나왔던 URL 기억하시나요?

 

그거만 넣어주시면 끝나요! 
<script src="https://code.jquery.com/jquery-3.0.0.min.js">

 

 

 

다운로드 안하셔도 됩니다.

 

 

하지만 이거는 네트워크 환경에서만 사용 가능하다는점,

알아두셔야겟네요.

 

새로운 것을 배워야한다는 부담은 분명 있지만
제이쿼리 배워놓으면 활용도가 참 높습니다!

 

저도 새로 배우면서

계속 포스팅할 예정이니까 함께해요!!

 

 

이만,
용테크의 용사장 이였습니다.