[TIL] HTML에서 <script> 태그 순서를 잘 잡아야 하는 이유...

코드스테이츠 미니 해커톤 시간에 만들기 시도해 본 POS를 혼자 다시 만들어 보던 중이었다. 기억을 되새겨가며 하나하나 만들어가고 있었는데, 뭔가 말도 안되는 상황이 발생했다...

logic.js 에서 메뉴 버튼을 만드는 함수를 만들어 놓고, html이 실행되는 즉시 실행되도록 코드를 작성해 놨는데, 아무리 다시 해봐도 작동이 안하는거다...

함수나 함수 명을 잘못 작성했나 싶어서 콘솔 창에서 해당 함수명으로 실행을 해봤는데 실행이 되네...?

그렇다고 에러가 뜨는 것도 아니고 참 난감했다. 구글에다가 'html js 함수 호출 에러'라고 쳐봐도 딱히 나오는 건 없고...

그래서 함수를 한줄 한줄 테스트해 가면서 다시 작성해봤다. 작성했던 함수는 아래와 같은 코드였다.

function makeMenuBtn () {
    for (let i = 0 ; i < menu.length ; i ++){
        console.log(i);
        const btn = document.createElement("button");
        const menuList = document.querySelector("#menuList");
        btn.textContent = menu[i].name;
        menuList.appendChild(btn);   
    }
}

makeMenuBtn();

그런데 처음부터 i 값이 콘솔에 찍히지 않았다. for문 자체에 문제가 있었던 것... 반복 범위를 결정하는 "menu.length"가 작동하지 않았다. menu의 데이터를 갖고 있는 "data.js"를 불러오도록 html에 코드를 작성했는데, 왜 불러오질 못하는지 이해가 안됐다.

당시 코드는 아래와 같았다.

    <script src = "logic.js"></script>
    <script src = "data.js"></script>
</body>

그러다 문득 생각이 난게, "스크립트 코드는 body 태그가 끝나기 직전에 불러야 한다, 그래야만 DOM 구조를 사용할 수 있다."라는 말이 기억이 났고, 스크립트의 순서가 데이터를 불러오냐 마냐를 결정할 수도 있겠다는 생각을 했다.
(어떻게 보면 당연한 얘긴데, 코드스테이츠건 누구건 이걸 명시적으로 알려준 적이 없어서 몰랐다...)

그래서 스크립트의 코드 순서를 바꿨더니 함수에서 "data.js" 안에 들어있던 menu 데이터를 불러오는데 성공했다.

	<script src = "data.js"></script>
    <script src = "logic.js"></script>
    </body>

이번 경험을 계기로 코드 작성 순서에 대해 좀 더 깊이 들여다보게 될 것 같다. 그래도 계속 답답하다가 문제가 해결되니 행복하다!!