댓글 처리와 JavaScript의 모듈화

JavaSciprt의 모듈화

- jQuery는 막강한 기능과 다양한 플러그인을 통해서 많은 프로젝트에서 기본으로 사용
- Ajax를 이용하는 경우에는 jQuery의 함수를 이용해서 너무나 쉽게 처리할 수 있기 때문에 많이 사용
- 화면 내에서 JavaScript 처리를 하다 보면 어느 순간 이벤트처리와 DOM 처리, Ajax 처리 등이 마구 섞여서 유지보수 하기 힘든 코드를 만드는 경우가 많음, 이런 경우를 대비해서 좀 더 JavaScript를 하나의 모듈처럼 구성하는 방식을 이용하는 것이 좋음

- JavaScript에서 가장 많이 사용하는 패턴 중 하나는 모듈 패턴
- 관련 있는 함수들을 하나의 모듈처럼 묶음으로 구성하는 것을 의미
- JavaScript의 클로저를 이용하는 가장 대표적인 방법


// 모듈 패턴
- jsModule.js
console.log("JS Module..........")

var runfunction = (function() {
 reutrn { test:"TEST"};
}) ();

- Java의 클래스처럼 JavaScript를 이용해서 메서드를 가지는 객체를 구성
- 모듈 패턴은 JavaScript의 즉시 실행함수와 '{}'를 이용해서 객체를 구성
- JavaSciprt의 즉시 실행함수는 () 안에 함수를 선언하고 바깥쪽에서 실행해 버림
- 함수의 실행 결과가 바깥쪽에 선언된 변수에 할당
- runfunction이라는 변수에 test이라는 속성에 'TEST'라는 속성값을 가진 객체가 할당

// 실행 jsp
- test.jsp
<script type="text/javascript" src="/resources/js/jsModule.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
  console.log(runfunction);
 });
</script>

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

// jsp에서 호출해서 사용할 객체
var replyService = (function() {
	// JavaScript에서는 함수의 파라미터 개수를 일치시킬 필요가 없음(callback, error 등 필요에 따라 작성)
	function add(reply, callback, error) { 
    	console.log("add reply");
    
        $.ajax({
            type : 'POST',	// 전송 방식('GET' OR 'POST')
            url : '/replies/new',	// 요청할 URL(컨트롤러 단에서 호출할 주소)
            data : JSON.stringify(reply),	// 서버에 전송할 데이터
            contentType : "application/json; charset=utf-8", // 서버에 전송할 타입(JSON/utf-8)
            success : function(result, status, xhr) { // 요청 및 응답에 성공했을 때 실행할 함수
                if(callback) {
                    callback(result);
                }
            },
            error : function(xhr, status, er) { // 요청 및 응답에 실패했을 때 실행할 함수
                if(error) {
                    error(er);
                }
            }
        })
	}
    
    return {
    	add : add
    };
})();

 

 

JSON.stringify(value, replacer, space) 메서드

- JavaScript 값이나 객체를 JSON 텍스트로 바꾸고 해당 JSON 텍스트를 문자열에 저장

- 객체/배열에서 JSON 문자열을 만드는데 사용

- value(필수) : JSON 문자열로 변환할 값

- replacer(선택) : 이 값이 null 이거나 제공되지 않을 경우 객체의 모든 속성이 결과 JSON 문자열에 포함

- space(선택) : 가독성을 위해 출력 JSON 문자열에 공백을 삽입하는데 사용되는 String or Number 객체