[Spring] 댓글 목록 HTML 처리

[Spring] 댓글 목록 HTML 처리

 

이전 글

2021.08.11 - [Spring] - [Spring] 댓글 삭제, 수정, 조회

2021.08.11 - [Spring] - [Spring] 댓글의 목록 처리 (javascript)

2021.08.10 - [Spring] - [Spring] 댓글 처리 Front-End - 등록 처리 -

2021.08.09 - [Spring] - [Spring] 댓글 처리 Front-End - 세팅편 -

2021.08.03 - [Spring] - [Spring] 댓글 처리, 서비스 영역과 Controller 처리 (feat. @RestController)

 

앞의 과정을 그대로 진행했다면 이미 Ajax의 처리까지는 완료된 것을 확인했다는 의미입니다. 이제 화면에서 버튼 등에서 발생하는 이벤트 처리와 Ajax 호출 결과를 화면에 반영하는 것입니다.

 

댓글 목록 처리

댓글의 목록을 위해서는 별도의 <div>를 생성해서 처리해야 합니다. 게시글과 관련된 화면 아래쪽에 코드를 추가합니다.

댓글 목록은 <ul> 태그 내에 <li> 태그를 이용해 처리합니다. 각 <li> 태그는 하나의 댓글을 의미하므로 수정이나 삭제 시 이를 클릭하게 됩니다. 수정이나 삭제 시에는 반드시 댓글 번호(seq_rno)가 필요하므로 'data-seq_rno' 속성을 이용해서 이를 처리합니다.

 

화면 결과

 

이벤트 처리

게시글의 조회 페이지가 열리면 자동으로 댓글 목록을 가져와서 <li> 태그를 구성해야 합니다. 이에 대한 처리는 $(document).ready( ) 내에서 이루어 지도록 합니다.

 

get.jsp

 

실행 결과

 

showList( )는 페이지 번호를 파라미터로 받도록 설계하고, 만일 파라미터가 없는 경우 자동으로 1페이지가 되도록 설정합니다. 브라우저에서 DOM 처리가 끝나면 자동으로 showList( )가 호출되며 <ul> 태그 내에 내용으로 처리됩니다.

 

화면 결과를 보면 아직 날짜 처리가 제대로 되어 있지 않습니다.

 

 

날짜/시간에 대한 처리

XML, JSON 형태로 날짜/시간 데이터를 받을 땐 숫자로 표현되는 값이 나옵니다.

화면에선 이를 변환해서 사용하는 것이 좋습니다. 날짜 포맷의 경우 문화권마다 표기 순서가 다르기에 화면에서 처리하는 방식을 권장합니다.

 

해당일에 해당하는 데이터는 '시/분/초'를 보이고, 전날이면 '년/월/일' 을 보여주는 방식으로 함수를 작성합니다.

 

reply.js 기능 함수로 추가

displyTime( )은 Ajax에서 데이터를 가져와서 HTML을 만들어 주는 부분에 'replyService.displayTime(list[i].replyDate)'의 형태로 적용하도록 합니다.

 

※제 테이블과 VO를 확인해보니 필드, 변수명이 updateDate 로 되어 있어서 수정하였습니다. replyDate -> updateDate

 

get.jsp

 

실행 결과

---

오늘은 댓글 목록 HTML 처리를 통해 화면에 나타내는 과정을 담았습니다.