[실무 경험담] 넥사크로(Nexacro N)에서 스프링(Spring)으로 데이터 요청하기 - 넥사크로 프론트엔드 코딩

안녕하세요. IT Window 킷도우입니다.

포르투갈을 꺾고 16강에 진출한 대한민국...!!!!!

우리네 인생도 대한민국 축구 대표팀처럼 성공의 결실을 맺길 기도하면서 

오늘도 여러분들을 위해 도움이 될 만한 실무경험담 하나를 가져왔습니다.

 

넥사크로 스프링 데이터 요청하기

넥사크로(Nexacro N)에서 프론트엔드 코딩을 통해 스프링 프레임웍(Spring Framework)으로 구축된 서버에 데이터를 요청해 보겠습니다. 넥사크로, 스프링 환경을 운영하는 개발자라면 반드시 알아야 하는 부분이자 기초라고 할 수 있는데요.

 

그럼 바로 본론으로 들어가 설명드리겠습니다.

쉬운 설명을 위해 아래 화면에서 보이는 것과 같이 조회 버튼을 눌렀을 때의 상황을 가정하겠습니다.

(조회 버튼 클릭시 검색 조건에 맞게 데이터가 그리드에 조회되는 상황임)

예시 화면

1. 서버에 요청할 데이터셋 만들어 주기

조회 버튼을 클릭했을 때, 우리는 DB에서 데이터를 조회하여 그 값을 그리드에 뿌려줘야 합니다.
그렇다면 프론트에서 우리는 어떤 값들을 만들어서 서버로 보내줘야 할까?
바로 검색조건에 있는 값들을 담아서 서버로 보내줘야 합니다.
이 값들을 DB에서 조회 시 SELECT WHERE절에 넣어 줘야 알맞는 데이터를 가져올 수 있습니다.
따라서, 검색 조건들을 ds_searchList라는 데이터셋을 만들어서 값을 세팅해주는 작업을 해 봅시다.

여기서 데이터셋은 아래 그림과 같이 직접 디자인 영역에서 만들어 줍니다. 

(넥사크로 상단 바에서 원통형 모양의 데이터셋을 클릭하여 Invisible Object 영역에 담고 Dataset Editor에서 컬럼 추가 진행하면 됨)

ds_searchList 데이터셋이 만들어진 모습 - 넥사크로 스프링 데이터 연동

 

script 영역에 추가로 아래와 같이 추가로 코딩합니다.

//조회 버튼을 클릭했을 때 실행되는 이벤트 함수 영역
this.btn_selectOrd_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{	
	this.ds_searchList.clearData(); // 데이터셋 초기화
	this.ds_searchList.addRow();    // 데이터셋 row 추가
	this.ds_searchList.setColumn(0,"ORD_NO",this.edt_ordNo.value);
	this.ds_searchList.setColumn(0,"CUST_NM",this.edt_custNm.value);
	this.ds_searchList.setColumn(0,"COMP_YN",this.chk_cmpYn.value);
	this.ds_searchList.setColumn(0,"ORD_STAT_CD",this.cbo_ordStat.value);
	this.ds_searchList.setColumn(0,"CUST_GBCD",this.rdo_custGb.value);

반응형

2. 서버에서 DB 조회를 통해 받을 결과 값을 담는 용도로, 데이터셋 추가로 만들어주기

우리는 서버에서 가져온 결과 리스트를 그리드에 보여줘야 합니다.
그래서 ds_list라는 데이터셋을 하나 만들어서 그 결과 값을 받아줄 것 입니다.

ds_list 생성한 모습 - 넥사크로 스프링 데이터 연동

추가로, 그리드에 ds_list 데이터셋이 바인딩(연동) 돼 있어야 합니다. 해당 바인딩은 design 영역에서 수행하는데 아래 이미지와 같이 데이터셋을 그리드 영역에 드래그&드랍을 하면 쉽게 바인딩이 됩니다.

ds_list 데이터셋을 그리드와 바인딩 하는 모습 - 넥사크로 스프링 데이터 연동

3. 서버로 요청하기(this.gfnTransaction 공통함수 활용하기)

서버로 데이터를 요청할 때 자바스크립트에선 ajax함수나, submit 함수를 이용해서 요청했다면 넥사크로에서는 this.gfnTransaction(strSvcId,strSvcUrl,inData,outData,strAvg,callBackFnc) 함수를 이용해 요청을 합니다.

각 매개변수에는 어떤 값들을 담아줄까요?

 

strSvcId: 넥사크로에서 트랜잭션을 구분하기 위한 id값, 이 id값은 차후 fncallback 함수에서 쓰입니다.
strSvcUrl: Java Controller에서 이 주소를 서버에 요청을 처리합니다.
inData: 서버로 전송할 데이터셋을 세팅, = 문자 기준으로 왼쪽이 서버, 오른쪽이 프론트 데이터셋입니다. 서버측(.java)에도 = 기준 왼쪽 데이터셋명(ds_searchList)과 반드시 동일하게 명명해야 합니다.
outData: 서버로부터 값을 전달받을 데이터셋을 세팅하는 것입니다. inData와는 반대로 = 문자 기준으로 왼쪽이 프론트, 오른쪽이 서버 데이터셋입니다. 서버측(.java)에서도 = 기준 오른쪽 데이터셋명(ds_list)과 반드시 동일한 이름을 써야합니다.
strAvg: 데이터셋이 아닌 값(스트링 등)을 보낼때 쓰는 필드지만 데이터셋을 쓰는 것으로 통일하는 것을 권장합니다. 
callBackFnc:  서버로부터 값을 받은 이후 프론트에서 이행해야 할 작업 코드를 fnCallback 함수에서 작성합니다.

	var strSvcId = "selectOrdList";           
	var strSvcUrl = "selectOrdList.do";       
	var inData = "ds_searchList=ds_searchList";      
	var outData = "ds_list=ds_list"; 
	var strAvg = "";                            
	var callBackFnc = "fnCallback";
    
    	this.gfnTransaction(strSvcId,strSvcUrl,inData,outData,strAvg,callBackFnc);

 

네, 이렇게 하면 넥사크로 스프링 데이터 연동을 위한 프론트엔드 코딩이 마무리됩니다.

마지막으로 전체 소스 코드를 공유 드리며 글을 마치겠습니다.

this.btn_selectOrd_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.ds_searchList.clearData();
	this.ds_searchList.addRow();
	this.ds_searchList.setColumn(0,"ORD_NO",this.edt_ordNo.value);
	this.ds_searchList.setColumn(0,"CUST_NM",this.edt_custNm.value);
	this.ds_searchList.setColumn(0,"COMP_YN",this.chk_cmpYn.value);
	this.ds_searchList.setColumn(0,"ORD_STAT_CD",this.cbo_ordStat.value);
	this.ds_searchList.setColumn(0,"CUST_GBCD",this.rdo_custGb.value);
	
	trace("로그 남기기(크롬의 console.log기능과 같다)");
	trace("ORD_NO      :" + this.ds_searchList.getColumn(0,"ORD_NO"));
	trace("CUST_NM     :" + this.ds_searchList.getColumn(0,"CUST_NM"));
	trace("COMP_YN     :" + this.ds_searchList.getColumn(0,"COMP_YN"));
	trace("ORD_STAT_CD :" + this.ds_searchList.getColumn(0,"ORD_STAT_CD"));
	trace("CUST_GBCD   :" + this.ds_searchList.getColumn(0,"CUST_GBCD"));
	
	var strSvcId = "selectOrdList";           
	var strSvcUrl = "selectOrdList.do";       
	var inData = "ds_searchList=ds_searchList";      
	var outData = "ds_list=ds_list"; 
	var strAvg = "";                            
	var callBackFnc = "fnCallback"; 
									
	this.gfnTransaction(strSvcId  ,
	                    strSvcUrl ,
			    inData   ,
			    outData  ,
			    strAvg   ,
			    callBackFnc);
};

 

킷도우 웹 개발 기초 강의가 오픈됐습니다!

궁금하신 분들은 아래 링크를 참고해 주세요~

https://kitdow.tistory.com/31

킷도우의 첫 강의! - 웹 개발 기초 (프론트엔드, 백엔드, DB까지 총 10시간에 걸쳐 주문 게시판 만