guestbook : 07. 등록페이지와 등록처리 (2)

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

bright jazz music

guestbook : 07. 등록페이지와 등록처리 (2) 본문

Framework/Spring

guestbook : 07. 등록페이지와 등록처리 (2)

bright jazz music 2022. 7. 17. 23:16

문제 발생.

앞에서 작성한 코드가 동작하지 않았다.

localhost:8080/guestbook/register에서 글을 등록하면 DB에 저장되고 게시판에 표시는 되지만

모달창이 뜨질 않았다.

크롬에서 개발자 모드를 켜봐도 아래와 같은 오류만 나타낼 뿐이었다.

uncaught referenceerror: $ is not defined modal

자바스크립트 문제일 것이라고 생각하고 자바스크립트 소스를 추가해 주었다. 아래와 같은 오류만 나타날 뿐이었다.

TypeError: "x" is not a function.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function

결국 저자가 운영하는 카페에서 소스를 받아 비교해 보았다.

원인

원인은 부트스트랩과 jquery를 프로젝트에 받아 놓지 않은 것이었다.

$(" ") 형식을 사용하는 것이 제이쿼리 문법인데 제이쿼리가 프로젝트에 존재하지 않으니 동작할 리 없었다.

해결 방법

따라서 카페에서 받은 파일의 압축을 풀고 새로운 프로젝트로 불러들였다. 그러고는 static 폴더 밑에 필요한 파일과 폴더를 기존 프로젝트에 복사해 넣었다. 사실 복사해 붙여넣지 않아도 큰 문제는 없다. 다만 나는 내가 처음부터 진행하던 프로젝트를 계속해서 진행하고 싶었다.

내 경우 static 밑에 dist 폴더가 하나 더 있다. 거기에 vendor 폴더를 복사해 넣었다. vendor 안에는 부트스트랩과 제이쿼리 소스가 들어 있다.

코드 변경

먼저 jquery와 부트스트랩은 받아 놓지 않은 시기의 내 코드는 아래와 같다. 이것 저것 해보았기 때문에 원래와 같지 않다는 것은 감안해야 한다.

기존 :

<!-- 페이지 기본 레이아웃을 담당하는 basic.html -->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="setContent(content)">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Simple Sidebar - Start Bootstrap Template</title>

    <!-- Core theme JS-->
        <script th:src="@{/dist/js/scripts.js}"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Bootstrap core JS-->
    <script th:src="@{https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js}"></script>

    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" th:href="@{/dist/assets/favicon.ico}" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link th:href="@{/dist/css/styles.css}" rel="stylesheet" /> <!-- 사이트 전반의 레이아웃 관장 -->
</head>
<body>
<div class="d-flex" id="wrapper">
    <!-- Sidebar-->
    <div class="border-end bg-white" id="sidebar-wrapper">
        <div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div>
        <div class="list-group list-group-flush">
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Dashboard</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Shortcuts</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Overview</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Events</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Status</a>
        </div>
    </div>
    <!-- Page content wrapper-->
    <div id="page-content-wrapper">
        <!-- Top navigation-->
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<!--            <div class="container-fluid"> 실제로 전달되는 부분 -->
            <div class="container-fluid">

                <button class="btn btn-primary" id="sidebarToggle">Toggle Menu</button>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
                        <li class="nav-item active"><a class="nav-link" href="#!">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#!">Link</a></li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#!">Action</a>
                                <a class="dropdown-item" href="#!">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#!">Something else here</a>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
        </nav>
        <!-- Page content-->
        <div class="container-fluid">
            <th:block th:replace="${content}"></th:block>
<!--            <h1 class="mt-4">Simple Sidebar</h1>-->
<!--            <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>-->
<!--            <p>-->
<!--                Make sure to keep all page content within the-->
<!--                <code>#page-content-wrapper</code>-->
<!--                . The top navbar is optional, and just for demonstration. Just create an element with the-->
<!--                <code>#sidebarToggle</code>-->
<!--                ID which will toggle the menu when clicked.-->
<!--            </p>-->
        </div>
    </div>
</div>

</body>
</th:block>
</html>

변경 후 :

<!-- 페이지 기본 레이아웃을 담당하는 basic.html -->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="setContent(content)">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Simple Sidebar - Start Bootstrap Template</title>


    <!-- Bootstrap core CSS --> <!-- 내 경우 static 밑에 dist 폴더가 존재해서 경로에 /dist를 추가하였다. -->
    <link th:href="@{/dist/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
<!--    <link th:href="@{/dist/css/simple-sidebar.css}" rel="stylesheet">-->

    <!-- Bootstrap core JavaScript -->
    <script th:src="@{/dist/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/dist/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" th:href="@{/dist/assets/favicon.ico}" />

    <!-- Core theme CSS (includes Bootstrap)-->
    <link th:href="@{/dist/css/styles.css}" rel="stylesheet" /> <!-- 사이트 전반의 레이아웃 관장 -->

    
    
</head>
<body>
<div class="d-flex" id="wrapper">
    <!-- Sidebar-->
    <div class="border-end bg-white" id="sidebar-wrapper">
        <div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div>
        <div class="list-group list-group-flush">
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Dashboard</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Shortcuts</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Overview</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Events</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Status</a>
        </div>
    </div>
    <!-- Page content wrapper-->
    <div id="page-content-wrapper">
        <!-- Top navigation-->
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<!--            <div class="container-fluid"> 실제로 전달되는 부분 -->
            <div class="container-fluid">

                <button class="btn btn-primary" id="sidebarToggle">Toggle Menu</button>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
                        <li class="nav-item active"><a class="nav-link" href="#!">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#!">Link</a></li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#!">Action</a>
                                <a class="dropdown-item" href="#!">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#!">Something else here</a>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
        </nav>
        <!-- Page content-->
        <div class="container-fluid">
            <th:block th:replace="${content}"></th:block>
<!--            <h1 class="mt-4">Simple Sidebar</h1>-->
<!--            <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>-->
<!--            <p>-->
<!--                Make sure to keep all page content within the-->
<!--                <code>#page-content-wrapper</code>-->
<!--                . The top navbar is optional, and just for demonstration. Just create an element with the-->
<!--                <code>#sidebarToggle</code>-->
<!--                ID which will toggle the menu when clicked.-->
<!--            </p>-->
        </div>
    </div>
</div>

</body>
</th:block>
</html>

프로젝트 재실행

프로젝트를 재실행 한 뒤 등록 테스트를 해 본다. 모달이 제대로 뜨는 것을 확인하기 위함이다.

주소는 localhost:8080/guestbook/register이다.

위 경로에서 나타나는 폼의 내용을 채우고 등록 버튼을 누른다.

등록이 완료되면 리스트 페이지로 돌아간다. 모달창이 뜨는 모습을 확인할 수 있다. 그 뒤에는 등록된 게시글이 보인다.

아래는 카페에서 다운받은 프로젝트의 원본 코드.

ch04.zip

1.14MB

'Framework > Spring' 카테고리의 다른 글

guestbook : 09. guestbook 게시글 조회 처리 (0)	2022.07.20
guestbook : 08. 등록페이지의 링크와 조회 페이지의 링크처리(1) (0)	2022.07.19
guestbook : 07. 등록페이지와 등록처리 (1) (0)	2022.07.11
guestbook : 06. 목록처리(3) 컨트롤러와 화면에서의 목록처리 (0)	2022.07.08
guestbook : 06. 목록처리(2) 데이터 페이지 처리 (0)	2022.07.06