> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/make-better-netflix-website/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/make-better-netflix-website/interaction/jquery.md).

# jQuery

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

## 설치하기

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

![](/files/-MPj94f3UZKzyouSVZve)

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

![html 문서에서 jQuery를 불러온 이미지](/files/-MPj9zo8OXs9D7sVGeih)

![네트워크 패널에서 확인 했을 때 설치 파일이 먼저 불러와 진 것을 확인 할 수 있습니다. ](/files/-MPjAzXSa3_dyniHv7Ea)

## 사용하기

{% embed url="<https://youtube.com/watch?v=tSxTwRGKcBE>" %}

* `$` 변수는 `window.jQuery`와 동일 하다는 것을 알 수 있습니다.&#x20;
* jQuery로 만들어진 객체임을 표시하기 위해 객체에 `$`기호를 붙여 줍니다.&#x20;
* jQuery는 일반적으로 DOM 객체가 아닌 jQuery 객체를 반환합니다.

### 이벤트 메서드

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

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

```javascript
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 패드에서 확인](/files/-MQ23Wg13qR9zx-sDUsK)