JavaScript의 모듈화

Ajax를 이용하는 경우에 jQuery의 함수를 이용해서 쉽게 처리할 수 있지만, 어느 순간 이벤트 처리와 DOM 처리, Ajax 등이 복잡하게 섞여서 유지보수 하기 힘든 코드를 만드는 경우가 많다. 이런 경우를 대비해서 좀 더 JavaScript를 하나의 모듈처럼 구성하는 방식을 이용하는 것이 좋다.

모듈은 관련된 기능을 하나로 묶어 다른 코드와 결합도를 줄이고, 재사용성을 높이기 위해 사용된다. 모듈 패턴은 JavaScript의 즉시 실행함수와 {}를 이용해서 객체를 구성한다.

reply.js

var replyService = (function(){

	//reply.js 내에 add 함수는 Ajax를 이용해서 
    	POST방식으로 호출하는 코드를 작성한다
        
	function add(reply, callback, error){
		console.log("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};
	
})();

add()에서 봐야 하는 부분은 데이터 전송 타입이 'application/json; charset=utf-8' 방식으로 전송한다는 점과 파라미터로 callback과 error를 함수로 받을 것이라는 점이다. 만일 Ajax 호출이 성공하고, callback 값으로 적절한 함수가 존재한다면 해당 함수를 호출해서 결과를 반영하는 방식이다.

jsp

<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>

jsp내부에서 Ajax 호출은 replyService라는 이름의 객체에 감춰져 있으므로 필요한 파라미터들만 전달하는 형태로 간결해진다. replyService의 add()에 던져야 하는 파라미터는 JavaScript의 객체 타입으로 만들어서 전송해 주고, Ajax 전송 결과를 처리하는 함수를 파라미터로 같이 전달한다.

결과

브라우저에서는 JSON 형태로 데이터가 전송되고 있는 것을 확인할 수 있다.

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