의존성 로딩의 문제

의존성 로딩

만약 'loading'함수가 다른 스크립트에 정의되어 있다면 스크립트 로딩 순서에 따라 변수를 선언하는 부분에서 해당 객체를 참조할 수 있는지 여부가 결정될 수 있다.

 

의존성 로딩의 문제 예시

<!-- 예시 1: loading이 정의된 스크립트 파일 -->
<script src="loadingScript.js"></script>

<!-- 예시 2: load 변수 선언 -->
<script>
    // 여기서는 loading이 아직 로딩되지 않았을 가능성이 있음
    var load = new loading();
</script>

 

위의 코드에서 첫 번째 '<script>'태그가 있는 파일에서 'loading'을 정의하고, 두 번째 '<script>'태그에서 var load = new loading();를 호출하고 있다고 가정하면 브라우저는 스크립트 파일을 로딩하는 데 시간이 걸릴 수 있기 때문에 두 번째 <script>에서 아직 정의되지 않은 상태에서 new loading();를 호출하면 오류가 발생할 수 있다.

 

해결방법

<!-- 예시 1: loading이 정의된 스크립트 파일 -->
<script src="loadingScript.js"></script>

<!-- 예시 2: 스크립트 로딩 후에 load 변수 선언 -->
<script>
    // 스크립트 로딩이 완료된 후에 실행
    document.addEventListener("DOMContentLoaded", function() {
        var load = new loading();
    });
</script>

 

스크립트 로딩이 완료된 후에 실행하도록 하면 의존성 문제를 해결할 수 있다.

 

제이쿼리 활용

<!-- jQuery 로딩 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- 예시 1: loading이 정의된 스크립트 파일 -->
<script src="loadingScript.js"></script>

<!-- 예시 2: 스크립트 로딩 후에 load 변수 선언 -->
<script>
    // jQuery를 사용하여 문서가 로딩 완료된 후에 실행
    $(document).ready(function() {
        var load = new loading();
    });
</script>