[B -2-38] Ajax 댓글 처리 11

자바스크립트 준비

 

자바스크립트의 모듈화

화면에서 사용되는 제이쿼리는 막강한 기능과 다양한 플러그인을 통해 많은 프로그램에서 기본으로 사용된다.

특히 Ajax를 이용하는 경우에는 제이쿼리의 함수를 이용해서 아주 간단히 처리할 수 있기 때문에 많이 사용된다.

이렇게 작업하다보면 귀차니즘으로 인해 한 페이지 내에서 자바스크립트들이 막 섞여서 유지보수하기 힘든 코드가 되는 경우가 많은데, 이 경우를 대비해서 좀 더 자바스크립트를 하나의 모듈처럼 구성하는 방식을 이용하는 게 좋다.

자바스크립트에서 제일 많이 사용하는 패턴 중 하나는 모듈 패턴이다.

모듈 패턴은 관련 있는 함수들을 하나의 모듈처럼 묶음으로 구성하는 것을 의미한다.

자바스크립트의 클로저를 이용하는 가장 대표적인 방법이다.

 

---

자바스크립트 모듈 등록 처리

 

/webapp/resources/js

reply.js

 

console.log("Reply Module........");

var replyService = (function() {

	function add(reply, callback, error) {
		console.log("add reply...............");

		$.ajax({
			type : 'post',
			url : '/replies/new',
			data : JSON.stringify(reply),
			contentType : "application/json; charset=utf-8",
			success : function(result, status, xhr) {
				if (callback) {
					callback(result);
				}
			},
			error : function(xhr, status, er) {
				if (error) {
					error(er);
				}
			}
		})
	}
	
	return {
		add : add
	};

})();

 

모듈 패턴은 즉시 실행하는 함수 내부에서 필요한 메서드를 구성해서 객체를 구성하는 방식이다.

브라우저 개발자 도구에서는 replyService 객체의 내부에서 add 라는 메서드가 존재하는 형태로 보이게 된다.

 

외부에서는 replyService.add(객체, 콜백) 를 전달하는 형태로 호출할 수 있는데, Ajax 호출은 감춰져 있기때문에 코드를 좀 더 깔끔하게 작성할 수 있다.

 

reply.js 내에 add 함수는 Ajax를 이용해서 POST 방식으로 호출하는 코드를 작성한다.

---

views/board

get.jsp

replyService.add()

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ include file="../includes/header.jsp"%>
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">게시판 조회</h1>
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">게시글 조회 페이지</div>
			<!-- /.panel-heading -->
			<div class="panel-body">
					<div class="form-group">
						<label>글 번호</label>
						<input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
					</div>
					<div class="form-group">
						<label>작성자</label>
						<input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
					</div>
					<div class="form-group">
						<label>제목</label>
						<input class="form-control" name="title" value='<c:out value="${board.title }"/>' readonly="readonly">
					</div>
					<div class="form-group">
						<label>내용</label>
						<textarea class="form-control" rows="10" name="content" readonly="readonly"><c:out value="${board.content}"/></textarea>
					</div>
					
					<button data-oper='modify' class="btn btn-default">수정</button>
					<button data-oper='list' class="btn btn-info">목록</button>
					
					<!-- operForm 시작 -->
					<form id='operForm' action="/board/modify" method="get">
						<input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
						<input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum}"/>'>
						<input type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
						
						<!-- Criteria의 키워드와 타입에 대한 처리 시작 -->
						<input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
						<input type='hidden' name='type' value='<c:out value="${cri.type}"/>'> 
						<!-- Criteria의 키워드와 타입에 대한 처리 종료 -->
					</form>
					<!-- operForm 종료 -->
			</div>
			<!-- /.panel-body -->
		</div>
		<!-- /.panel -->
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>

<script type="text/javascript">
$(document).ready(function() {

  var operForm = $("#operForm"); 

  $("button[data-oper='modify']").on("click", function(e){

    operForm.attr("action","/board/modify").submit();

  });

  $("button[data-oper='list']").on("click", function(e){

    operForm.find("#bno").remove();
    operForm.attr("action","/board/list")
    operForm.submit();

  });
});
</script>

<script type="text/javascript" src="/resources/js/reply.js"></script>

<script>
	console.log("===============");
	console.log("JS TEST");

	var bnoValue = '<c:out value="${board.bno}"/>';

	// for replyService add test
	replyService.add(
    	{
    		reply:"JS Test", 
    		replyer:"tester", 
    		bno:bnoValue
    	},
	    function(result){
	      alert("RESULT : " + result);
	    }
	);

</script>

<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>

 

add() 부분을 보면, 데이터 전송 타입이 application/json; charset=utf-8 방식으로 전송한다는 점과 파라미터로 callback과 error를 함수로 받을 것이라는 점이다.

 

만약 Ajax 호출이 성공하고, callback 값으로 적절한 함수가 존재한다면, 해당 함수를 호출해서 결과를 반영하는 방식이다.

 

자바스크립트는 특이하게도 함수의 파라미터 개수를 일치시킬 필요가 없기 때문에 callback 이나 error와 같은 파라미터는 필요에 따라 작성하면 된다.

 

---

댓글 등록 테스트 결과

 

브라우저상의 개발자 도구 화면

get.jsp 내부에서는 Ajax 호출은 replyService라는 이름의 객체에 감춰져있기때문에 필요한 파라미터들만 전달하는 형태로 간결해진다.

replyService의 add() 에 던져야 하는 파라미터는 자바스크립트의 객체 타입으로 만들어서 전송해주고, Ajax 전송 결과를 처리하는 함수를 파라미터로 같이 전달한다.

 

브라우저에서는 JSON 형태로 데이터가 전송되고 있는 것을 확인할 수 있어야하고, 전송되는 데이터 역시 JSON 형태로 전송되는지 확인해야 한다.

---

서버단에서는 JSON 데이터가 ReplyVO 타입으로 제대로 변환되는 것을 알 수 있다.

INFO : com.spms.controller.ReplyController - ReplyVO: ReplyVO(rno=null, bno=524314, reply=JS Test, replyer=tester, replyDate=null, updateDate=null)
INFO : com.spms.controller.ReplyController - Reply INSERT COUNT: 1