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

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

 

목표

댓글 페이징 기능 구현

 

 '상품 상세 페이지에'  페이징 된 등록 댓글 리스트 구현을 목표로 합니다. 

 

 

순서

1. 개요

2. DTO

3. Mapper

4. Service

5. Controller

6. 정리

 

 

1. 개요

 "상품 상세 페이지"에 등록되어 잇는 댓글 리스트를 볼 수 있도록 구현할 것입니다. 그리고 10개 이상의 댓글이 존재하는 경우 페이징을 적용해서 댓글 페이지 버튼을 통해 10개 단위의 댓글들을 볼 수 있도록 구현할 것입니다.

 

 큰 흐름에서는 기존해 하던 페이징 구현과 동일합니다. 하지만 기존 구현과는 크게 다른 점이 있는데, 기존 구현의 경우 서버에서 페이징 된 뷰를 반환했는데, 댓글 페이징의 경우는 단순히 서버로부터 댓글과 페이징 정보를 전달받아서 뷰에서 동적으로 댓글 태그들을 만들어 내야 된다는 점입니다.

 

 이번 포스팅에서는 서버측 구현을 다음 포스팅에서는 뷰 측 구현을 하겠습니다.

 

2. DTO

 기존 페이징에서 사용했던 Criteria와 PageDTO 클래스를 그대로 사용할 것입니다. 단 critera 클래스에는 변수를 하나 추가해줄 것입니다.

 

Criteria

 

 페이징의 조건 데이터를 담을 DTO객체는 기존에 작성 해둔 Criterial 클래스를 그대로 사용할 것입니다. 단 댓글 페이징에서는 bookId 조건이 필요로 하기 때문에 기존 Criteria 클래스에 bookID변수를 추가해줍니다.

 

	/* 상품 번호(댓글 기능에서 사용) */
	private int bookId;

 

그림 2-1

 

 

 추가 해준 변수의 getter/setter 메서드를 추가해주고 toString 메서드를 새로 추가한 변수도 포함하도록 수정해주었습니다.

 

그림 2-2

 

 

 ReplyPageDTO

 

 서버에서는 두 개의 정보를 만들어서 뷰로 전달해주어야 합니다. 하나는 10개로 페이징 된 '댓글 정보 리스트'를 다른 하나는 회원이 보고자 하는 '페이지 정보'입니다. 원래라면 뷰에서는 두 개의 정보를 얻기 위해서 가각 두 번의 ajax 요청을 해야겠지만 우리는 한 번의 ajax 요청으로 두 개의 정보를 뷰로 반환할 수 있도록, 두 개의 정보를 담는 그릇이 될 새로운 타입이 될 DTO클래스를 생성해주고자 합니다.(Controller 부분에서 한번 더 설명은 할 것이지만 서버에서 뷰로 전송이 될 때 이 객체는 JSON으로 변환되어서 뷰로 전달됩니다.)

 

 com.vam.model 패키지에 ReplyPageDTO 클래스를 생성합니다.

 

그림 2-3

 

 

 생성한 클래스에  페이징 된 댓글 리스트 정보와 페이지 정보를 저장할 변수를 선언합니다. 

 

	List<ReplyDTO> list;
	
	PageDTO pageInfo;

 

그림 2-4

 

 

 추가 한 두 변수의 getter/setter 메서드와 toString 메서드를 추가합니다.

 

그림 2-5

 

 

3. Mapper

ReplyMapper 인터페이스

 

 com.vam.mapper 패키지의 ReplyMapper 클래스에 '페이징 댓글 정보'와 '댓글 총 개수(페이지 버튼 정보 생성에 필요)'를 만들어내는 2개의 Mapper 메서드 선언부를 작성합니다.

 

	/* 댓글 페이징 */
	public List<ReplyDTO> getReplyList(Criteria cri);
	
	/* 댓글 총 갯수(페이징) */
	public int getReplyTotal(int bookId);

 

그림 3-1

 

 

ReplyMapper.xml

 

 인터페이스에서 선언한 메서드가 실행할 쿼리를 작성합니다.

 

Oracle

  	<!-- 댓글 페이징 -->
  	<select id="getReplyList" resultType="com.vam.model.ReplyDTO">
  	
  		<![CDATA[
		select * from(  		
			select rownum as rn, replyId, bookId, memberId, content, rating, regDate
			from vam_reply
			where rownum <= #{pageNum} * #{amount}  and bookId = #{bookId}	
			order by regDate desc  	
  			)
  		where rn > (#{pageNum} -1) * #{amount}
  		]]>	
  		
  	</select>
  	
  	<select id="getReplyTotal" resultType="int">
  	
  		select count(*)
  		from vam_reply
  		where bookId = #{bookId}
  	
  	</select>

 

MysQL

 

  	<!-- 댓글 페이징 -->
  	<select id="getReplyList" resultType="com.vam.model.ReplyDTO">
		  		
		select replyId, bookId, memberId, content, rating, regDate
		from vam_reply
		where bookId = #{bookId}
		order by regDate desc  		
  		limit #{skip}, #{amount}
  		
  	</select>
  	
  	<select id="getReplyTotal" resultType="int">
  	
  		select count(*)
  		from vam_reply
  		where bookId = #{bookId}
  	
  	</select>

 

 

그림 3-2

 

 

4. Service

 페이징 정보를 만들어내는 Service 메서드는 앞서 만들어준 2개의 메서드를 호출하여 ReplyPageDTO 객체에 담아 준 후, 그 객체를 반환해주는 로직을 가질 것입니다.

 

 ReplyService 인터페이스

 

 com.vam.service 패키지의 ReplyService 인터페이스에 댓글 페이징 정보(페이지 정보 포함)를 만들어 내는 메서드 선언 부를 작성합니다.

 

	/* 댓글 페이징 */
	public ReplyPageDTO replyList(Criteria cri);

 

그림 4-1

 

 

ReplyServiceImpl

 

 com.vam.service 패키지의 ReplyServiceImpl 클래스에 인터페이스에서 선언한 메서드를 오버라이딩 합니다. 구현부에는 '페이징 댓글 정보', '페이지 총 개수'를 반환해주는 Mapper 메서드를 호출하여 반환 받은 값을 ReplyPageDTO 객체에 담은 후, 객체를 반환 해주는 코드를 작성합니다.

 

 - '페이징 댓글 정보'는 ReplyPgaeDTO 변수에 바로 대입

 - '페이지 총 개수'의 경우 PageDTO객체를 생성되는 데 사용된 후, PageDTO객체가 ReplyPageDTO의 변수에 대입

 

	@Override
	public ReplyPageDTO replyList(Criteria cri) {
		ReplyPageDTO dto = new ReplyPageDTO();
		
		dto.setList(replyMapper.getReplyList(cri));
		dto.setPageInfo(new PageDTO(cri, replyMapper.getReplyTotal(cri.getBookId())));
		
		return dto;
	}

 

그림 4-2

 

 

5. Controller

 com.vam.controller 패키지의 ReplyController에 댓글 페이징 정보(페이지 정보 포함)를 요청을 처리하는 URL 매핑 메서드를 작성합니다.

 

 - 반환 타입으로 지정한 ReplyPageDTO가 JSON으로 변환되어 뷰에 전송되도록 @GetMapper 어노테이션의 produces 속성 값으로 JSON 지정 코드를 작성해주었습니다. (이전에 추가 해준 JACKSON 라이브러리가 객체를 JSON으로 변환시켜 줍니다.)

 

	/* 댓글 페이징 */
	@GetMapping(value="/list", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
	public ReplyPageDTO replyListPOST(Criteria cri) {
		return replyService.replyList(cri);
	}

 

그림 4-3

 

 

6. 정리

 구현한 코드가 동작시 큰 흐름은 다음과 같습니다.

 

 - 뷰에서 댓글 페이지 정보를 요청한다. bookId와 페이징 정보(요청 페이지(pageNum), 표시 량(amount))를 서버로 전송한다.

 - "reply/list" URL 매핑 메서드가 동작한다. 

 - 댓글 페이징 정보를 만들어내는 Service 메서드를 호출한다.

 - Service 메서드는 '댓글 페이징 정보'와 '댓글 총 개수'를 반환 해주는 Mapper 메서드 2 개를 호출 한다. '댓글 총 갯수'

값은 '페이지 정보'인 담기는 PageDTO 객체를 만드는 데 사용이 된다. 

 - Service 메서드에서 ReplyPageDTO 객체 생성하여 '댓글 페이징 정보'와 '페이지 정보'를 담은 후 해당 객체를 반환한다. 

 - Controller은 반환받은 ReplyPageDTO 뷰로 전송한다.

 - ReplyPageDTO는 JSON 데이터로 변환되어 뷰로 전송한다.

 

 

 

REFERENCE

•  

 

 

DATE

• 2020.01.11