5. 블로그 프로젝트

댓글 프론트 부분을 구현하였다. 댓글의 추가만을 구현하였고, 수정과 삭제는 다음에 구현할 것이다.

 

detail.html

<div class="container">

            <h1 class="display-3 center-block">재원블로그</h1>
            
            <input id="postID" hidden th:value="${post.id}">

            <h3 th:text="${post.title}"></h3>
            <p th:text="${post.createdDate}"></p>
            <p th:text="${post.content}"></p>
            <button id="updateButtonClicked" class="btn btn-light">수정</button>
            <button id="deletePost" class="btn btn-light">삭제</button>
            
            <div>
                <ul id="replies" th:each="reply : ${replies}">
                    <li>
                        <input name="replyID" th:value="${reply.id}" hidden>
                        <p>작성자 : <span th:text="${reply.writer}"></span></p>
                        <p th:text="${reply.createdDate}"></p>
                        <p th:text="${reply.content}"></p>
                    </li>
                </ul>
            </div>
            <div>
                <p>작성자 : <input id="replyWriter"></p>
                <textarea id="replyContent"></textarea>
                <button id="createReply">작성</button>
            </div>
        </div>

detail.html의 body 부분이다. 간단한 부분인데 자바스크립트가 계속 새로운 createReply 부분을 인식하지 못하는 문제가 발생했다. 원인은 ul 에서 th:each 부분 때문이었다. ul 부분을 div로 감싸주지 않으면 그 밑의 태그들은 전부 인식하지 못하였다. 그래서 ul 부분을 div로 감싸니 그제서야 createReply 부분들을 인식할 수 있었다.