# jQuery

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

## 설치하기

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

![](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MPj7cHHXljHML7VLIzq%2F-MPj94f3UZKzyouSVZve%2Fimage.png?alt=media\&token=b2b0e290-1f45-4d76-8a3a-1f59eea798ca)

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

![html 문서에서 jQuery를 불러온 이미지](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MPj7cHHXljHML7VLIzq%2F-MPj9zo8OXs9D7sVGeih%2Fimage.png?alt=media\&token=5a538944-47dc-47ff-90d6-82dbf836f358)

![네트워크 패널에서 확인 했을 때 설치 파일이 먼저 불러와 진 것을 확인 할 수 있습니다. ](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MPj7cHHXljHML7VLIzq%2F-MPjAzXSa3_dyniHv7Ea%2Fimage.png?alt=media\&token=95d85973-afd4-46ec-ad73-fe66429b1c57)

## 사용하기

{% 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 패드에서 확인](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MQ230iCpTaVb_uX5OsG%2F-MQ23Wg13qR9zx-sDUsK%2Fimage.png?alt=media\&token=16cc48d9-462c-497f-8e2d-dcc330430981)
