스크립트 실행 시점에 관하여..

스크립트 실행 시점에 관하여..

publish date
Jun 30, 2020
Tags
js
안녕하세요.
 
이번에는 스크립트로 특정 dom 요소를 접근할 경우스크립트가 실행되는 시점에 따른 문제가 발생하는 경우와
그에 대한 해결책에 대해 알아보겠습니다.

접근 요소가 생성되기 전에 실행되는 경우.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script>
      var itemValue = document.querySelector("#item").value;
      function getItemValue() {
        console.log(itemValue);
      }
    </script>
  </head>

  <body>
    <div id="wrapper">
      <form action="">
        <input type="text" id="item" />
        <input type="button" value="확인" onclick="getItemValue()" />
      </form>
    </div>
  </body>
</html>
이런 경우  itemValue 는 undefined 가 됩니다.
웹 페이지의 코드는 위에서부터 한줄씩 순차적으로 실행되기 때문에스크립트가 실행되는 시점에는
아직 input id=”item”이 생성된 상태가 아니기 때문이죠.

접근 요소가 생성된 후에 실행되는 경우.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>

  <body>
    <div id="wrapper">
      <form action="">
        <input type="text" id="item" />
        <input type="button" value="확인" onclick="getItemValue()" />
      </form>
    </div>
    <script>
      var itemValue = document.querySelector("#item").value;
      function getItemValue() {
        console.log(itemValue);
      }
    </script>
  </body>
</html>
script 가 실행되는 시점을 input 태그 다음으로 작성해두었습니다.
이렇게되면 input이 생성된 후에 스크립트가 실행되므로 정상적으로 값을 조회 할 수 있는것이죠.
 
다만 모든 경우에 스크립트를 요소보다 하단에 위치시킬 수는 없습니다.
 
그럴때 사용 할 수 있는 방법은 실행 시점을 조절하는 것입니다.
실제 요소가 생성된 후에 호출되는 함수 또는 window.onload 또는 jquery 의 $(document).ready({}); 에서 작성하는 것 입니다.
 
각각의 방식으로 코드를 바꿔보겠습니다.

실제 요소가 생성된 후에 호출되는 함수에서 요소 접근

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script>
      function getItemValue() {
        var itemValue = document.querySelector("#item").value;
        console.log(itemValue);
      }
    </script>
  </head>

  <body>
    <div id="wrapper">
      <form action="">
        <input type="text" id="item" />
        <input type="button" value="확인" onclick="getItemValue()" />
      </form>
    </div>
  </body>
</html>
간단한 코드에서는 이렇게 쓰는게 깔끔하고 좋은것 같습니다.
물론 추후에 코드가 복잡해지면 이 방식을 사용하지 못하는 경우가 있을 수 있고
코드의 중복이나 유지보수의 어려움도 생길 수 있습니다.

window.onload 사용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script>
      window.onload = function() {
        document.getElementById("btn1").addEventListener("click", function(e) {
          var itemValue = document.querySelector("#item").value;
          console.log(itemValue);
        });
      };
    </script>
  </head>

  <body>
    <div id="wrapper">
      <form action="">
        <input type="text" id="item" />
        <input type="button" id="btn1" value="확인" />
      </form>
    </div>
  </body>
</html>
이런식으로 스크립트 코드를 모두 onload 안에서 처리해버리면됩니다.( 물론 무조건 onload에 넣어야 하는건 아니고, 실제 요소가 로드된 후에 사용되어야만 하는 코드들을 넣어주시면 좋습니다. )
 
코드가 작성된 위치에서 실행되어야하는 전역변수(?)들도 있으니 그건 유도리있게.. ^^;;
우리의 영원한 친구(?) jQuery 님을 등장시켜봅시다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#btn1").on("click", function() {
          var itemValue = $("#item").val();
          console.log(itemValue);
        });
      });
    </script>
  </head>

  <body>
    <div id="wrapper">
      <form action="">
        <input type="text" id="item" />
        <input type="button" id="btn1" value="확인" />
      </form>
    </div>
  </body>
</html>
jQuery가 참 편해요 ㅎㅎTMI로 위의 코드들을 쭉 보시면 아시겠지만 window.onload 와 jquery document ready 사용시에는 input onclick을 제거하고 이벤트 리스너를 설정하는 방식으로 하였습니다.
 
왜냐면 input onclick 에서 함수를 호출하려면 window.onload 와 document.ready 등에서 변수만 처리하고 전역 함수를 별도로 선언해줘야하는게 일관성이 없고 깔끔하지 않은것 같아서 이런식으로 바꾸었습니다.
 
 이상으로 스크립트 실행 시점과 그에 따른 오류를 방지하기 위한 방법에 대해 알아보았습니다.
 
감사합니다. 😄