20190517_모듈패턴 및 JSON 기초

모듈패턴 및 JSON

 

JSON이란?

GET HTTP 요청을 사용하여 서버에서 JSON으로 인코딩 된 데이터를 불러오는 기능을 말합니다.

JSON은 문자열 형태지만javascript는 data를 access하기위해 JSON 객체로 변환합니다.

javascript는 JSON 전역객체를 통해 문자열과 상호변환을 지원 !!!

• url : 요청을 보내는 URL 문자열
• data : 요청과 함께 서버에 전송되는 객체
• success : 요청이 성공시 실행되는 콜백 함수

모듈 패턴

Java클래스처럼 JavaScript를 이용해 메소드를 가지는 객체를 구성하는 것을 말합니다.

즉시 실행함수는 함수내부에 필요한 메소드를 구성하여 객체를 구성하는 방법을 말하며 자바스크립트의 즉시 실행함수는 첫번째 ( ) 안에 함수를 선언하고 바깥쪽 ( )에서 실행합니다.

예제

var replyService = (function(){
	return {name : "AAA"};
})();

위에 코드를 가진 js파일을 작성 후 보여줄 jsp 파일내에 자바스크립트 파일 경로를 추가합니다.

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

view(jsp) 파일에 아래와 같이 자바스크립트를 작성합니다

<script type="text/javascript">
	$(document).ready(function(){
  	console.log(replyService);
});
</script>

 

이후 서버를 가동시키고 /board/get?bno=xxx 경로를 브라우저에 입력하면 아래 사진과 같이 개발자도구에서 확인이 가능합니다.

즉시 실행 함수

함수 리터럴을 괄호 () 로 둘러싼 후 다음 () 를 추가한다. 두번째 괄호에서 메소드가 실행되며 안에 인자를 넘길 수 있습니다.

즉시 실행함수의 경우 함수를 다시 호출할 수 없어 최초 한 번의 실행만을 필요로 하는 초기화 코드 부분에 사용합니다.

 

JQuery에서 즉시 실행 함수를 사용한 이유?

자바스크립트는 변수의 유효 범위 특성을 가지고 있기 때문입니다.

자바스크립트는 변수를 선언시 전역 유효범위를 가지게 되지만 함수 내에 정의된 매개변수와 변수는 내부에서만 유효할 뿐 함수 밖에서는 유효하지 않습니다. 이를 통해 함수 외부의 코드에서 내부의 변수에 접근하는 것이 불가능하다는 것을 알 수 있습니다.

라이브러리 코드를 즉시 실행 함수 내부에 정의를 한다면 라이브러리 내에 변수들은 함수 외부에서 접근할 수 없기때문에 실행 함수 내에 라이브러리 코드를 추가해도 전역 네임스페이스를 건들지 않아 충돌 문제를 방지할 수 있습니다.

 

모듈 패턴의 절차

네임스페이스 설정

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

모듈 정의

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
	};
  
})();

xhr?

XMLHttpRequest

자바스크립트 객체로 서버로부터 다양한 리소스를 가져오는 요청을 만들어주는 기능

Reference

• 캡틴판교님 - 객체 생성패턴
• 인사이드 자바스크립트