bom's happy life

[JS] JSP에서 스크립트 작동이 안될 때? - 스크립트 실행시점 문제 본문

오류해결 및 정리✌️

[JS] JSP에서 스크립트 작동이 안될 때? - 스크립트 실행시점 문제

bompeach 2023. 6. 2. 09:52

코드펜에서 작업했을 때 잘 돌아가던 자바스크립트가 JSP로 옮겼더니 값을 못 가져오고 오류가 떴다.

계속 이유 찾아보고 삽질하고 코드 수정해보고 해도 안됐다....결국 어제 그러고 살짝 빡이 친 상태로 퇴근했는데 오늘 태그의 위치를 바꿔보니 작동이 잘된다 ㅜㅜㅜㅜㅜ 

<!DOCTYPE html>
<html>
<head>
  <!-- 문서의 스타일, 외부 스크립트 등을 정의 -->
</head>
<body>
  <!-- HTML 요소들 -->
  <script>
    // JavaScript 코드
  </script>
</body>
</html>

 

 

이유가 뭘까?

 

스크립트 실행시점 문제였다.

자바스크립트 코드가 실행되는 시점이 요소가 존재하는 시점과 일치하지 않았다. 자바스크립트 코드가 HTML 문서의 <head> 태그 내에 위치하면, 해당 요소가 아직 로드되지 않은 상태에서 코드가 실행되어 변수가 null 값을 가지게 된 것이었다. 이 경우 스크립트의 실행 시점을 조정해야 한다. 일반적으로 스크립트를 HTML 문서의 <body> 태그의 맨 아래에 배치하면 요소가 로드된 후에 실행되므로 이러한 문제를 피할 수 있다.

 

내가 잘못 알고 있었던걸까?

 

일반적으로는 자바스크립트 코드를 HTML 문서의 <body> 태그의 맨 아래에 배치하는 것이 권장된다고 한다. 이렇게 하면 HTML 문서의 모든 요소가 로드된 후에 자바스크립트 코드가 실행되므로, 요소에 대한 선택 및 조작이 올바르게 동작할 수 있다고 한다. (나는 스크립트 코드가 바디태그 위에 헤더태그에 위치해야 하는 줄 알았다....)

 

1.<body> 태그의 맨 아래에 <script> 태그를 배치하는 방법 :  →이 방법을 권장함

<!DOCTYPE html>
<html>
<head>
  <!-- 문서의 스타일, 외부 스크립트 등을 정의 -->
</head>
<body>
  <!-- HTML 요소들 -->
  <script>
    // JavaScript 코드
  </script>
</body>
</html>

 

2. DOMContentLoaded 이벤트를 사용하여 스크립트를 실행하는 방법: 

<!DOCTYPE html>
<html>
<head>
  <!-- 문서의 스타일, 외부 스크립트 등을 정의 -->
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // JavaScript 코드
    });
  </script>
</head>
<body>
  <!-- HTML 요소들 -->
</body>
</html>

 

위의 방법 중 어떤 걸 사용하더라도 스크립트 코드가 HTML 요소가 로드된 후에 실행되도록 할 수 있다. 상황에 맡게 사용하면 될 거 같다.

 

 

궁금증...

그렇다면 바디태그 아애 바깥으로(밑으로) 스크립트 태그를 빼도 작동이 될까?

시도해봤는데 잘 작동되기는 한다. 그런데 일반적으로 바디태그 안에서 스크립트 실행하는 것이 좋다고 한다.

스크립트 태그를  body 태그 외부에 배치하는 경우, HTML 문서의 다른 요소들이 로드되지 않은 상태에서 스크립트가 실행될 수 있으므로 주의해야 한다. 다른 요소에 접근하려는 코드가 있다면, 해당 요소가 로드된 후에 실행되도록 조치해야 한다. → 이게 내가 처한 문제의 핵심인듯? 

 

 

저작자표시

'오류해결 및 정리✌️' 카테고리의 다른 글

[DB] MySQLIntegrityConstraintViolationException 예외  (0) 2023.06.09
[JS] 삭제하기 이벤트 오류잡기!!!!  (0) 2023.06.02
window.onload() = function()/ window.addEventListner('load', function(){});  (0) 2023.05.12
XSS(Cross Site Scripting) 크로스사이트스크립팅 방지처리  (0) 2023.05.09
[iBatis] sql-Map-Config.xml 에러해결  (0) 2023.05.03
'오류해결 및 정리✌️' Related Articles more