Puru Board: 2.5차 배포 - 댓글 수정 시 버그 해결(기능 개선)

해결 과정을 시간 순서대로 따라가보자.

 

1. 댓글 수정 기능을 개발했으나, thymeleaf를 이용해서 댓글 수정 textarea에 댓글을 출력하고, 그 댓글을 바로 수정할 수 있는 방법을 못 찾았다. 내가 실현 가능한 방법은 아래의 2가지였다.

• th:text를 이용해서 댓글을 불러온 뒤 댓글을 수정해서 댓글의 content를 Post Mapping을 하는 updateReply Controller에 보내면 content가 null이라고 뜬다. 즉, 댓글 수정 화면은 보이지만 실제로는 수정한 댓글이 반영되지 않는다.
• th:field를 이용하면 댓글 수정 textarea에 댓글이 불러와지지 않았다. 이건 내가 GetMapping Controller의 Model Attribute 값과 th:each문의 변수 값을 reply로 동일하게 설정해서 일어난 문제인 것으로 보인다. 이 경우에는 댓글이 불러와지지는 않았으나 수정한(사실 새로 작성한 수준의...) 댓글을 updateReply Controller에 보내면 댓글의 수정이 반영되었으므로 댓글 수정이 되지 않는 첫 번째 방식보다 나아 보였다.

 

더 나아 보였던 두 번째 방법에, placeholder로 기존 댓글을 보여주는 방법을 더해 일차적으로 구현했다. 구현한 내용은 다음과 같다.

 

placeholder를 통해 기존 댓글을 볼 수 있다.

 

그러나 공백 한 칸만 작성해도 사라진다... 실수로 수정 버튼이라도 눌렀다간 기존 댓글이 완전히 날아가버린다...

 

 

2. 2차 배포까지 마쳤으나 아무리 봐도 이전 결과물이 불만족스러웠다. 그래서 새벽에 자료를 열심히 찾아봤다. 그리고 우선적으로 reply라는 변수명을 같이 쓰지 않게 하기 위해 GetMapping Controller의 Model Attribute 변수명을 createReplyDto로 변경했다. 댓글 수정 시 기존 댓글이 보여지는 것은 당연히 구현되어야 한다고 생각하여 form의 object는 reply가 되도록 했고, th:text는 reply의 content를 나타내도록 했다. content 값으로 계속 null이 넘어갔던 것은 textarea의 name을 content로 지정해줌으로써 해결하였다. 해결한 코드는 다음과 같다. 전체 코드는 github에 있다.

 

<form th:action="@{/reply/__${post.id}__/__${reply.id}__/update}" th:object="${reply}"
      method="post">
  <div class="form-group">
                      <textarea th:type="text" class="form-control"
                                style="height: 10em;"
                                th:text="*{content}" name="content">내용</textarea>
  </div>
</form>

 

 

3. 결국 수정한 내용을 가지고 2.5차 배포를 했다. 3차라고 하기에는 너무 적은 수정이다. 아! textarea와 버튼 사이에 <br>도 하나 추가해서 디자인을 개선했다.

버그 해결에 성공해서 기분이 좋아요

 

 

 

무언가를 개발한다는 건 확실히 재밌는 거 같다. 날밤을 샐 정도로... 🌇