[26] REST 방식과 Ajax를 이용하는 댓글처리 - 이벤트 처리와 HTML 처리

 

5. 이벤트 처리와 HTML 처리

 

앞에 과정 까지는 Ajax 처리까지는 완료했다. 남은 작업은 화면에서 버튼 등에서 발생하는 이벤트를 감지하고, Ajax 호출의 결과를 화면에 반영하는 것이다. 

 

5-1. 댓글 목록 처리

 

댓글의 목록을 위해서는 별도의 <div>를 생성해서 처리해야 한다. 게시글과 관련된 화면 아래쪽에 <div>를 추가한다. 추가하는 <div>에는 나중에 화면의 모습을 파악할 수 있도록 간단한 텍스트 등을 구성해 둔다.

 

1) board/get.jsp 의 일부

<div class = 'row'>
	<div class = "col-lg-12">
		
		<!-- /.panel -->
		<div class = "panel panel-default">
			<div class= "panel-heading">
				<i class = "fa fa-comments fa-fw"></i> Reply
			</div>
			
			<!-- /.panel-heading -->
			<div class = "panel-body">
				<ul class = "chat">
				
					<!-- start reply -->
					<li class = "left clearfix" data-rno = '12'>
						<div>
							<div class = "header">
								<strong class = "primary-font">user00</strong>
								<small class = "pull-right text-muted">2018-01-01 13:13</small>								
							</div>
							<p>Good job!</p>
						</div>
					</li>
					<!-- end reply -->
				</ul>
				<!-- ./ end ul -->
			</div>
			<!-- /.panel .chat-panel -->
		</div>
	</div>
	<!-- ./end row -->
</div>

 

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

 

위의 코드를 추가한 후 브라우저에는 아래쪽과 같이 변화된 모습이 보이게 된다!

 

[ 이벤트 처리 ]

 

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

 

1) get.jsp 의 일부

$(document).ready(function(){
	var bnoValue = '<c:out value = "${board.bno}"/>';
	var replyUL = $(".chat");
	
	showList(1);
	function showList(page){
		replyService.getList({bno:bnoValue,page : page || 1}, function(list){
			var str = "";
			if(list == null || list.length == 0){
				replyUL.html("");
				
				return;
			}
			for(var i =0, len = list.length || 0; i<len; i++){
				str += "<li class  = 'left clearfix' data-rno = '"+list[i].rno+"'>";
				str += "	<div><div class = 'header'><strong class = 'primary-font'>"+list[i].replyer+"</strong>";
				str += "		<small class = 'pull-right text-muted'>"+list[i].replyDate+"</small></div>";
				str += "			<p>"+list[i].reply+"</p></div></li>";
			}
			replyUL.html(str);
		}); // end function
	} // end showList
});

 

showList()는 페이지 번호를 파라미터로 받도록 설계하고, 만일 파라미터가 없는 경우에는 자동으로 1페이지가 되도록 설정한다. 브라우저에서 DOM 처리가 끝나면 자동으로 showList()가 호출되면서 <ul> 태그 내에 내용으로 처리된다. 만일 1페이지가 아닌 경우라면 기존 <ul>에 <li>들이 추가되는 형태이다. 

 

[ 시간의 대한 처리 ] 

 

XML 이나 JSON 형태로 데이터를 받을 때는 순수하게 숫자로 표현되는 시간 값이 나오게 되어 있으므로, 화면에서는 이를 변환해서 사용하는 것이 좋다. 날짜 포맷의 경우 문화권마다 표기 순서 등이 다르기 때문에 화면에서 포맷을 처리하는 방식을 권장한다.

 

최근의 웹페이지들을 보면 해당일에 해당하는 데이터는 '시/분/초'를 보여주고, 전날에 등록된 데이터들은 '년/월/일'등을 보여주는 경우가 많다. 현재 시간을 기준으로 해서 화면에 내용이 달라지도록 하는 부분은 아래와 같은 함수를 작성해서 사용할 수 있다. 

 

1) reply.js. 일부

	function displayTime(timeValue){
		var today = new Date();
		
		var gap = today.getTime() - timeValue;
		
		var dateObj = new Date(timeValue);
		var str = "";
		
		if(gap < (1000 * 60 * 60 * 24)){
			var hh = dateObj.getHours();
			var mi = dateObj.getMinutes();
			var ss = dateObj.getSeconds();
			
			return [(hh>9 ? '' : '0') + hh, ':', (mi > 9 ? '' : '0') + mi, ':', (ss > 9 ? '' : '0') + ss].join('');
		}else{
			var yy = dateObj.getFullYear();
			var mm = dateObj.getMonth() + 1; // getMonth() is zero-based
			var dd = dateObj.getDate();
			
			return [yy, '/', (mm > 9 ? '' : '0')+mm, '/', (dd > 9 ? '' : '0') + dd].join('');
		}
	}
	;

 

리턴값에도 다음 함수를 추가한다. 

		displayTime : displayTime

 

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

 

2) board/get.jsp 의 일부

작성된 displayTime()을 적용하면 24시간이 지난 댓글은 날짜만 표시되고, 24시간 이내의 글은 시간으로 표시된다. 

 

 

5-2. 새로운 댓글 처리

 

댓글 목록 상단에는 버튼을 하나 추가해서 사용자들이 새로운 댓글을 추가할 수 있도록 준비한다.

 

1) board/get.jsp

 

 

 

댓글의 추가는 모달창을 이용해서 진행한다. 모달창은 별도로 화면 중앙에 위치하기 때문에 태그를 추가하는 위치는 그다지 신경 쓰지 않아도 된다. <script> 태그의 시작 전에 아래 코드를 추가한다 (모달창의 코드는 SBAdmin2의 pages 폴더 내 notifications.html 안에 포함되어 있다.)

 

2) get.jsp 내의 모달창 코드

<!-- Modal -->
	<div class = "modal fade" id = "MyModal" tabindex = "-1" role = "dialog"
		aria-labelledby = "myModalLabel" aria-hidden = "true">
		<div class = "modal-dialog">
			<div class = "modal-content">
				<div class = "modal-header">
					<button type = "button" class = "close" data-dismiss = "modal"
						ari-hidden = "true">&times;</button>
					<h4 class = "modal-title" id = "myModalLabel">REPLY MODAL</h4>
				</div>
				<div class = "modal-body">
					<div class = "form-group">
						<label>Reply</label>
						<input class = "form-control" name = 'reply' value = 'New Reply!!!!'>
					</div>
					<div class = "form-group">
						<label>Replyer</label>
						<input class = "form-control" name = 'replyer' value = 'replyer'>
					</div>
					<div class = "form-group">
						<label>Reply Date</label>
						<input class = "form-control" name = 'replyDate' value = ''>
					</div>
				</div>
<div class = "modal-footer">
	<button id = 'modalModBtn' type = "button" class = "btn btn-warning">Modify</button>
	<button id = 'modalRemoveBtn' type = "button" class = "btn btn-danger">Remove</button>
	<button id = 'modalRegisterBtn' type = "button" class = "btn btn-primary">Register</button>
	<button id = 'modalCloseBtn' type = "button" class = "btn btn-default">Close</button>
</div>
			</div>
		</div>
		</div>

 

모달창은 브라우저에서 댓글에 대한 여러 작업 (CRUD)에서 활용할 것이므로 필요한 모든 내용을 담도록 하고 각 작업에 맞게 버튼이나 입력창이 보이거나 감춰지도록 한다. 

 

[ 새로운 댓글의 추가 버튼 이벤트 처리 ]

 

댓글 목록 상단의 'New Reply'를 클릭하면 화면에서는 모달창을 아래와 같이 보이게 처리한다. 모달과 관련된 객체들은 여러 함수에서 사용할 것이므로 바깥쪽으로 빼두어 매번 jQeury를 호출하지 않도록 한다. 

 

1) get.jsp 소스코드 (기존의 function 안에 end showList 부터 시작한다)

var modal = $(".modal");
	var modalInputReply = modal.find("input[name='reply']");
	var modalInputReplyer = modal.find("input[name='replyer']");
	var modalInputReplyDate = modal.find("input[name='replyDate']");

	var modalModBtn = $("#modalModBtn");
	var modalRemoveBtn = $("#modalRemoveBtn");
	var modalRegisterBtn = $("#modalRegisterBtn");

	$('#addReplyBtn').on("click", function(e) {
		modal.find("input").val("");
		modalInputReplyDate.closest("div").hide();
		modal.find("button[id !='modalCloseBtn']").hide();
		modalRegisterBtn.show();

	    $(".modal").modal("show");
	});

 

 * 정말 정말 오타를 조심해야한다.... modal을 model이라고 썼다가 두시간 뻘짓.., ㅠㅠㅠ

 

모달창 화면

 

[ 댓글 등록 및 목록 갱신 ]

 

새로운 댓글의 추가는 필요한 댓글의 내용과 댓글의 작성자 항목만으로 추가해서 모달창 아래쪽의 'Register' 버튼을 클릭해서 처리한다. 

 

1) get.jsp 내의 새로운 댓글 추가 처리

	modalRegisterBtn.on("click", function(e){
		var reply = {
				reply : modalInputReply.val(),
				replyer : modalInputReplyer.val(),
				bno : bnoValue
		};
		
		replyService.add(reply, function(result){
			alert(result);
		
			modal.find("input").val("");
			modal.modal("hide");
		});
	});

 

댓글이 정상적으로 추가되면 경고창을 이용해서 성공했다는 사실을 알려주고, 등록한 내용으로 다시 등록할 수 없도록 입력항목을 비우고 모달창을 닫아준다. 

 

 

댓글이 정상적으로 처리되었지만 목록 자체는 갱신된 적이 없으므로 화면에서 새로 등록된 댓글이 보이지 않는다. 이러한 문제 때문에 댓글을 추가한 후에는 다시 댓글의 목록(showList(1))을 갱신할 필요가 있다.

 

기존의 코드에 showList(1)을 추가해서 댓글이 추가된 후 그 사이에 추가되었을지 모르는 새로운 댓글도 가져오도록 한다.