[블로그 만들기] 댓글 쓰기 -3)

2021.09.08 - [Spring] - [블로그 만들기] 댓글 삭제 -2)

이제 댓글을 작성해서 등록 버튼을 누르면 출력되는 기능을 구현해봅니다.

 

클래스 자료형을 만들고 제네릭스를 사용해서 재활용이 가능하도록 합니다.

 

이제 저장할 때 쓰일 requestDto를 만들어줍니다.

저장할 때에는 해당 게시글의 아이디와 댓글의 내용을 저장해주도록 합니다.

이때 postId의 변수 명을 post_id로 하지 않은 이유는 jackson이 인식하지 못하기 때문이므로 유의합시다.

 

comment에 대한 DTO를 만든 이유는 모델로 받을 수 없기 때문입니다.

 

<button>태그는 버튼이 눌렸을 때 submit이 실행되므로 form 태그로 감싸 onsubmit 속성을 통해 함수를 실행시켜줍니다.

함수가 실행 될 때 댓글이 달릴 게시글의 아이디를 파라미터로 전달해줍니다.

 

<script>태그 안에 함수를 작성해줍니다. 

서버를 실행시켜서 확인해보면 댓글을 등록해도 화면 상에는 아무런 변화가 없을 것입니다.

하지만 개발자 창을 켜 console 창을 보면 작성한 데이터가 출력되는 것을 볼 수 있습니다.

 

script에서 댓글의 내용을 잘 가져오니 이걸 댓글 리스트에 뿌려주도록 합니다.

함수를 수정해줍니다. 

댓글 등록 버튼을 눌렀을 때 작성한 글이 잘 받아와지는 것을 확인 했으니 해당 데이터를 저장해주는 기능을 추가합니다.

fetch를 통해 "post" 방식의 매핑을 하며, mine type이 JSON인 데이터를 "/comment"로 보내줍니다.

@RequestBody 를 사용해서 JSON CommentSaveReqDto 형식의 데이터를 한번에 받아옵니다.

 

이대로 실행시키면 무한 조인때문에 오류가 날 것입니다.

Comment 모델로 가서 무한 조인 되는 것을 방지해줍니다.

 

이제 서버를 실행시켜서 확인해보면

console창에 잘 출력되는 것을 볼 수 있습니다.

 

이제 댓글 리스트에 입력한 댓글이 출력되도록 해봅니다.

 

현재 DB에서 확인해보면

방금 등록한 버튼이 DB에 저장되어 있는 것을 알 수 있습니다.

앞의 게시물에서 댓글을 출력하는 로직을 짜두었으니 페이지 새로고침 혹은 해당 부분 새로고침을 해주면 댓글 리스트가 보일 것입니다.

2021.08.03 - [웹앱개발/Spring] - [블로그 만들기] 댓글 출력하기 -1)

 

댓글의 양이 얼마 되지 않으므로 간편하게 댓글을 달아주었을 때 페이지가 새로고침 되도록 해줍니다.

 

댓글 쓰기/저장이 성공적으로 수행 되었다면 parseResponse.code가 1이 반환되므로 1이 반환되었을 때 새로고침 해주도록 합니다.

 

서버를 실행시켜 결과를 보면

 

등록 버튼을 누르면

바로 댓글 리스트에서 볼 수 있습니다.

 

DB에도 저장이 잘 되었는지 확인해 봅니다.

DB에도 저장이 잘 되었습니다.

 

그런데 이렇게만 코딩하면 로그인을 하지 않고 댓글을 작성해도 댓글이 작성되는 문제점이 있습니다.

DB에도 user_id가 null로 들어갑니다.

 

댓글 저장 할 때 로그인 여부를 체크하는 코드를 추가해줍니다.

parseResponse.code가 1이 아니면 댓글 쓰기에 실패한 것이므로 alert 창을 띄워 실패를 알려줍니다. 그리고 다시 해당 페이지를 reload() 해주어 새로고침 해줍니다.

이때 parseResponse.code가 1이라면 정상적으로 저장된 후 새로고침 되는 것이기 때문에 따로 if문을 만들어주지 않아도 잘 작동 됩니다.

 

실행 시켜보면

댓글 리스트에도, DB의 Comment 테이블에도 아무 변화가 없는 것을 볼 수 있습니다.

 

정상적으로 잘 작동 하는 것을 볼 수 있습니다.