280일차(모험 189일차) - 댓글 수정(PUT)

Dto에 @NoArgsConstructor, @AllArgsConstructor 추가

@NoArgsConstructor : 파라미터가 없는 기본 생성자를 생성

@AllArgsConstructor : 모든 필드 값을 파라미터로 받는 생성자를 만듦

@RequiredArgsConstructor : final이나 @NonNull인 필드 값만 파라미터로 받는 생성자 만듦

출처 : [LOMBOK] @NOARGSCONSTRUCTOR , @ALLARGSCONSTRUCTOR , @REQUIREDARGSCONSTRUCTOR

 

 

 

수정 버튼

*수정 버튼을 누르면 수정 버튼은 사라지고 수정 전 글이 input 칸에 들어간다.

id값을 고정된 값으로 정하지 않고 해당 고유 commentId 값을 div 태그 id값에 넣었다.

수정 버튼을 누르면 수정버튼은 숨겨지고

input 창, 저장 버튼이 보여지고 수정 전 값이 input 창에 띄워준다.

 

 

수정 후 저장 버튼

*저장 버튼을 누르면 수정 전 값이 원래 값 대신 들어가야 한다.

 

<a id="${commentId}-comment">${comment}</a>

댓글이 작성되는 코드를 보면 ID 값이 고정되어 있지 않다.

 

 

let num = commentId+"-comment" // id 값을 가져옴
document.getElementById(num).append(comment)

그렇다보니 위 코드처럼 작성을 해야했는데 document.getElementById를 활용해서 초기화 방법을 어떻게 구현할지 몰랐다. 그래서 아래와 같이 작성했다.

 

 

기존 값을 초기화 하기 위해서 고정된 값 + 변동된 값을 하나의 문장으로 완성해서 jquery를 사용했다.

let queryNum = "#"+commentId+"-comment"
$(queryNum).text("") // 기존 값 초기화

 

 

PUT 방식으로 ajax 통신을 하는데 데이터는 보내지는데 통신을 하지 않아서 

아래 링크에서 수정하는 코드를 참고하여 작성했더니 정상적으로 통신이 되었다.

출처 : [Spring Boot] 게시글 수정, 삭제

let RegistryComment = {
    nickname: nickname,
    comment: comment,
    registryId: registryId
}

$.ajax({
    type: "PUT",
    url: `/comment/${commentId}/registry/${registryId}`,
    dataType:'json',
    data: JSON.stringify(RegistryComment),
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        console.log("success")
    }
})

 

 

처음에 form data로 보낸 후 @ModelAttribute로 받으려고 했으나 잘 되지 않았고 이후에

@RequestBody로 작성했더니 정상적으로 실행되어 그 이유가 궁금해졌다.

 

@ModelAttribute는 파라미터 값으로 DTO객체에 바인딩을 하는 방식이기 때문에 바인딩하려는 DTO객체에 Setter메소드가 반드시 있어야 하고,

@RequestBody는 요청 본문의 body에 json이나 xml값으로 요청을 하여 HttpMessageConveter를 반드시 거쳐 DTO객체에 맞는 타입으로 바꿔서 바인딩을 시켜준다. 

출처 : @RequestBody와 @ModelAttribute 차이점

 

 

backend : [add] 댓글 수정하기(put) [#79] #80

front : [add] 댓글 수정하기(put) [#79] #81