jQuery

jQuery는 자바스크립트 라이브러리이다.

설치하기

npm 으로 설치할 수 있고 여러 가지 버전(압축된 배포용, 압축되지 않은 개발용 등)로도 설치 할 수 있. 이번 넷플릭스 개선 프로젝트에서는 용량이 가벼운 slim 버전으로 사용했다.

해당 링크를 복사해서 html 문서에 불러와 줍니다. 이때, 사용자가 작성하는 로직 코드가 라이브러리에 의존한다면, 라이브러리 코드를 먼저 호출해야 합니다.

html 문서에서 jQuery를 불러온 이미지

네트워크 패널에서 확인 했을 때 설치 파일이 먼저 불러와 진 것을 확인 할 수 있습니다.

사용하기

• $ 변수는 window.jQuery와 동일 하다는 것을 알 수 있습니다.

• jQuery로 만들어진 객체임을 표시하기 위해 객체에 $기호를 붙여 줍니다.

• jQuery는 일반적으로 DOM 객체가 아닌 jQuery 객체를 반환합니다.

이벤트 메서드

이벤트를 사용하기 전 DOM Node를 사용할지 jQuery Object를 사용할 것인지 확인해야 한다.

DOM Node는 DOM의 API를 사용하게 된다. jQuery Object는 jQuery가 가지고 있는 기능(API)를 사용할 수 있다.

jQuery &&
  jQuery(function ($) {
    const $accordion = $('.Accordion')

    $accordion.click(function (e) {
      console.log(e.target)    // DOM node
      console.log($(e.target)) // jQuery Object
    })
  })

console.log의 결과를 브라우저 console 패드에서 확인