티스토리 뷰

Frontend/jQuery

[생활코딩] 라이브러리와 프레임워크 (jQuery)

blueprint-12 2021. 12. 26. 20:54

라이브러리 vs 프레임워크 

공통점: 다른 사람의 도움을 받아서 소프트웨어를 만드는 것 , 다른 사람과 협력하는 모델 

차이점

  • 라이브러리 - 잘 정리해놓은, 재사용하기 쉽도록 되어 있는 소프트웨어/ 내가 만드는 소프트웨어의 부품을 가져오는 느낌  e.g.) jQuery ( JS 라이브러리 중 가장 유명)
  • 프레임워크 - 반제품 소프트웨어를 사용하는 느낌, 내가 프레임워크에 들어가서 작업하는 식( 큰 틀이 있으면 메인부분은 건들이지 않고 기획 의도(웹, 게임 등등)에 따라 수정하여 사용/ 만들고자 하는 것을 처음부터 끝까지 만들지 않도록 해주는 것)

 

jQuery 라이브러리

  • 기본적으로 jQuery는 $로 시작합니다. 그리고 $() 이런 형태가 되죠 '달러'라는 이름의 함수입니다.
  • e.g.) $('a')  // 이 웹페이지의 모든 a 태그를 jQuery로 제어하겠다는 의미
  • 제이쿼리를 사용하면 코드를 더 직관적으로 작성할 수 있습니다 
  • 처리해야할 태그가 여러 가지 있을 때, 반복문을 통해서 처리해야하지만 제이쿼리가 반복문을 대신 처리해준다. ->코드가 훨씬 짧아지겠죠

jQuery CDN(Content Delivery Network)? 

jQuery를 사용할 때 파일을 다운받아서 프로젝트 폴더 디렉토리에 이동해도 됩니다. 하지만 번거롭고 다운받은 라이브러리를 서비스하려면 돈을 내야하고 ..등등의 번잡함이 생길수도 있습니다. 이에 대한 해결책으로 많은 라이브러리들이 CDN을 통해서 자기들의 서버에 파일을 보관해놓고 그것을 script src를 통해 가져갈 수 있도록 하는 방식을 취하고 있습니다. 

 

▼CDN 상세 설명 ▼

  • CDN(Content Delivery Network)은 협력하여 인터넷 콘텐츠를 고속 전송하는 지리적으로 분산된 서버 집단을 의미합니다.
  • CDN으로 HTML 페이지, javascript 파일, 스타일시트, 이미지, 동영상을 비롯한 인터넷 콘텐츠를 로드하는 데 필요한 자산을 신속하게 전송할 수 있습니다. CDN 서비스이 인기는 나날이 성장하고 있으며 Facebook, Netflix, Amazon을 비롯한 주요 웹사이트의 트래픽을 포함한 오늘날 웹 트래픽 대부분이 CDN을 이용하고 있습니다.
  • CDN을 올바로 구성하면 DDOS(Distributed Denial of Service) 공격 같은 일반적인 악성 공격으로부터 웹사이트를 보호하는 데도 도움이 될 수 있습니다.

jQuery CDN 적용하기

▶제이쿼리 홈페이지-> download ->Google CDN ->구글 라이브러리에서 원하는 버전의 jQuery script 복사

//최신버전(가장 위에 노란색으로 표시된 3.x snippet)의 script 태그를 복사해서 사용할 파일에 붙여넣기 해줍니다. 

 

※주의: jQuery 스크립트가 JS의 스크립트  태그보다 위에 위치해야 합니다. jQeury는 자바스크립트 코드 내에서 사용하므로 먼저 로딩되야 합니다. 

다른 방법: html 파일의 <head> 내에 제이쿼리와 자바스크립트 스크립트 태그를 모두 작성한 뒤,

index.js에 ready()코드 추가하기

  $(document).ready(function () {
// 제이쿼리코드 작성 e.g.) $('a').css('color', color);
  });

 

jQuery 사용해보기

상황: 만약 우리가 js로 css를 변경하는 기능을 구현했다고 한다면 이것을 제이쿼리로 대체해봅시다.

제이쿼리 문법은-> 구글에 검색 "jquery css"후 어떻게 사용하는 지 체크해서 적용해봅시다.

let Link = {
    setColor: function (color) {
    //   let alist = document.querySelectorAll("a");
    //   let i = 0;
    //   while (i < alist.length) {
    //     alist[i].style.color = color;
    //     i = i + 1;
    //   }
    //제이쿼리로 css속성 color값을 매개변수로 받은 color로 바꿔준다.
    $('a').css('color', color);
    }
  };

->위에 주석처리해놓은 부분을 한줄짜리 제이쿼리로 대체했습니다!

  • 중요) jQuery는 새로운 언어가 아니라 JS를 이용해서 우리 대신에 .css()라는 함수를 jQuery에 만들어 둔 것입니다. .css()라는 함수가 내부적으로 주석처리된 작업을 대신 처리해주고 있는 것이지요. 

 

 

 

'Frontend > jQuery' 카테고리의 다른 글

[생활코딩][웹브라우저JS] - jQuery 이벤트 관련 API  (0) 2022.02.16
[생활코딩][웹브라우저JS]- jQuery의 node 제어 API  (0) 2022.02.08
[생활코딩][웹브라우저JS]- jQuery 속성(attr) 제어 API, jQuery 조회 범위 제한  (0) 2022.02.05
[생활코딩][웹브라우저JS]- jQuery 객체, jQuery API  (0) 2022.02.01
[생활코딩][웹브라우저JS]- 제어 대상을 찾기(feat. DOM, jQuery)  (0) 2022.01.28
댓글