개요
- 자바스크립트를 쓰다 보면 코드를 잘 짜고 테스트 해보려고하면 갑자기 오류가 뜰 때가 있다.
- 그렇다면 그러한 경우 Script문이 Body 문보다 먼저 실행이 되어서 script문들이 수행이 안되고 있다고 생각해봐야 한다.
- 기본적으로 Script문은 Head 태그 안에 있게 되는데 그러한 경우 html이 위에서 부터 코드를 읽다가 script 태크를 만나게 되면 body 문으로 가지 않고 script문을 읽기 시작한다.
- 그렇다면 그러한 문제를 해결 하기위해 어떻게 해야 하는 것인지 해결방법을 알아보자.
해결방법
- 여러가지의 해결 방법이 있지만 여기서는 2가지만 알려드리겠습니다.
- Script 태그에 defer를 추가
- 해당 방법을 사용하면 html이 script 태크를 만나면 body문과 같이 읽기 시작함으로써 그러한 오류를 어느정도 잡을 수 있다. 하지만 비동기식에는 누가 먼저 작동하냐에 따라 문제가 생길 수 있기에 완벽한 방법은 아닐 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>D-Day</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script> // 스크립트 태그에 defer를 추가함.
</head>
<body>
.....
</body>
</html>
- Script태그를 body 태그 제일 밑으로 이동
- 해당 방식을 제일 선호하며 요즘 대부분의 프론트 개발자들도 내려서 개발을 하고 있음.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>D-Day</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
.....
<script src="script.js" defer></script> // 스크립트 태그에 defer를 추가함.
</body>
</html>
