jQuery Ajax Wrapping (유틸제작 2편)

jQuery Ajax Wrapping 함수 제작 (유틸제작 2편)

이전 포스팅(날짜 관련 유틸리티 함수 제작 (유틸제작 1편))에 이어서,

이번에는 jQuery Ajax를 Wrapping을 통해 조금더 효율적으로 사용해 보겠습니다.

Ajax를 사용하시면서 어떤분은 미리 랩핑을 해서 사용하실 거고,

또는 그렇지 않고 그냥 사용하시는 분들도 계실겁니다.

(아니면 직접 객체를 구현하시거나, 확장하시거나)

저의 경우에는 따로 Wrapper 함수를 만들어 사용하고 있습니다.

명칭을 어떤식으로 사용할까 고민하고 검색도 해봤는데,

외국에서는 대부분 Wrapping, Util 또는 Helper 라는 명칭으로 사용하는것 같습니다.

따라서 저는 함수로 그냥 감싸서 사용하므로 Wrapping 이라는 명칭을 사용하겠습니다.

왜 Wrapping 하여 사용하는가?

다방면의 효율성이 있겠지만 저의 경우 코드의 중복제거, 재사용 측면과, 유지보수 용이점을 위해 사용했습니다.

예를들어 $.ajax 를 사용하시면서 랩핑작업 없이 그대로 사용하는 상황이라고 가정했을때,

$.ajax 를 사용하는 부분이 얼마 없다면 상관없습니다.

하지만 만약 매우 많은 $.ajax 호출구문이 있다면 이야기가 달라집니다.

구조의 변경, 컨텍스트 명 변경 등의 사유로 소스코드를 고쳐야 한다면

수많은 $.ajax 호출 부분을 수정해야 합니다.

(해결 방안은 많지만 극단적으로 설명드리는 점은 너그럽게 이해해 주세요)

이럴때 애초에 중복이 될 수 있는 부분은 최소화 하고,

재사용율이 높게 만들면서,

추후 유지보수나 확장을 조금더 용이하게 만든다면 얼마나 좋을까요?

물론 완벽하게 미래를 예측하고 코드를 작성할 수 없기 때문에 (실력도 부족합니다 ^^;)

다음 보실 예제 코드역시 참고용으로 봐주시면 감사하겠습니다.

_common = {
	/**
	 * 
	 * Ajax Wrapper 입니다. (Method : POST)
	 *
	 * 필수) _URL - 전송 URL (String)
	 * 필수) _PARAMETERS - 전송 파라미터 (object or String)
	 * 필수) _CALLBACK - 콜백함수 (function)
	 * 선택) _async - 동기화 여부 (boolean : 미지정시 true)
	 * 선택) _errorMsg - 전송 실패시 메시지 (String)
	 * 
	 */
	callAjax : function(_URL, _PARAMETERS, _CALLBACK){
		if(_URL != null){

			var _async = arguments[3];
			if(_async == null) _async = true;

			var _errorMsg = arguments[4];

			$.ajax({
				type    : "POST",
				url     : _URL,
				data    : _PARAMETERS,
				async   : _async,
				success : function(rst){
					_CALLBACK(rst);
				},
				error   : function(){
					if(_errorMsg != null){
						alert(_errorMsg);
					}else{
						alert("서버에 요청중 문제가 발생했습니다.\n관리자에게 문의하여 주십시오.");
					}
				}
			});
		}else{
			alert("올바른 요청이 아닙니다.");
			return false;
		}
	}
};

보시는 봐와 같이 큰 내용은 없습니다.

그저 _common.callAjax 라는 명칭으로 함수를 하나 만들었을 뿐입니다.

사용법은 다음과 같습니다.

_common.callAjax("/user/getData.json", {"user_nm" : "홍길동"}, function(json){

	alert("홍길동 님의 ID : " + json.user_id);

}, true);

이런식으로 Wrapping 하여 사용하면 추후 유지보수가 매우 용이해 집니다.

모든 Ajax 는 _common.callAjax 를 통하여 사용하기 때문에,

컨텍스트명 추가, 구조 변경 등의 일이 발생했을때 이쪽에서 처리해주면 되기 때문입니다.

기존 코드는 그대로 유지하고, 조건문을 추가하거나 하여 조작하시면 됩니다.

예제 소스를 그대로 쓸 경우 저렇게 사용하시면 되지만

디테일한 옵션까지 설정하는 코드가 아니므로,

왠만하면 참고용으로 활용하시고 다시 만드시는걸 권장합니다 :D

마치며

Wrapping 을 하시기 전까지는 중복코드도 있을 수 있고,

가독성도 떨어지고, 코드가 길어 질 수 있습니다.

실제로 프로젝트를 진행하면서 HighChart.js 를 사용했었는데

한 페이지에서 데이터만 다르고 모양은 같은 4개의 그래프를 표출 하는 기능이 있었습니다.

처음에는 차트 생성할때 똑같은 코드지만 데이터 부분만 다른 코드를 4개나 넣어두고 사용했고,

차트 생성에 필요한 코드와 옵션까지 포함하여 개당 약 40라인 정도가 필요했으니, 총 약 160라인을 사용했었네요..

그리고 추후에 어느정도 개발이 완료된 후 리팩토링을 통하여 Wrapping 작업을 했습니다.

위의 예제처럼 차트용 함수를 Wrapping 하여 따로 사용하였고,

결과로 차트당 10라인 미만으로 사용하였으니, 약 120 라인을 절약하였네요.

사내에서 꼭 지켜야 하는 코딩 규약이 있지 않을 경우는 미리 제작해두시면 좋을 것 같습니다.

리팩토링 하시면서 만들어보시는 것도 매우 좋겠네요.

물론 시간이 있어야....

이번 포스팅도 도움이 되셨을지 모르겠네요.

긴글 읽어주셔서 감사합니다.