HTML 파일에 외부 JavaScript 파일을 로드하는 가장 좋은 방법 ✅

오랫동안 JavaScript로 코딩해 왔다면 HTML 문서에 스크립트를 포함하는 다양한 방법이 있다는 것을 알게 될 것입니다.

불행하게도 JavaScript의 시대로 인해 웹에 외부 파일을 포함하는 많은 기술이 있습니다. 그 중 대부분은 구식입니다.

그렇다면 선호하는 방법은 무엇입니까?

지연 속성 💪


defer 속성을 소개하겠습니다. 이는 HTML<script> 태그에서 유효하며 대부분의 시나리오에 완벽한 솔루션입니다.
<script> 태그가 <head>에 배치되고 defer 속성이 있는 경우 외부 스크립트는 페이지의 나머지 부분과 비동기식으로 로드되며 문서가 구문 분석된 후에만 실행됩니다.

여기에는 3가지 주요 이점이 있습니다.
  • 페이지 로드 속도가 빨라짐 ⚡
  • <script> 끝에 <body>를 넣는 것과 비교하여
  • 더 나은 의미
  • 가장 중요한 오류 방지❗

  • 내가 말하는 오류는 무엇입니까?



    요소를 찾을 수 없는(또는 null ) 요소입니다.

    문서가 구문 분석되기 전에 HTML 요소를 선택하려고 시도하여 "cannot access X of null"라는 오류 메시지가 나타납니다.

    과거에 이에 대한 솔루션은 onload 이벤트 또는 더 나은 방법인 DOMContentLoaded 이벤트를 사용하는 것이었습니다. 이제 defer 속성이 있습니다.

    다음은 사용법의 예입니다.

    <!DOCTYPE html>
    <html>
        <head>
            <title>Website Title</title>
            <script src="js/main.js" defer></script>
        </head>
    </html>
    



    // src/main.js
    
    // Only executes once the DOM has been parsed - no errors! 😏
    const myInput = document.getElementById("myInput");
    

    defer 속성이 도움이 되길 바랍니다 💪

    지금 등록하세요 👉 JavaScript DOM 단기집중과정



    아래 링크에서 이 게시물에서 다루는 주제 중 일부를 다루는 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다. 👇
    https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1



    즐기다!

    좋은 웹페이지 즐겨찾기