자바스크립트 코드를 맞게 썼는데 에러뜨는 이유(feat.자바스크립트 코드 위치)

웹 퍼블리싱/HTML5

자바스크립트 코드를 맞게 썼는데 에러뜨는 이유(feat.자바스크립트 코드 위치)

욕심많은 햄톨 2023. 12. 22. 20:58

코드를 맞게 썼음에도 에러가 뜨는 경우, 스크립트 코드 위치를 의심해볼 수 있다.

아래와 같은 코드도 스크립트 위치가 잘못되어 콘솔에 에러메시지가 떴다.

html 코드)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./main.js"></script>
</head>
<body>
    <div id="my-name">hamtol</div>
</body>
</html>

javascript 코드)

const myName = document.getElementById('my-name');
console.log(myName.innerText);

콘솔 에러)

브라우저는 코드를 한 줄 한 줄 읽어나가는데, 스크립트 코드를 읽고 있을 때는 html의 <body> 부분을 아직 읽기 전이기 때문에 자바스크립트에서 쓰이는 html데이터가 아직 없는 상태인 것이다.

위의 코드상 브라우저는 <script>부분을 먼저 읽고 그 다음 순서대로 <body> 부분을 읽기 때문에 스크립트에서 에러가 나는 것이다.

스크립트(자바 스크립트..)코드는 html문서 내 태그 안에 쓰는 것이 일반적이지만 이러한 이유때문에 <body>태그 내에 적는 경우도 많다.

<head>태그 안에 스크립트 코드를 그대로 두면서 이를 해결할 수 있는 방법도 있다.

<script src="./main.js" defer></script>

이렇게 적으면 코드를 끝까지 읽은 후 스크립트 코드로 돌아가기 때문에 데이터를 꺼내는데 문제가 없어진다.

하지만 defer을 쓰려면 src속성이 필수기 때문에 외부 스크립트 코드를 불러올 때 쓸 수 있다.

728x90