티스토리 뷰
728x90
반응형
Uncaught ReferenceError: $ is not defined 라고 하는 오류를 혹시 보신 적 있으신가요?
사실 제 입장에서는 이 오류를 언제 자주 발견하게 되나면, Reflected XSS 취약점을 발굴할 때 발견하곤 합니다. 그리고 웹 개발 시에도 보곤 하죠.
우선 이 오류의 원인부터 파악해겠습니다.
<html>
<head>
<!--script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script-->
</head>
<body>
<h1>hello</h1>
<script>
$( document ).ready(function() {
console.log( "ready!" );
});
</script>
</body>
</html>가장 주된 원인은 script 태그에 $ 기호를 사용했지만 jquery를 상단에 정의해주지 않았기 때문입니다. 만약 위의 jquery 스크립트 태그의 주석을 풀면 동작하겠지요.
그리고 물론 아래와 같이 $ 기호를 먼저 사용하고 jquery 스크립트를 하단에 삽입하여 순서에 따라 아직 정의되지 않은 $ 라는 jquery 문법을 사용하려다가 오류가 나는 케이스도 있겠습니다.
<html>
<head>
</head>
<body>
<h1>hello</h1>
<script>
$( document ).ready(function() {
console.log( "ready!" );
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
</body>
</html>
여기까지 일반적으로 오류가 나는 상황을 함께 알아보았습니다.
- 끝 -
728x90
반응형
'프로그래밍 > Frontend' 카테고리의 다른 글
| [javascript] alert 확인, 취소 버튼에 따라 다르게 코드작성하기 (0) | 2021.10.11 |
|---|---|
| [오류해결] Uncaught SyntaxError: Unexpected token ' in JSON at position 1 (0) | 2021.09.02 |
| [echarts] 무료 자바스크립트 차트 Echarts 편하게 사용하기 (0) | 2021.09.01 |
| [React] reset.css 적용 방법 (0) | 2021.05.14 |
| [오류해결] Uncaught TypeError: is not a function (0) | 2021.03.22 |
댓글
