[Javascript] Ajax 목록 공통 API 함수 개발

개발 환경

 

Spring Boot 3.2

JDK 17

TOMCAT 10 (내장 톰캣)

Maven

 

시작 계기

 

스타트업에서 프로젝트를 진행하면서 초기 단계에서 만들었던 공통으로 쓰고자 했던 방법이다.

사실 Spring MVC 패턴으로 개발하는게 가장 쉽고 효율적이나,

React처럼 Component와 SPA 개념을 활용하여 UI로 기초 설계를 해놓은 임원진 분들의 시작으로 인해

진행하게 되었다.

 

 

기초 설계

 

기초 설계는 다음과 같이 구성하고 정의했다.

 

1. 공통으로 사용할 함수명은 selectListApi 로 정의

2. 매개변수는 url, params, successCallBack, errorCallBack으로 구성

3. 데이터 타입은 json과 post 방식으로 고정

 

** url은 컨트롤러 주소

** params는 json 타입 변수

** successCallBack은 성공 시 콜백 함수

** errorCallBack은 실패 시 콜백 함수 (공통)

 

 

공통 소스

 

function selectListApi(url,params,successCallBack,errorCallBack){
	$.ajax({
	    url: url,
	    type: 'post',
	    dataType: 'json',
	    contentType: 'application/json',
	    data: JSON.stringify(params),
	    success: function (data) {
	        if (typeof successCallBack === 'function') {
	            successCallBack(data); // 성공 시 콜백 실행
	        }
	    },
	    error: function (xhr, status, error) {
	        if (typeof errorCallBack === 'function') {
	            errorCallBack(xhr, status, error); // 에러 콜백 실행
	        } else {
	            Swal.fire({
	                timer: 3000,
	                timerProgressBar: true,
	                icon: 'error',
	                title: '조회 실패',
	                text: '관리자에게 문의 바랍니다.'
	            });
	        }
	    }
	});
}

 

편의상 콜백 함수는 function으로 정의하고 alert은 sweetAlert로 진행했다.

 

 

 

사용 예제

 

<script>
	$(() => {
		feather.replace();
		const jsonData = {pppSeq:"${pppSeq}"};

		// ## 목록 API 호출
		selectListApi(
			'/portal/pcm/prd/selectListBppPcmSri',
			jsonData,
			function(data){
				const dataMdId = "areaModalClone_${dataMdId}";
				const tableBody = $('#'+dataMdId+' #sriForm tbody');
				let row = '';

				data.rows.forEach((item,index) => {
					row += '<tr>';
					row += '<td class="dt-center">'+(index+1)+'</td>';
					row += '<td class="dt-center">'+handleNull(item.pppNm)+'</td>';
					row += '<td class="dt-center">'+handleNull(item.ppsNo)+'</td>';
					row += '<td class="dt-center">'+handleNull(item.ppsInbnDt)+'</td>';
					row += '<td class="dt-center">'+handleNull(item.ppsFstmInstlDt)+'</td>';
					row += '<td class="dt-center">'+handleNull(item.ppsGrnteExpirDt)+'</td>';
					row += '<td class="dt-center">'+handleNull(item.ppppInstlDt)+'</td>';
					row += '<td class="dt-center">';
					row += '<a href="javascript:;" class="btnModalOpen" data-md-id="sriDet'+ (index+1) +'" data-md-size="lg" data-md-url="/portal/pcm/sriDet?pgId=1&ppsSeq='+ (item.ppsSeq) +'&dataMdId=sriDet'+ (index+1) +'">'+handleNull(item.pciNm)+'</a>';
					row += '</td>';
					row += '<td class="dt-center">'
					row += '<button type="button" class="btn btn-xs btn-icon-text btn-secondary btnModalOpen" data-md-id="sriHis'+ (index+1) +'" data-md-size="xl" data-md-url="/portal/pcm/sriHis?pgId=1&ppsSeq='+ (item.ppsSeq) +'&dataMdId=sriHis'+ (index+1) +'">H</button>';
					row += '</td>';
					row += '</tr>';
				});

				tableBody.html(row);

				//## 모달창 사용 초기화
				fnVfc.modalInit(dataMdId);
			}
		);
	});
</script>

 

 

선택자에 대한 문제도 해결해야 하는데 고민이 많다.

매 페이지마다 선택자에 대한 골칫거리 또한 공통으로 묶을만한 모듈을 만드는데 연구중이다.

성능에 대한 부분도 개선해야 될 것이고 (물론 그것은 추후 얘기지만)

이번에 다니는 회사의 프로젝트는 프론트와 백엔드 언어 그리고 설계, 디자인, UI/UX에 대한 전반적인 개념을

모두 얻을 수 있는 것이라 실력 향상에 매우 도움이 되는 중이다.