12 댓글 기능 구현(3) 출력, 삭제 버튼 만들기

댓글 기능 구현(3)

⑥ 뷰(UI) 작성 & 테스트

- 댓글 화면에 출력하기

test.jsp (출력 버튼 만들기)

>> json으로 전달하기 위해 주석처리하였다

 

 

SimpleRestController.java

 

CommentController.java

>> List 메서드를 사용해서 출력해볼 예정

 

 

결과 확인

>> Preview로 봤을 때 값이 들어온걸 확인할 수 있다

>> 문제는 http의 body에 출력되지 않는다

 

 

>> Sources에서 해당 $(“#commentList").html(result);에 중단점을 걸었다

 

>> Console에서 result의 값을 찍어보았다 정상적으로 값은 들어왔다

 

>> 버튼 동작과 임의 값 "asdf" 넣어봤다 이상없이 동작하고 "asdf“ 화면에 출력된다

>> 문자열이 아니기 때문에 값이 출력되지 않는다

 

 

toHTML 함수 (result값을 문자열로 변화해준다)

test.jsp(toHTML 생성)

>> <span> 태그로 commenter와 comment를 묶어준 이유는

수정과 따로 값을 잃어오기 쉽게하기 위해 <span> 태그로 묶어주었다

 

 

 

결과 확인

>> 검사 → Elements를 확인하면 HTML으로 값이 들어온걸 확인 할 수있다

>> up_date는 date class를 이용해서 변경해야한다

 

 

- 댓글 삭제 버튼 만들기

text.jsp(삭제 버튼 만들기)

 

>> 삭제 버튼의 응답을 확인 테스트

 

 

결과 확인

>> 삭제 버튼을 눌러도 alert("확인“)의 이벤트가 발생하지 않는다

「SEND버튼의 응답이 와야 delBtn이 만들어지는데 응답이 오기 전에 delBtn가 실행되면서 이벤트가 걸리지 않는다」

 

해결 방법

동적으로 생성된 요소에 이벤트를 거는 방법

test.jsp

>> commentList 안에 delBtn에 이벤트를 건다

 

 

결과 확인

>> 삭제 버튼을 눌렀을 때 이벤트가 발생하는걸 확인할 수 있다

 

 

text.jsp

 

>> 삭제후 나머지 댓글을 보여주기 위해 showList(bno)를 호출하였다

 

 

결과 확인

>> up_date=1690545514000이 삭제되었다

 

※ data-cno 와 data-pcno, data-bno는 사용자 정의 속성(attribute)