-
[에러 수정] Uncaught TypeError: $.ajax is not a function웹 프로그래밍/FE(Front-End) 2021. 6. 29. 20:18
오늘은 JQuery를 이용하여 간단한 웹 페이지를 만들던 중 처음보는 Error가 나와서 해결방법에 대해 정리해보려고한다.
먼저, 문제가 발생한 코드를 봐보자.
(문제가 발생한 요인과 관계없는 코드는 생략)
<!Doctype html> <html lang="ko"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script> function show() { $.ajax({ type: "GET", url: "/me2", data: {}, success: function (response) { if (response["result"] == "success") { alert(response["msg"]); } } }) } } </script> </head>ajax를 쓰기위해 Jquery라이브러리는 <head>에 선언을 해주었고
ajax API를 문제없이 쓴 것으로 보인다.
일단은 ajax를 선언한 코드 내에서는 문제가 될만한 점이 보이지 않는다.
그러면 어디가 잘못된 것일까?
정답은 Jquery 라이브러리를 불러오는 부분이 잘못된 것이다.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>무엇이 JQuery라이브러리가 ajax를 인식하지 못하게 한 것일까?
그것은 jquery-3.5.1.slim.min.js에서 .slim이라는 문구가 문제를 일으킨 것이다.
더보기jquery-3.5.1.slim.min.js을 해석해보면
jquery의 버전이 3.5.1이고
slim.min.js라는 확장자를 가지고 있는데 js는 javascript, min은 원본을 압축한 파일을 의미하고 slim은 해당 버전에서 필요없다고 생각하는 패키지를 제거한 파일을 의미한다.
즉, 3.5.1버전의 원본에서 필요없는 패키지를 제거한 압축 파일을 불어온 것이다.여기서 필요없다고 생각하여 제거된 패키지 중 하나가 ajax여서 jquery-3.5.1.slim.min.js를 불러온다면
ajax를 쓸 수 없는 것이였다.
그러면 아래처럼 slim을 빼고 선언하면 정상적으로 동작을 할까?
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>한 가지 더 바꿔주거나 빼야할 부분이 있다. 바로 integrity속성값이다.
더보기integrity속성은 해당 리소스를 이용할 사이트 관리자가 수정사항을 검토할 수 있도록 해주어 설정값과 변동사항이 있다면 로드되지않는다.
즉, 특정 버전의 파일이 변경되거나 변조된 경우 막을 수 있고 이를 이용해 악의적인 스크립트 변조를 막을 수 있다.
이 속성값은 https://code.jquery.com/jquery-3.5.1.slim.min.js라는 특정 파일을 위한 값이므로
우리가 써야할 https://code.jquery.com/jquery-3.5.1.min.js에 대한 integrity속성값으로 바꿔주거나 삭제해야한다.
결론은 아래와 같이 slim을 빼주고 integrity속성을 삭제하여 선언하면 정상적으로 ajax를 쓸 수 있다.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
(integrity 속성값을 찾지 못해서 넣어주지 못했다..)
# 추가로 script태그에서 crossorign 속성은 무엇인지 궁금하다면 아래 사이트를 참고하면 될 것같다.
https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/crossorigin
HTML attribute: crossorigin - HTML: Hypertext Markup Language | MDN
'웹 프로그래밍 > FE(Front-End)' 카테고리의 다른 글
브라우저 객체(BOM) (0) 2021.07.04 form 태그 파헤치기 (0) 2021.07.01 JQuery 접해보기 (0) 2021.06.27 HTML 속성 제대로 알고 사용하기!!(lang, rel, href, role) (0) 2021.06.26 AJAX 파헤치기 (add. 동기/비동기) (0) 2021.06.21