TIL

TIL-24.04.24

너구리개발자 2024. 4. 24. 23:17

 

 

문제점 & 해결방법

<script>와 HTML파싱 사이의 문제

본인은 보통 html파일 내부 <script>의 위치를 <head> 안에 두곤한다. 보통은 아무런 에러없이 잘 실행되지만, 가끔 DOM요소들을 JS파일에서 읽지못해 null값을 참조하려한다는 에러를 맞이한다. 그때마다 습관적으로 <script>위 위치를 <body>맨 아래로 위치시켜 이를 해결했는데, 이 문제에 대한 해결방법과 이유를 알려고한다.

일반적으로 <script> 요소가 <head> 요소 안에 있으면 페이지의 DOM 요소에 접근할 때 문제가 발생할 수 있다. 이는 일반적으로 스크립트가 HTML의 파싱을 차단하고 실행되기 때문에 발생한다.  스크립트가 실행되는 동안에는 페이지의 다른 요소들이 아직 로드되지 않았을 수 있다. 그러니 스크립트에서 DOM요소에 접근하려할때 null or undefined를 참조하려한다는 에러를 맞이하는것이다.

 

이에 대한 해결 방법으로는

 

1. 스크립트를 <body> 요소의 끝에 위치시키기: 이렇게 하면 페이지의 모든 요소가 로드된 후에 스크립트가 실행된다.

<!DOCTYPE html>
<html>
<head>
    <title>예제</title>
</head>
<body>
    <!-- 페이지의 내용 -->
    
    <script>
        // 여기에 스크립트 작성
    </script>
</body>
</html>

 

 

 

 

2. DOMContentLoaded 이벤트 사용: 이벤트 핸들러를 등록하여 문서의 DOM이 완전히 로드될 때까지 기다립니다.

 

<!DOCTYPE html>
<html>
<head>
    <title>예제</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // 여기에 스크립트 작성
        });
    </script>
</head>
<body>
    <!-- 페이지의 내용 -->
</body>
</html>

 

 

 

 

 

3. <script>요소에 'defer'속성 사용: 'defer'속성을 사용하면 스크립트가 페이지의 파싱을 차단하지 않고 비동기적으로 로드되며, 페이지의 나머지 내용이 로드된 후에 스크립트가 실행됨. 즉, defer스크립트의 실행은  페이지구성이 끝날때까지 지연된다는것이다

 

<!DOCTYPE html>
<html>
<head>
    <title>예제</title>
    <script defer src="example.js"></script>
</head>
<body>
    <!-- 페이지의 내용 -->
</body>
</html>

 

 

 

 

알게된점

 HTML파일을 HTML파싱과 스크립트실행 간의 순서에 대해 고민하며 코딩하는 능력을 얻게되었다.