[Thymeleaf] 스프링부트에 Bootstrap, jQuery load 시키기

에러

uncaught referenceerror $ is not defined

에러 상황

jQuery가 제대로 실행되지 않아 modal 실행이 이뤄지지 않음..

<script th:inline="javascript">

            let msg = [[${msg}]];

            console.log(msg);

            if(msg){
                $(".modal").modal();
            }

문제 해결

jQuery가 load 되기 전에 사용하기 때문에 발생하는 문제이다.
jQuery나 Bootstrap 사용하기 전에 명시적으로 로드해주면 된다.

1. static 파일을 이용해 로드하는 방법

    <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>

2. CDN 주소를 이용해 로드하는 방법

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>