Bootstrap + Js 오류(bootstrap is not defined)

부트스트랩을 이용하여 페이지를 구성하고있는데..
게시판의 등록을 하기위해 Modal을 생성중에있다.

 

1.Html

<!-- 게시판 등록 모달 -->
<div id="boardRegModal" class="modal fade" tabindex="-1" aria-labelledby="boardRegModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-body">
                <form id="board_RegForm" onsubmit="return false;">
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">제목 :</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="mb-3">
                        <label for="message-text" class="col-form-label">내용 :</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

 간단하게 div와 form을 생성했고 상세는 후에 완성시킬예정이다.

 

해당 modal을 띄우기위해 버튼을 하나 추가했다.

 

2.Js

var boardRegModal = new bootstrap.Modal(doc.getElementById('boardRegModal'));

먼저 modal을 사용하기위해 모달 초기화를 진행해주고,

/* 게시판 등록 버튼 클릭 */
board_regBtn.addEventListener('click', function () {
    BoardJS.openRegModal()
});

버튼을 클릭하면 모달이 나오도록 함수 설정해주고

/* 모달창 Open */
openRegModal : function () {
    boardRegModal.show();
},

화면에 나오도록 구성했다.

 

실행시킨 후 화면을 보는데

오류가 뜨면서 나오던 list도 나오지 않는다.

 

3.Html script부분 확인

<script defer type="text/javascript" charset="UTF-8" src="/resources/js/auth/admin/manage/board.js"></script>
<script defer type="text/javascript" charset="UTF-8" src="/resources/bootstrap/5.3.3/bootstrap.bundle.min.js"></script>

이렇게 작성을 해두었더니 해당 오류가 발생한거였다.

 

4. 오류 해결

간단하다

<script defer type="text/javascript" charset="UTF-8" src="/resources/bootstrap/5.3.3/bootstrap.bundle.min.js"></script>
<script defer type="text/javascript" charset="UTF-8" src="/resources/js/auth/admin/manage/board.js"></script>

두개의 순서를 바꾸면 해당 오류가 발생하지않고 잘 실행된다.

 

모달 화면

 

*순서를 유의하자 생각보다 쉽게 해결이 가능하다.