script의 올바른 위치?

💡깨달음💡/Javascript

script의 올바른 위치?

과부하가즈아 2024. 6. 14. 21:11

❓script의 권장되는 위치는 하단이라는 것을 처음에 배워서 인식은 하고 있지만 다른 위치에서 사용했을 때 올바르게 사용하는 방법도 알고 싶었다.

1. <head> 내부

but, 요소를 먼저 읽어올 수 있는 작업이 필요하다.

"load"는 HTML 문서의 모든 리소스 (이미지, 스크립트, 스타일 등)가 로드되고 렌더링이 완료되었을 때 발생하는 이벤트로 이벤트 핸들러 내의 코드는 문서가 완전히 로드된 후에 실행한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    
    <script>
      window.addEventListener("load", function(){
        
      })
    </script>
    
  </head>
  <body></body>
</html>

"DOMContentLoaded" 이벤트는 HTML 문서의 모든 DOM 요소가 완전히 로드되고 파싱되었을 때 발생하는 이벤트로 즉, 스타일시트, 이미지 및 하위 프레임 로드가 완료되기 전에 발생시킨다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
    <script>
      window.addEventListener("DOMContentLoaded", function () {
        
      });
    </script>
  </head>
  <body></body>
</html>

➕defer, async➕

외부에서 script를 작성하고 head안에서 연결을 해줄 때 사용하는 속성인데, 개인적으로 이 속성들을 사용했을 때 이유는 정확하지 않지만 원하는 순서로 작동하지 않았던 기억들이 많아서 사용하지는 않는 방법이라 좀 더 공부가 되야 할 듯 한 부분이다.

2. <body>제일 하단

요소를 먼저 다 읽은 후 작동되도록 가장 하단에 작성해서 <head>내부에 작성할 때처럼 load나 DOMContentLoaded와 같은 이벤트를 사용하지 않아도 된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <button class="add">Click</button>

    <script>
      const btn = document.querySelector(".add");

      function clickHandler() {
        console.log("Hi");
      }

      btn.addEventListener("click", clickHandler);
    </script>
  </body>
</html>

❌ 한가지 짚고 넘어가자면 위 script에서는 btn과 clickHandler가 전역변수로 사용되어서 다양한 사람이 작업시 변수명이 겹쳐질 위험이 있다. 그래서 전역변수로 사용되는 것을 지양해야 한다.

해결을 위한 방법으로 겉에 함수를 하나 더 씌워서 불러주면 된다.

다만 이때 함수에 또 이름을 부여하고 그 함수를 호출하면 그게 또 전역이 되는 것이므로

⭕ 이름없는 함수를 만들어서 원하는 코드를 작성해주고 불러주면된다.(초기화로 알면 될 듯) 이름 없는 함수를 불러 주기 위해서 만들어준 이름 없는 함수를 ( )로 묶어주고 호출을 위한 ( )를 붙여주면 된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <button class="add">Click</button>

    <script>
      (function () {
        const btn = document.querySelector(".add");

        function clickHandler() {
          console.log("Hi");
        }

        btn.addEventListener("click", clickHandler);
      })();
    </script>
  </body>
</html>

🫥위 방법이 가장 좋은 방법은 아니고 이 외에도 다양한 방법이 존재하고 프로젝트마다 이를 위한 규칙이 있을 것이다. 홀로 코드들을 작성하고 만들어보다보니 다른 사람과의 작업시 변수가 겹친다는 점을 생각을 해보지 못했었다. 이번에 짚고 넘어감으로써 좀 더 디테일하게 관리할 수 있는 방법을 알게 된 것 같아서 규모가 커질 경우에 따로 변수를 아주 비슷하게 사용할 경우 늘리지 않고 이렇게 사용해봐도 괜찮을 것 같다는 생각이 들었다.