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

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

 

목표

댓글 페이징 기능 구현

 

이전 포스팅에서 작성했던 댓글 리스트 출력 Javscript 코드를 리팩터링(메서드 추출)합니다. 그리고 댓글 등록, 수정, 삭제, 페이지 이동 시 댓글 리스트를 초기화해주는 메서드를 만드는 것이 목표입니다.

을 해보겠습니다. 

 

 

순서

1. 메서드 추출

2. 댓글 초기화 메서드(등록, 수정, 삭제, 페이지 이동)

3. 댓글 초기화 메서드 적용(댓글 등록)

 

1. 메서드 추출

 앞선 포스팅에서 작성한 댓글을 동적으로 만들어 내는 코드는 페이지가 처음 열릴때 동작하는 코드입니다. 그런데 댓글을 동적으로 만들어 내는 작업은 화면이 렌더링 될 때뿐만 아니라 회원이 댓글을 등록, 수정, 삭제, 페이지 이동의 경우에도 똑같은 작업이 필요로 합니다. 따라서 중복하여 코드를 작성하지 않도록 댓글을 동적으로 만들어 내는 코드를 메서드로 추출하겠습니다. 

 

 <script> 태그에 makeReplyContent라는 이름으로 메서드를 선언 하였습니다. 파라미터로 obj로 작성하였는데 인자는 서버로부터 전달받은 댓글 데이터 정보가 되어야 합니다.

 

	/* 댓글(리뷰) 동적 생성 메서드 */
	function makeReplyContent(obj){
		
	}

 

그림 1-1

 

 

 태그를 만들어 내는 if문 전체를 잘라내서 선언한 함수에 붙여 줍니다. 

 

		if(obj.list.length === 0){
			$(".reply_not_div").html('<span>리뷰가 없습니다.</span>');
			$(".reply_content_ul").html('');
			$(".pageMaker").html('');
		} else{
			
			$(".reply_not_div").html('');
			
			const list = obj.list;
			const pf = obj.pageInfo;
			const userId = '${member.memberId}';		
			
			/* list */
			
			let reply_list = '';			
			
			$(list).each(function(i,obj){
				reply_list += '<li>';
				reply_list += '<div class="comment_wrap">';
				reply_list += '<div class="reply_top">';
				/* 아이디 */
				reply_list += '<span class="id_span">'+ obj.memberId+'</span>';
				/* 날짜 */
				reply_list += '<span class="date_span">'+ obj.regDate +'</span>';
				/* 평점 */
				reply_list += '<span class="rating_span">평점 : <span class="rating_value_span">'+ obj.rating +'</span>점</span>';
				if(obj.memberId === userId){
					reply_list += '<a class="update_reply_btn" href="'+ obj.replyId +'">수정</a><a class="delete_reply_btn" href="'+ obj.replyId +'">삭제</a>';
				}
				reply_list += '</div>'; //<div class="reply_top">
				reply_list += '<div class="reply_bottom">';
				reply_list += '<div class="reply_bottom_txt">'+ obj.content +'</div>';
				reply_list += '</div>';//<div class="reply_bottom">
				reply_list += '</div>';//<div class="comment_wrap">
				reply_list += '</li>';
			});		
			
			$(".reply_content_ul").html(reply_list);			
			
			/* 페이지 버튼 */
			
			let reply_pageMaker = '';	
			
				/* prev */
				if(pf.prev){
					let prev_num = pf.pageStart -1;
					reply_pageMaker += '<li class="pageMaker_btn prev">';
					reply_pageMaker += '<a href="'+ prev_num +'">이전</a>';
					reply_pageMaker += '</li>';	
				}
				/* numbre btn */
				for(let i = pf.pageStart; i < pf.pageEnd+1; i++){
					reply_pageMaker += '<li class="pageMaker_btn ';
					if(pf.cri.pageNum === i){
						reply_pageMaker += 'active';
					}
					reply_pageMaker += '">';
					reply_pageMaker += '<a href="'+i+'">'+i+'</a>';
					reply_pageMaker += '</li>';
				}
				/* next */
				if(pf.next){
					let next_num = pf.pageEnd +1;
					reply_pageMaker += '<li class="pageMaker_btn next">';
					reply_pageMaker += '<a href="'+ next_num +'">다음</a>';
					reply_pageMaker += '</li>';	
				}	
				
			$(".pageMaker").html(reply_pageMaker);				
			
		}

 

그림 1-2

 

 

 getJSON 메서드 구현부의 잘라 낸 부분에는 선언한 함수를 호출 해줍니다.

 

그림 1-3

 

 

2. 댓글 초기화 메서드(등록, 수정, 삭제, 페이지 이동)

 댓글을 등록, 수정, 삭제 혹은 페이지 이동시 해당 댓글 정보로 데이터가 초기화되어야 합니다. 4가지 상황에서 호출할 수 있는 메서드를 만들어 보겠습니다.

 

cri

 

 먼저 현재의 댓글 페이지 정보를 가지는 객체를 만들어 주겠습니다. <script> 태그 내부에 아래의 코드를 추가해줍니다.

 

 - 페이지 이동의 경우엔 이 객체의 pageNum값 클릭한 페이지 번호 값으로 변경해준 후 이 객체를 서버로 전송하도록 해 줄 것입니다.

 

	/* 댓글 페이지 정보 */
	 const cri = {
		bookId : '${goodsInfo.bookId}',
		pageNum : 1,
		amount : 10
	}

 

그림 2-1

 

 

댓글 초기화 메서드

 

 <script> 태그 내부에 기존 함수 선언 방식과 다르게 익명 함수를 선언하고, 이 익명함수를 새로 선언한 변수에 할당하는 방식으로 함수를 추가해주었습니다. 기존 방식을 사용해도 상관없습니다. 

 

	/* 댓글 데이터 서버 요청 및 댓글 동적 생성 메서드 */
	let replyListInit = function(){
		
	}

 

그림 2-1

 

 

 서버에 댓글 리스트 정보를 요청하는 getJSON 메서드를 호출합니다. 

 

 - 현재 댓글 페이지 정보를 저장하고 있는 cri 객체를 인자로 작성했습니다.

 -  구현부에는 댓글 태그를 동적으로 생성하는 makeReplyContent() 함수를 호출했습니다.

 

	/* 댓글 데이터 서버 요청 및 댓글 동적 생성 메서드 */
	let replyListInit = function(){
		$.getJSON("/reply/list", cri , function(obj){
			
			makeReplyContent(obj);
			
		});		
	}

 

그림 2-2

 

 

3. 댓글 초기화 메서드 적용(댓글 등록)

 

 댓글 팝업창(replyEnroll.jsp)에서 서버에게 댓글 등록 요청이 성공했을 때 window.close() 함수를 호출하여 팝업창이 닫히도록 작성했었습니다.(ajax의 success 속성 부분)

 

그림 3-1 (replyEnroll.jsp)

 

 

 window.close() 코드가 실행되기 전에 부모 창(goodsDetail.jsp)의 댓글을 최신화되도록 만들 것입니다. window.close() 메서드 윗 공간에 부모 창의 replyListInit() 함수를 호출해주는 코드를 작성했습니다. 

 

 - 작성한 방식은 JQUERY 방식입니다.

 - '부모 창 함수 접근'과 같은 키워드로 구글링 하시면 다양한 방법을 찾아볼 수 있습니다.

 

				/* 댓글 초기화 */
				$(opener.location).attr("href", "javascript:replyListInit();");

 

 

 

6. 테스트

 저는 테스트를 위해서 댓글 테이블에 하나의 상품의 관한 댓글 정보를 10개 이상 추가해주었습니다. (이를 위해서 테이블의 제약 조건을 추가 하지 댓글 테이블 생성 코드를 사용했었습니다.)

 

그림 4-1

 

 

 상품 상세 페이지로 이동했을 때 잘 동작하는지 확인합니다.

 

그림 4-2

 

 댓글을 등록한 후 댓글이 잘 출력되는지 확인합니다.

 

그림 4-3

 

그림 4-4

 

그림 4-5

 

 

 만들어준 메서드를 의도한 대로 동작을 하는 걸 확인했습니다. 그런데 댓글의 날짜 부분이 의도와 다른 숫자가 출력되어 있습니다. 이는 다음 포스팅에서 해결하겠습니다. 

 

REFERENCE

•  

 

 

DATE

• 2020.01.13