jQuery | 자바스크립트와 제이쿼리 비교, 제이쿼리 사용법

 

 

1. 자바스크립트, 제이쿼리

자바스크립트는 웹브라우저에서 작동하는 스크립트이다.

기능성 홈페이지 99% 이상이 이 기술을 사용하고 있다고 해도 될 정도로 많이 쓰이고 있다.

​

그렇다면 jQuery 는? jQuery 역시 자바스크립트이다.

다만 자바스크립트로 빈번하게 사용되는 기능들을

조금 더 함축적인 코드를 통해 사용하게 만든 라이브러리, 즉 기능 덩어리 라고 할 수 있다.

 

그렇다면 두 가지의 차이점은 뭘까?

 

 

2. 자바스크립트, 제이쿼리 코드 비교

아래의 코드를 보면 조금 더 확실한 차이점이 보인다.

[스크립트]

 function printArray() {
    var objResult = document.getElementById("result");
    var objItem = document.getElementById("item");
    objResult.innerText = objArray.join(" ");

    objItem.value = "";
    objItem.focus();
  }

 

[제이쿼리]

  $('#result').text(objArray.join(' '))
  $('#item').val("")
  $('#item').focus()
}

 

​같은 기능을 하는 함수 printArray이지만, 제이쿼리의 코드가 훨씬 더 간결하다.

 

jQuery 의 사용법들을 많이 알고 있다면, 개발 속도가 매우 빨라진다.

위의 예시는 간단한 예이기 때문에 소스량이 적지만, jQuery의 한줄에 해당하는 기능은 자바스크립트로는 수십~수백라인을 작성해야 한다.

이미 만들어진 jQuery 기능들의 사용법을 익혀서 쓰느냐,

자바스크립트로 개발하느냐는 개발 속도에서 천지차이.

 

하지만 jQuery 가 항상 자바스크립트보다 우월한 것은 아니다.

jQuery는 어디까지나 자바스크립트를 이용해서 만든 것이기 때문에,

개발 속도가 아닌 처리 속도 부분에서 성능이 떨어진다.

몇단계를 거쳐서 실행하기 때문인데, 다만 속도 빠른 컴퓨터가 그 점을 보완해 주는 것이다.

​

3. jQuery 사용법

첫번째 방법으로는 제이쿼리를 제공해주는 'cdn주소'가 있다.

 

CDN(Contents Delivery Network)?

 

콘텐츠를 효율적으로 전달하기 위해

분산된 서버에 데이터를 저장해 사용자에게 전달하는 시스템.

CDN 선언 시 특정 서버에 트래픽이 집중되지 않고,

컨텐츠를 자동으로 가장 가까운 서버에서 다운로드 하도록

하여 직접 파일을 다운로드 받지 않고도 사용할 수 있다.

 

 

아래의 코드를 cdn으로 선언해 주면 제이쿼리를 항상 최신버전으로 사용할 수 있디.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

 

또 jQuery을 직접 다운로드해서 사용하는 방법도 있다.

- http://jquery.com 에 접속해서 파일을 다운받아 연결하면 되는데,

 

이때 .js와 min.js의 차이로는 전자는 사용자가 모든 소스를 볼 수있는 풀버전 이라 생각하면 되고,

후자는 불필요한 부분을 삭제하여 용량을 줄인것이라 생각하면 될 것 같다.

물론 둘 중 어떤 방법을 선택하더라도 똑같은 환경에서 사용할 수 있다!