[블로그프로젝트] 32. 댓글리스트 출력

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

---

게시글에 댓글들이 달렸을때의 기능을 작성하고자한다.

우선 repository에 ReplyRepository를 생성한후 JpaRepositry를 상속받아 사용할수 있게 해준다.

public interface ReplyRepository extends JpaRepository<Reply,Integer> {

}

 

댓글의 디자인은 아래와 같이 진행할 예정이다

 

detail.jsp로 이동해서 아래와 같이 작성해준다.

https://www.w3schools.com/bootstrap4/bootstrap_cards.asp 에 있는 card를 사용해서 구분해주었다.

 

댓글을 작성하는 곳과 이미작성된 댓글을 div태그로 나눠주었다.

그리고 board객체에 reply가 포함되어 있기때문에 반복문을 활용해 해당 게시글에 있는 모든 댓글들을 board.replys로 뿌려주고

해당 댓글의 내용인 content와 작성자인 username을 Reply객체에서 가져온다

 

여기서 reply객체와 board 객체는 서로를 포함하고 있어 무한참조를 하게되는 상황이 있을수 있기때문에

@JsonIgnoreProperties 어노테이션을 추가해준다.

Reply.jsp

Board.jsp

@JsonIgnoreProperties({"board"})

<div class="card">
            <div class="card-body"><textarea class="form-control" rows="1"></textarea></div>
            <div class="card-footer"><button class="btn btn-primary">Write Reply</button></div>
    </div>
    <br>
    <div class="card">
            <div class="card-header">Reply</div>
        <ul id="reply--box" class="list-group">
            <c:forEach var="reply" items="${board.replys}">
                <li id="reply--1" class="list-group-item d-flex justify-content-between">
                    <div>${reply.content}</div>
                    <div class="d-flex">
                        <div class="font-italic">${reply.user.username} &nbsp;</div>
                        <button class="badge">delete</button>
                    </div>
                </li>
            </c:forEach>
        </ul>
    </div>

 

db에 댓글들을 임시로 작성해서 넣고 값들을 잘 가져오는지 확인해보자

 

board에 id가 2인 게시글에 userId가 2인 사용자가 댓글을 남긴상황

 

서버에서 확인해보면 아주 잘 출력이 되는걸 확인할 수 있다.