[Spring] 댓글의 추가와 삭제 및 수정

in Study on Spring, Web
[Spring] 댓글의 추가와 삭제 및 수정

댓글의 추가와 삭제 및 수정를 해봅시다.


Ajax를 통해 JSON으로 댓글을 조회하는 기능에 이어 댓글을 추가하는 기능과 삭제 및 수정 기능을 작성해봅시다.


1. read.html - 댓글 추가 모달 작성


1

댓글을 추가하는 작업은 댓글 추가 버튼을 만든 뒤 클릭하면 모달창을 통해 추가하도록 작성합니다.
모달창 내부에는 댓글의 본문, 댓글 작성자, 댓글의 번호를 의미하는 replyText, replyer, rno를 각각 <input> 태그를 가지도록 작성하고 수정 및 삭제 버튼을 추가합니다. 각 버튼은 class 속성을 추가해 구분합니다.

2. read.html - Add Reply 버튼 작성


2

댓글 추가 모달이 보여지도록 하는 Add Reply 버튼을 작성합니다.

3. read.html - Add Reply 버튼 클릭 이벤트 작성


3

Add Reply 버튼을 클릭할 경우 모달창을 보여주도록 스크립트를 작성합니다.
이때 hide()와 show() 기능을 사용해 추가를 위한 버튼인 save와 close만 보여지게 하고 수정과 삭제를 위한 버튼인 modify와 remove는 숨겨지도록 작성합니다.

4. read.html - 댓글 추가 모달 결과


4

브라우저에서 Add Reply 버튼을 누른 결과 정상적으로 댓글을 추가하는 모달창이 보여지는 것을 확인할 수 있습니다.

5. read.html - Save 버튼 클릭 이벤트 작성


5

댓글의 등록 작업은 Save 버튼을 클릭할 때 처리하도록 작성합니다.
새로운 댓글은 JSON 형태의 데이터를 처리할 것이므로, 우선은 자바스크립트의 객체를 생성한 후에 해당 객체를 JSON.stringify()를 이용해 JSON 문자열로 바꾸어 전송하도록 작성합니다.
댓글 추가가 성공할 경우 모달창을 닫은 뒤 해당 게시물의 댓글 정보를 다시 가져오도록 loadJSONData()를 호출합니다.

6. ReplyController - register() 작성


6

Ajax를 이용해 POST 방식으로 전달된 댓글을 컨트롤러에서 @PostMapping을 통해 처리하도록 작성합니다.
@RequestBody ReplyDTO를 통해 JSON으로 들어오는 데이터를 자동으로 ReplyDTO 타입의 객체로 매핑하도록 설정합니다.
그 후 ReplyDTO를 register()를 통해 저장하도록 합니다.

7. read.html - 댓글 추가 alert 결과


7

댓글 추가 모달에서 댓글을 작성한 뒤 Save 버튼을 누른 결과 정상적으로 alert이 나타나는 것을 확인할 수 있습니다.

8. read.html - 댓글 추가 결과


8

Save 버튼을 누른 뒤 정상적으로 댓글이 작성되는 것과 loadJSONData()을 통해 갱신된 댓글의 정보를 다시 가져오는 것 역시 확인할 수 있습니다.

9. read.html - 댓글 클릭 이벤트 및 Remove 버튼 클릭 이벤트 작성


9

이제 댓글의 수정과 삭제를 위해 댓글을 클릭할 경우 modify 버튼과 remove 버튼이 보이는 모달창이 나타나도록 댓글을 클릭했을 때 이벤트를 작성합니다.
loadJSONData()를 통해 댓글을 가져올 때 작성한 ‘data-rno’ 속성을 이용해 댓글의 번호를 저장하고, 제목과 내용은 CSS의 class를 이용해 처리할 수 있습니다. 이를 활용해 댓글을 클릭할 때 해당 댓글의 val을 가져와 모달창에 출력하도록 작성합니다.
모달창의 Remove 버튼을 누를 때 DELETE 방식으로 Ajax를 이용해 서버를 호출하도록 이벤트를 작성합니다.

10. ReplyController - remove() 작성


10

DELETE 방식으로 전달된 댓글의 번호를 ReplyController에서 @DeleteMapping으로 처리합니다.
댓글의 번호 전달받은 뒤 remove()를 통해 삭제한 후 success 문자열을 결과로 전송하도록 작성합니다.

11. read.html - 댓글 삭제 alert 결과


12

댓글 클릭 모달에서 Remove 버튼을 누른 결과 정상적으로 alert이 나타나는 것을 확인할 수 있습니다.

12. read.html - 댓글 삭제 결과


13

Remove 버튼을 누른 뒤 정상적으로 댓글이 삭제되는 것과 loadJSONData()을 통해 갱신된 댓글의 정보를 다시 가져오는 것 역시 확인할 수 있습니다.

13. read.html - Modify 버튼 클릭이벤트 작성


14

댓글의 수정은 PUT 방식으로 처리하고 댓글의 번호와 게시물의 번호, 내용, 작성자를 같이 전달해야 합니다.
수정 작업은 등록과 유사하게 댓글의 내용을 하나의 객체로 구성해 JSON 타입으로 전달하고 서버에서 이를 ReplyDTO로 변환해 처리하도록 합니다.

14. ReplyController - modify() 작성


15

Ajax를 이용해 PUT 방식으로 전달된 댓글을 컨트롤러에서 @PutMapping을 통해 처리하도록 작성합니다.
전달받은 댓글을 modify()를 통해 수정합니다.

15. read.html - 댓글 수정 alert 결과


16

댓글 클릭 모달에서 Modify 버튼을 누른 결과 정상적으로 alert이 나타나는 것을 확인할 수 있습니다.

16. read.html - 댓글 수정 결과


17

Modify 버튼을 누른 뒤 정상적으로 댓글이 수정되는 것과 loadJSONData()을 통해 갱신된 댓글의 정보를 다시 가져오는 것 역시 확인할 수 있습니다.

© 2022. All rights reserved.