Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

나를 위한 기록

231025/D+22 본문

Today I Learned

231025/D+22

솔솔이소리솔 2023. 10. 25. 22:57

오늘 겪은 문제

let inputId = document.getElementById('writer');
console.log(inputId);

코드 실행 시 html요소가 있음에도 null이 출력됨.

 

문제 원인 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Detail</title>
    <link rel="stylesheet" href="/style/details/review.css" />
    <script src="src/details/review.js"></script>
  </head>
  <body>
    <!-- 코멘트작성 필드 -->
    <form id="commentForm">
      <div class="inputArea nameArea">
        <input id="writer" type="text" placeholder=" 작성자" />
...

 

웹브라우저는 html 문서를 파싱하여 DOM트리를 만들고 그를 기반으로 웹페이지를 렌더링(웹페이지를 브라우저에 표시하는 것)한다.

html파서가 위에서부터 아래로 내려오며 문서를 파싱 하다가 <script></script> 태그를 만나면 제어권을 자바스크립트에 넘겨주게 된다. 

그러면 html이 전체 파싱되기 전에 자바스크립트가 실행이 되는데, 그로 인해 'writer'라는 값을 가진 html요소를 찾을 수 없게 된다. inputId 값이 비어있으므로 'null'이 콘솔에 출력된다.

 

해결

script 내에 defer, 또는 type="module"을 넣어줌으로써 자바스크립트의 실행을 지연시킨다.

html파서가 script에서 자바스크립트에 제어권을 넘겨주지 않고 html전체를 파싱한 후 자바스크립트가 실행된다.

<script type="module" src="src/details/review.js"></script>

module은 defer와 strict mode를 기본내장하고 있다.

자바스크립트 파일을 여러개로 분리하는 경우 module을 사용하면 import와 export를 이용하여 다른 module파일에 있는 함수를 가져와 사용할 수 있다. 이는 module이 각각의 자바스크립트에 독립적인 스코프 사용을 보장하기 때문이다.

 

느낀점

  •  웹페이지나 이벤트의 작동 원리를 이해하고 있거나 배경지식이 있으면 다른 것들을 공부할 때 어느 정도 해결방법을 유추하는 데 도움이 되는 것 같다.
  • module에 대해 알고 나니 다른사람들 코드에 있던 import, export가 왜 있었는지 이제 이해가 된다.

'Today I Learned' 카테고리의 다른 글

231027 / Day 24  (0) 2023.10.27
231026 / Day 23  (0) 2023.10.26
231024/D+21  (0) 2023.10.24
231023/D+20  (0) 2023.10.23
231020 / D+17  (0) 2023.10.20
'Today I Learned' Related Articles more