권형&오형의 일상

[권형] 01. jQuery 정의(참고) 본문

개발/Jquery

[권형] 01. jQuery 정의(참고)

권형&오형 2017. 9. 26. 14:44

1. jQuery 정의 : 자바스크립트 라이브러리






2. jQuery 특징

     ⑴ 브라우저 호환성 : jQuery 가 알아서 브라우저 별로 실행되도록 내부적으로 처리하므로 브라우저의 특징을 생각하지 않아도 된다. 

     ⑵ 쉬운 DOM 처리 : DOM구조는 요소에 접근하는 방법도 적고 해당 요소를 제어하는 방법도 불편하다. 
                                  특히 제어 방법마다 다른 방식을 가지므로, 기억하기도 힘들고 오류가 생길 수도 있다. 
                                  jQuery는 DOM구조에 쉽게 접근하고 제어할 수 있다.

     ⑶ 쉬운 이벤트 처리 : 이벤트 종류별로 사용 방법이 다르기도 하며, 적용될 DOM 요소에 따라서 사용 가능한 이벤트가 정해져있다. jQuey는 이러한 제약이 없다. 

     ⑷ 쉬운 시각 효과 구현 

     ⑸ 쉬운 AJAX 기능 구현 : AJAX를 활용한 서버 통신 페이지 처리를 쉽게 할 수 있다. 
          AJAX : 현재 자바스크립트가 대세로 자리 잡게 해준 대표적인 자바스크립트 기법.
          → jQuery에서는 간단한 메서드를 통해 쉽게 AJAX를 사용할 수 있다. 

     ⑹ 좋은 확장성 : 사용자가 쉽게 수정할 수 있도록 만들어져있으며 플러그인 제공이 활성화 되어있다. 
                              일반 사용자들도 개발에 활발히 참여해서 많은 플로그인들이 제공된다. 





3. jQuery 개발 환경 설정 
     → jQuery를 사용하기 위해서는 jQuery 파일을 연결해야 한다. 

     jQuery를 연결하는 방법 
     → 둘 중 아무거나 사용해도 jQuery를 사용하는 형태는 변하지 않는다.
 
     ⑴ jQuery 파일을 다운로드 해서 사용 하는 방법
          ① http://jquery.com 에 접속한 뒤 [Download jQuery]를 클릭한다. 
          ② 다운로드 페이지에 Download the compressed, production jQueyr 1.10.2 와 Download the uncompressed, development jQueyr 1.10.2 링크가 있다. 
              전자는 .min.js형태로 후자는 .js 형태로 파일이 다운로드 된다. 
              일반적으로 전자를 많이 사용한다.                

min.js와 js의 차이 : 두 파일의 차이는 용량의 차이이다. 사용법에는 차이가 없다. 
     ex) index라 가정하면 index.min.js 파일과 index.js 파일 형태이다.
    js : 프로그래머가 알아보기 쉽도록 코드가 정리되어 있는 파일    
         그래서 빈문자, 개행 등 실 동작에 필요 없는 문자들이 코드에 포함됨.
          →파일 용량이 크다.   
    min.js : 실제 동작에 필요 없는 문자들을 제거하고 정리한 형태
          →파일 크기가 작다.


          ③ 링크 클릭 뒤 보이는 화면에 마우스 우버튼을 클릭하고 [다른 이름으로 저장하기] 메뉴를 클릭한다. 
          ④ 해당 파일이 필요한 HTML이 위치한 경로에 다운로드 받은 파일을 붙여 넣는다. 
          ⑤ jQuery 파일을 사용하기 위해서는 HTML 파일의 <head> 부분에 다음과 같이 적어준다. 
1
2
3
4
5
6
<head>
    <script src="jquery-1.10.2.min.js"></script>
    //다른 폴더에 있다면 <script src="폴더명/jqueyr-1.10.2.min.js"></script>
    <script src="index.js"></script>
    //jQuery를 먼저 연결하고 사용자 js 파일을 연결해야 한다.
</head>

             → 코드 순서는 순서대로 이다. 
 
     ⑵ CDN을 이용하는 방법
          ① CDN(Comtents Delivery Network) : 콘텐츠를 효율적으로 이용하기 위한 네트워크 시스템
               ex) 구글, 마이크로 소프트 등의 기업이 jQuery를 쉽게 사용하라고 각 회사 서버에 jQuery 파일을 제공
                    → jQuery 파일을 다운할 필요없이 해당 CDN에 있는 파일을 링크만 하면 됨. 
          ② 이점
               ㆍ네트워크가 분산되므로 네트워크 병목 현상을 피할 수 있음.
               ㆍ클라이언트 별로 이루어지는 jQuery 파일의 다운로드에 따른 부하를 감당할 필요가 없음
                   → 트래픽 감소 효과
          ③ 이용법
               ㆍjQuery 사이트의 다운로드 페이지에서 스크롤을 많이 내린다. 
               ㆍjQuery's CDN provided by MaxCDN(jQuery에서 제공하는 CDN), GoogleCDN, Microsoft CDN, CDNJS CDN의 링크 중 한가지 클릭한다.
                  (어떤 것을 사용하더라도 상관 없다)
1
2
3
4
5
6
<head>
    //jQuery 파일을 다운로드하여 사용하는 것이 아니므로 파일 위치는 신경쓰지 않아도 된다. 
    //CDN을 이용하더라도 jQuery를 연결한 후 js를 사용해야 한다. 
    <script src="index.js"></script>
</head>

              
 


'개발 > Jquery' 카테고리의 다른 글

[권형] 07. 여러 개 선택된 태그 관리 (메서드 활용)  (5) 2017.09.26
[권형] 06. 고급 선택자  (1) 2017.09.26
[권형] 05. 선택자  (0) 2017.09.26
[권형] 04. jQuery 키워드 치환  (0) 2017.09.26
[권형] 03. jQuery 시작 코드  (0) 2017.09.26
[권형] 02. jQuery의 코드 형태  (0) 2017.09.26
공유하기 링크
'개발/Jquery' Related Articles more
Comments