[Spring DB] 게시판 만들기 (5) : 댓글 구현

DB와 Restful을 활용한 댓글 구현을 해봤다.

 

 

전체 HTML

 

 

전체 HTML에서 댓글 부분

 

 

 

DB 테이블을 만든 후, DTO 생성, @Data 어노테이션은  @Getter / @Setter, @ToString, @EqualsAndHashCode와 @RequiredArgsConstructor 를 합쳐놓은 것. no는 댓글의 넘버, boardNo는 게시물의 넘버, userID는  댓글을 쓴 유저, title은 댓글의 제목, text는 댓글 내용, writeDate는 댓글을 쓴 날짜이다. 이때 날짜는 현재 시각을 나타내야 하기 때문에, 기본 값을 현재 시간으로 설정해야 하고, insert문에서 작성하면 안된다.

 

 

 

전체적인 셋팅. 댓글을 조회하는 select문, 댓글을 삽입하는 insert문, 댓글을 수정하는 update문, 댓글을 지우는 delete문을 작성한다. 

 

 

 

이제 자바 스크립트 작성. 맨위 commentsSection은 댓글이 표시될 장소, writeSection은 댓글을 작성하는 곳. board-no는 헤당 게시글의 넘버, writeBtn은 댓글 작성 버튼이다.

 

 

 

게시물 작성하는 함수. 타이틀을 적는 곳과, 유저, 댓글 내용을 적는 input과 textarea태그를 가져온 뒤, JS 데이터를 만든다. 주의할 점은. 데이터의 키 값을 DB의 속성명과 동일하게 해야 된다. 그리고 만든 JS 데이터를 JSON 데이터로 변환하여 POST에 요청을 보낸다. 댓글 작성에 성공하면 곧 만들 get_comments(); (댓글 조회) 함수를 실행시키게 한다.

 

 

 

댓글 객체들을 화면에 보여주는 함수이다. 맨 처음 댓글 전부를 화변에서 제거하고 시작한다. 불러온 객체 리스트들을 하나씩 조회하여, 다음 HTML 형식으로 조회하게끔 한다. 그리고 수정 버튼과 삭제 버튼까지 만든다. 수정 버튼과 삭제버튼에 onclick 요소로 곧 만들 수정, 삭제 함수들을 넣고, 누르면 수정과 삭제가 가능하도록 한다.

 

 

 

게시물에 해당하는 댓글 전체를 가져오는 함수. 카테고리 방법으로 해당 게시물의 모든 댓글 객체를 받아와야 한다. 받아온 JSON 객체를 JS객체로 변환하여, 받아온 모든 댓글 LIST를 위의 댓글 객체들을 화면에 보여주게 하는 함수에 파라미터로 넣는다.

 

 

컨트롤러로 간다. @RestController 어노테이션을 이용하여, 주소가 아닌 값을 불러오게끔 한다. 댓글 작성 POST를 만드는데, 이미 만든 Mapper의 댓글 작성 메소드를 불러온다. @RequestBody는 자바스크립트에서 요청한 요청 값들을 불러오게 하는 용도이다. 그 값들을 불러와서 댓글 작성 메소드의 파라미터안에 넣으면, 댓글 작성 완료된다.

 

댓글 조회는 GET으로 하는데, 카테고리 방식으로 @PathVariable을 이용하여, 해당 게시물의 boardNo를 불러와서, 헤당 게시물 안에 있는 모든 댓글 목록들을 조회하게끔 한다.

 

 

 

다시 자바스크립트로 돌아와서 댓글 수정과, 댓글 삭제하는 기능을 만든다. 위에서 create_comments_view 함수 부분을 보면, 댓글 수정, 삭제 버튼의 onclick 요소 안에 함수들과 똑같은 이름을 만든다. 그리고 수정 함수 안에 this가 있는데, 이건 이 수정 버튼의 부모 태그의 바로 밑 태그를 불러오게 하기 위함이다. parentElement.nextElementSibling.value로 유저가 수정한 textarea의 내용을 가져온다. 

 

내가 누른 댓를 no를 가져오고, 컨트롤러에서 @PutMapping으로 수정할 계획이으로 메서드는 "put" 그리고 JSON 객체로 변환한다. 요청이 성공하면 당연히 새롭게 댓글이 수정 됐음을 의미하니까, 모든 댓글을 재로딩되어 보여지게 한다.

 

삭제는 더 간단하다. 그냥 똑같이 내가 누른 버튼의 no를 가져오고, 해당 댓글 no 삭제를 요청하면 그만이다. 역시 요청이 성공하면 모든 댓글을 재로딩

 

 

 

마지막으로 페이지 접속하면 댓글 전부 보여지게끔 get_comments(); 함수를 맨 시작점에 적는다.

그리고 작성 버튼 눌렀을 시 작성기능이 동작하도록 한다.

 

 

 

수정, 삭제 둘다 카테고리 방식으로 해당 댓글의 no를 가져온다. 수정은 @RequestBody로 자바스크립트에서 불러온 JSON 객체를 불러오게 하고, 댓글 수정 메소드를 작성하여 최종적으로 댓글이 수정되도록 한다. 댓글 삭제는 카테고리 방식으로 불러온 no를 댓글 삭제 메소드의 파라미터로 넣어, 해당 no를 가진 댓글이 삭제되도록 한다.