jquery 다운받아 사용하기

• 점프투장고를 따라하다가 막힌 부분과 해결과정을 적어보았습니다.

점프투장고 https://wikidocs.net/book/4223

부트스트랩 반응형 웹의 햄버거버튼을 이용하였고 코드가 제대로 작동한다면 화면크기를 줄이면 햄버거 버튼이 나타나야 한다. 햄버거버튼을 클릭해도 아무런 변화가 없다. 그 이유는 부트스트랩 자바스크립트 파일(bootstrap.min.js)이 base.html 파일에 포함되지 않았기 때문이다. 또 부트스트랩 자바스크립트는 제이쿼리(jQuery)기반이므로 제이쿼리 자바스크립트 파일도 필요하다.

• 자바스크립트 파일과 제이쿼리 자바스크립트 파일 다운 받아 이용하는 방법

  1. 제이쿼리 다운로드 링크 들어가기: https://jquery.com/download/

  2. Download the compressed, production jQuery 3.5.0 다운로드

-   방법 1: 링크 마우스오른쪽 버튼으로 클릭 후 다른 이름으로 링크 저장 누르고 `jquery-3.5.0.min.js` 이름으로 저장할 수 있음

![image-20200503173544029](https://k.kakaocdn.net/dn/cjDBkV/btqDQ9FOVf9/olyWbkETg24hTTARO2XR40/img.png)

-   방법 2: 링크 클릭하고 창 넘어가면 마우스 오른쪽 버튼 클릭 후 다른 이름으로 저장 누르고 `jquery-3.5.0.min.js` 이름으로 저장할 수 있음

![image-20200503173413225](https://k.kakaocdn.net/dn/bNQ95D/btqDQ8fRVpB/7qmj70zuenHsclEKkH9m6k/img.png)

3.  static 폴더에 `jquery-3.5.0.min.js`(제이쿼리 자바스크립트 파일)과 `bootstrap.min.js`(부트스트랩 자바스크립트 파일) 넣어주기

<사진>

4.  base.html에 `/body` 태그 안쪽에 코드 넣어주기

```
#C:\projects\mysite\templates\base.html
...
<!-- jQuery JS -->
<script src="{% static 'jquery-3.4.1.js' %}"></script>
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
</body>
</html>
```

※ 부트스트랩 자바스크립트 파일은 제이쿼리 자바스크립트 파일을 필요로 하기 때문에 제이쿼리 자바스크립트를 먼저 적어줘야 한다.

문제상황

• 점프투장고를 네비게이션바를 따라하다가 막힘

점프투장고 네이게이션바 https://wikidocs.net/71108

• 자바스크립트 파일과 제이쿼리 자바스크립트 파일 실행이 제대로 된다면, 창 크기가 줄어들었을 때 햄버거 버튼을 누르면 왼쪽에 로그인 메뉴창이 떠야하는데 뜨지 않음
• 점프투장고에서는 부트스트랩 4.4.1 버전과 제이쿼리 3.4.1 버전을 이용했음
• 나는 부트스트랩 4.4.1 버전 3.5.0 버전의 제이쿼리를 사용하였음. (두 개 모두 최신버전)

해결과정

1. 개발자 도구(ctrl + shift + i) 콘솔창에서 에러메세지 확인하기

2. 구글에 cannot convert object to primitive value 검색

3. 다른 사람들도 같은 문제가 있음을 발견함

https://stackoverflow.com/questions/61177140/uncaught-typeerror-cannot-convert-object-to-primitive-valuezone-evergreen-js1

다운그레이드로 문제를 해결한 사람들이 있음

4. 최신버전 대신 3.4.1 버전을 이용해보기로 함

   4-1. 제이쿼리 홈페이지 접속: https://jquery.com/

   

​ 4-2. 상단 메뉴바에서 API Documentation 클릭

​ 4-3. 왼쪽 메뉴바에 버전 정보 중 Version 3.4 클릭

​ 4-4. 왼쪽 RecentPost에서 jQuery 3.4.1:triggering focus events in IE and finding root elements in IOS 10 클릭

​ image-20200503180422383

​ 4-5. Download 에서 https://code.jquery.com/jquery-3.4.1.min.js 클릭 후 마우스 오른쪽버튼 누르고 다른 이름으로 저장 클릭하고 jquery-3.4.1.min.js 으로 파일 저장 후 C:\projects\mysite\static\jquery-3.4.1.min.js에 옮기기

​ image-20200503180605900

5. 버전 바뀌었고, 파일명 바뀌었으니 base.html도 3.4.1버전으로 바꿔주기

#C:\projects\mysite\templates\base.html
...
<!-- jQuery JS -->
<script src="{% static 'jquery-3.4.1.min.js' %}"></script>
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
</body>
</html>

※ 부트스트랩 자바스크립트 파일은 제이쿼리 자바스크립트 파일을 필요로 하기 때문에 제이쿼리 자바스크립트를 먼저 적어줘야 한다.

해결!

• 작은 창에서 햄버거 버튼을 클릭하면 왼쪽에 로그인이 뜬다.

 

 

- 타이 포라 복사 붙여넣기가 잘 안되네요...ㅠ 추후 이쁘게 수정하겠습니다^