[Spring][쇼핑몰 프로젝트][47] 댓글 페이징 - 4

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

 

목표

댓글 페이징 기능 구현

 이전 포스팅에서 댓글의 날짜가 이상한 형식으로 출력되었는지 이를 해결하고자 합니다. 더불어 페이지 이동 버튼이 동작하도록 JS코드를 추가해줄 것입니다. 

 

 

순서

1. 날짜 변환 형식 지정

2. 댓글 페이지 이동 버튼

3. 테스트

 

 

1. 날짜 변환 형식 지정

 이전 포스팅에서 댓글 출력은 정상적으로 되었지만 날짜가 이상한 형식의 숫자가 출력되어져 있었습니다. 이를 제가 원하는 "yyyy-MM-dd"형식의 날짜로 출력되도록 만들 것입니다.

 

 'java date json' 키워드를 통해 구글링을 해본 결과 Gson, Jackson 라이브러리를 사용해서 Date, LocalDateTime 타입의 데이터를 json으로 변환할 경우 "yyyy-MM-dd" 형식 변환되지 않는다고 합니다. 따라서 json으로 변환 대상인 Date, LocalDateTime 타입의 데이터에 어떠한 형식(포맷)으로 변환할지를 지정 해주면 된다고 합니다. 

 

 ReplyDTO 클래스의 regDate 변수에 json으로 변환시 지정 형식으로 변하도록 설정해주는 어노테이션을 추가해줍니다.

 - patter속성 값에 원하는 포맷을 작성하면 됩니다. 저는 2021-05-21과 같은 형식을 원해서 yyyy-MM-dd를 작성했습니다.

 

	@JsonFormat(shape= JsonFormat.Shape.STRING, pattern="yyyy-MM-dd", timezone="Asia/Seoul")

 

그림 1-1

 

 

 

 

2. 댓글 페이지 이동 버튼

 '상품 상세 페이지(goodsDetail.jsp)'의  댓글 페이지 버튼을 클릭했을 때 해당 페이지의 댓글 리스트로 최신화되도록 구현하겠습니다. 댓글 페이지 버튼을 클릭했을 때 동작하는 Jquery 메서드를 작성해주어야 하는데 기존의 방식대로 작성하면 다음과 같습니다.

 

$(".pageMaker_btn a").on("click", function(){
		
})

 

 

 하지만 문제는 위의 메서드는 동작하지 않는다는 점입니다. 클릭 대상인 댓글 페이지 버튼 태그가 Javascript를 통해 동적으로 생성된 태그 이기 때문입니다. 따라서 동적으로 생성된 태그를 클릭했을 때도 동작하도록 아래와 같이 <script> 태그에 메서드를 추가합니다.

 

 - 'Jquery 동적 태그 접근' 키워드로 구글링 했습니다.

 - 코들 해석하면 document 객체에 접근해서 on 메서드를 호출했습니다. on의 첫 번째 인자는 '클릭 이벤트'를, 두 번째 인자는 이벤트 대상인 선택자(댓글 페이지 버튼 태그)를, 세 번째는 대상 성택자에 이벤트가 발생했을 때 동작하는 함수를 작성했습니다.

※ Jquery on()

 

	/* 댓글 페이지 이동 버튼 동작 */
	$(document).on('click', '.pageMaker_btn a', function(e){
			
			
	 });

 

그림 2-1

 

 

 구현부에는 먼저 클릭 한 태그의 기본적인 기능이 동작하지 않도록 preventDefault() 메서드를 호출했습니다.

 

		e.preventDefault();

 

 

 변수를 선언하고 회원이 클릭한 페이지 번호를 대입해줍니다.

 

		e.preventDefault();
		
		let page = $(this).attr("href");

 

 

 현재 페이지 정보를 저장하고 있는 cri 객체(이전 포스팅에 작성)의 pageNum 프로퍼티 값을 사용자가 클릭한 번호 값으로 변경 해준 코드를 작성합니다.

 

		e.preventDefault();
		
		let page = $(this).attr("href");	
		cri.pageNum = page;

 

 

 댓글 리스트를 서버에 요청하고 댓글 태그를 최신화하는 replyListInit() 함수를 호출해줍니다.

 

		e.preventDefault();
		
		let page = $(this).attr("href");	
		cri.pageNum = page;		
		
		replyListInit();

 

그림 2-2

 

 

3. 테스트 

 먼저 댓글의 날짜가 의도대로 출력되었는지 확인합니다.

 

그림 3-1

 

 

 

 댓글 이동 버튼이 잘 동작하는지 확인합니다.

 

그림 3-2

 

그림 3-3

 

REFERENCE

•  

 

 

DATE

• 2020.01.14