요즘 ExtJS로 티스토리 스킨 제작중이라 포스팅에 소홀했음... 

오늘은 ExtJS에서 어느분께서 HTML5 의 FILE태그중, MULTIPLE 속성을 주어 다중파일 업로드 처리에 대하여 질문해주셔서 한번 선택으로 다중 파일업로드 관련 포스팅을 진행 하겠음..

개념은 FILEFIELD 여러개를 받을수 있는 서버로직이 1차적으로 필요하다.

본인은 SPRING 프레임워크를 이용하여 서버로직을 제작한 후 테스트 하였음

private ArrayList<MultipartFile> uploadFile;

filefield 태그의 name명을 uploadFile이라고 주고 진행을 하겠음

간단하게 기본 폼필드와 단일 파일업로드 관련 샘플링은 다음 글을 참고하면 될듯.

2014/07/02 - [자바스크립트이야기/ExtJS] - [ExtJS강좌 20] 파일컴포넌트를 이용하여 파일업로드를 하자 (xtype : 'fieldfield')

이어서 다중 파일 업로드의 ExtJS 스크립트코드이다 .

Ext.onReady(function(){
	       var panel = Ext.create('Ext.form.Panel',{
	           title : '폼패널 - 파일첨부',
	           renderTo : Ext.getBody(),
	           items : [{
	                    xtype : 'filefield',
	                    name : 'uploadFile',
	                    buttonOnly: true,
	                    allowBlank : false,
	                    buttonText : '찾아보기',
	                    listeners:{
	                        afterrender:function(fileObj){
	                        	//파일태그옵션에 multiple이라는 옵션을 정의
	                        	fileObj.fileInputEl.set({
	                                multiple:'multiple'
	                            });
	                        },
	                        change : function(){
	                        	//파일첨부를 다중으로 선택시 열시버튼 누르면
	                        	//change 이벤트를 발생시켜 폼 submit!
	                        	var frm = panel.getForm();
	                            if(frm.isValid()) {
	                                frm.submit({
	                                	url: '/uploadFile',
	                                	success : function(fp, res) {
	                                		var jsonResult = Ext.JSON.decode(res.response.responseText);
	                                		var msg = "업로드된 파일명<br/>";
	                                		Ext.each(jsonResult.fileList,function(obj){
	                                			msg += obj.fileName+",";
	                                		});
	                                		msg = msg.substring(0,msg.length-1);
	                                		Ext.MessageBox.show({
	                                					title : '업로드된파일명',
	                                					msg : msg,
	                                					buttons : Ext.MessageBox.YES,
	                                					icon : Ext.MessageBox.INFO
                               				});
	                                		//한번 submit 처리가 되면 filefield는 초기화 되므로
	                                		//다시 filefield에 multiple 속성 설정
	                                		panel.down("filefield").fileInputEl.set({
	                                			multiple:'multiple'
	                                		});
	                                	}
	                                });
                            	}
                        	}
                    	}
				}]
	       })
	})

기존 단일 파일업로드와 차이가 있다면 

본인의 submit하는 서버 로직은 다음과 같다.

파일처리는 제외하였다.

어짜피 파일데이터가 넘어가느냐만 확인하기 위한 테스트 로직이므로 

로직 사이에 파일처리 하는 로직을 추가로 설정 하면 되겠음.

@RequestMapping(value="/uploadFile", method=RequestMethod.POST)
	public void uploadFile (FileVo fileVO, HttpServletRequest request, HttpServletResponse response) {
                //fileVO 안에 다중 파일값을 받기위한  private ArrayList<MultipartFile> uploadFile; 가 존재함
		JSONObject jsonObj = null;
		JSONObject jsonObj2 = null;
		try {
			JSONArray jsonArr = new JSONArray();
			if(connectionInfo.getUploadFile() != null && connectionInfo.getUploadFile().size() > 0) {
				/**
				 * 반복분 내에서 파일 처리를 해주면 될것이다.
				 */
				for(MultipartFile file : connectionInfo.getUploadFile()) {
					jsonObj2 = new JSONObject();
					jsonObj2.put("fileName", file.getOriginalFilename());
					jsonArr.add(jsonObj2);
				}
			}
			jsonObj = new JSONObject();
			//form submit에서 json 데이터로 success true 값을 받아야함
			jsonObj.put("success", true);
			jsonObj.put("fileList", jsonArr);
		} catch (Exception e) {
			e.printStackTrace();
		} finally{
			try {
                                response.setContentType("text/plain; charset=UTF-8");
				PrintWriter pw = response.getWriter();
				pw.print(jsonObj);
				pw.flush();
				pw.close();
			} catch (IOException e) {}
		}
	}

실행해보도록 하자

테스트 결과 잘 나온다. 

해당 샘플링을 잘 응용하여 멀티파일 업로드를 처리하도록 하자.

※ IE에서 MULTIPLE 속성은 IE9인가 10부터 지원이 된다고 한다.

    잘 사용하도록 하자.

이번 포스팅은 다음(Daum)에서 제공하는 주소검색에 대한 소개 및 샘플로 ExtJS를 활용한 주소 연동을 

해보고자 한다.

기존에는 juso.go.kr에서 제공하는 api를 이용하여 주소검색을 사용했었는데 ajax 호출이다보니 

간혹가다 응답값을 못받을 경우가 많았다.

다음에서 주소검색 서비스를 완전 심플하게 제공 해주는 희소식을 전하고자 한다.

영문주소 + 도로명주소 모두 제공함

유지보수도 할필요가 없단다 얼마나 좋은가!! 

http://blog.daum.net/daummaps/565

HTTP URL

http://postcode.map.daum.net/guide

HTTPS URL

https://spi.maps.daum.net/postcode/guidessl

jQuery건 일반 html 태그건 ExtJS등등... 무얼 사용하던간에 전혀 영향을 받지 않기 때문에 

다음 두가지만 있으면 모든 페이지에서 사용이 가능하다.

<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>

function openDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
                //우편번호 첫번째
                document.getElementById('post1').value = data.postcode1;
                //우편번호 두번째
                document.getElementById('post2').value = data.postcode2;
                // 기본주소
                document.getElementById('addr').value = data.address;
               // data.addressEnglish; <<< 영문주소 값
            }
        }).open();
}

위 2가지만 있으면 주소연동은 끝난다.

자세한건 가이드URL를 통해서 적용해보도록...

본인은 2가지 ExtJS를 이용하여 2가지 방식(팝업/모달창)을 적용해보았다.

<link rel="stylesheet" type="text/css" href="/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"/>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>

Ext.onReady(function(){
	Ext.create('Ext.form.Panel',{
		title : 'ExtJS를 활용한 우편번호검색 예제[팝업]',
	    renderTo : Ext.getBody(),
	    layout: 'vbox',
	    items : [
	    	{
	    		xtype : 'panel',
	    		layout: 'hbox',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode1'
	    	    },{
	    		    xtype : 'label',
	    		    align : 'center',
	    		    text : '-'
	    	    },{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode2'
	    	    },{
	    	    	xtype : 'button',
	    	    	text : '우편번호찾기',
	    	    	handler : function(){
	    	    		openDaumPostcode();
	    	    	}
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '기본주소',
	    		    id : 'default_addr'
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '상세주소',
	    		    id : 'detail_addr'
	    	    }]
	    	} 
        ]
	    
	})
})
 function openDaumPostcode() {
     new daum.Postcode({
         oncomplete: function(data) {
             // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
             // 우편번호와 주소 정보를 해당 필드에 넣고, 커서를 상세주소 필드로 이동한다.
             Ext.getCmp("zipcode1").setValue(data.postcode1);
             Ext.getCmp("zipcode2").setValue(data.postcode2);
             Ext.getCmp("default_addr").setValue(data.address);
            // data.addressEnglish; <<< 영문주소 값
             Ext.getCmp("detail_addr").focus();
         }
     }).open();
 } 

이어서 모달창으로 주소검색 서비스를 사용해보도록 하자

INCLUDE 파일은 동일함.

이코드는 스크립트 코드만 있으면 되겠음. 위의 코드에서 일부 수정한것이 전부임

Ext.onReady(function(){
	Ext.create('Ext.form.Panel',{
		title : 'ExtJS를 활용한 우편번호검색 예제[레이아웃팝업(모달)]',
	    renderTo : Ext.getBody(),
	    layout: 'vbox',
	    items : [
	    	{
	    		xtype : 'panel',
	    		layout: 'hbox',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode1'
	    	    },{
	    		    xtype : 'label',
	    		    align : 'center',
	    		    text : '-'
	    	    },{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode2'
	    	    },{
	    	    	xtype : 'button',
	    	    	text : '우편번호찾기',
	    	    	handler : function(){
	    	    		var win = Ext.create("Ext.window.Window",{
	    	    			height:600,
	    	    			width:500,
	    	    			modal : true,
	    	    			autoShow : false,
	    	    			titleAlign : 'center',
	    	    			layout : 'fit',
	    	    			items : [{
	    	    	        	 xtype: 'component',
	    	    	        	 id : 'ext_address'
	    	    	         }]
	    	    		});
	    	    		
	    	            win.show(undefined,function(){
	    	            	new daum.Postcode({
	    	                    oncomplete: function(data) {
	    	                    	Ext.getCmp("zipcode1").setValue(data.postcode1);
	    	                        Ext.getCmp("zipcode2").setValue(data.postcode2);
	    	                        Ext.getCmp("default_addr").setValue(data.address);
                                       // data.addressEnglish; <<< 영문주소 값
	    	                        Ext.getCmp("detail_addr").focus();
	    	                    	win.destroy();
	    	                    },
	    	                    width : '100%',
	    	                    height : '100%'
	    	                }).embed(Ext.get('ext_address'));
	    	            });
	    	    	}
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '기본주소',
	    		    id : 'default_addr'
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '상세주소',
	    		    id : 'detail_addr'
	    	    }]
	    	} 
        ]
	})
})

잘~~~ 나온다 

검색속도도 완전 만족!!!!

평점 : ★★★★★

단점 : 다음(DAUM) 서버 죽으면 답없음 ㅋㅋ

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

정말 오랫만에 ExtJS 관련 포스팅을 하게되었다 .... 으캬캬캬캬 

사실 ... 회사 플젝 + 블로그 포스팅 + 개인플젝 리팩토링때문에 강좌를 미뤘었다.... 

이번 포스팅에는 Ext.Ajax.request를 사용하여 비동기 처리를 하고자 한다.

사용법 또한 거의 동일하다고 보면 되겠다.

ExtJS에서는 보통 ajax 사용시 

      form패널의 경우 submit을 해주고

     grid 또는 tree에서는 store -> proxy를 사용하여 비동기 처리를 한다.

하지만 Ext.Ajax.request 또한 필요에 따라 사용하게 되므로 포스팅을 해보도록 하겠다.

간단하게 회원가입에서 아이디 중복 조회를 한다는 시나리오를 가지고 한번 테스트를 해보도록 하자

<link rel="stylesheet" type="text/css" href="/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"/>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

Ext.onReady(function(){
	//꼭 form패널로 하지 않아도 된다.
	Ext.create('Ext.form.Panel',{
		title : '회원가입예제',
	    renderTo : Ext.getBody(),
	    layout: 'hbox',
	    items : [{
		    fieldLabel: '아이디',
		    xtype : 'textfield',
		    id : 'userId'
	    },{
	    	xtype : 'button',
	    	text : '중복조회',
	    	handler : function(){
	    		var userId = Ext.getCmp("userId").getValue();
	    		//ajax 호출
				Ext.Ajax.request({
					//호출 URL
					url : '/loginInfo.jsp',
					//submit 방식
					method : 'POST',
					//서버 전송 parameter
					params : {
						userId : userId
					},
					//성공
					success : function(response) {
						//response.responseText 문자열 로 넘어오므로 
						//Ext.JSON.decode를 이용하여 json object로 만들어준다.
						var jsonResult = Ext.JSON.decode(response.responseText);
						//jsonResult.flag 값이
						//     Y일 경우 중복입니다라는 alert 호출후input 초기화
						//     N일 경우 submit alert 호출
						if(jsonResult.flag){
		  				   Ext.MessageBox.show({
			  				title : '결과값',
							msg : '존재하는 아이디입니다.',
							buttons : Ext.MessageBox.YES,
							icon : Ext.MessageBox.ERROR
			  			  })  
		  			       } else {
		  				  Ext.MessageBox.show({
			  				title : '결과값',
							msg : 'SUBMIT',
							buttons : Ext.MessageBox.YES,
							icon : Ext.MessageBox.INFO
			  			  })
		  			     }
					},
					//실패
		  			failure : function(){
		  				  console.log("error");
		  			}
		  		}); 
	    	}
	    }]
	})
})

JSONObject jsonObj = new JSONObject();
//사용자 페이지에서 받은 사용자ID값
String userId = request.getParameter("userId");
//임의의 DB데이터
String dbUserId = "user";

//만약 사용자페이지에서 넘어온 데이터가 user라는 값이라면 true json object 
//사용자 페이지로 response
if(userId.equals(dbUserId)) {
	//중복이다
	jsonObj.put("flag", true);
//아닐경우 false 로 response
} else {
	//아니다
	jsonObj.put("flag", false);
}
PrintWriter pw = response.getWriter();
pw.print(jsonObj);
pw.flush();
pw.close();

1. 중복회원일 경우

2. 중복회원이 아닌 경우

기존 jQuery의 ajax 사용을 해보신 개발자 분들이라면 

이번 포스팅은 쉽게 이해하실거라 생각함

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

오랫만에 ExtJS 강의를 올리게 되었다.. 

마땅히 프로젝트 주제를 정하고 정하다가 결국은 심플하게 하기로 정하였다;;;

이번 다룰 주제는 ExtJS MVC 기반을 이용하여 간단? 회원관리 테이블을 만들어볼 예정이다.

해당 주제에서 핵심은 GRID를 통하여 DB에 대한 CRUD 기능을 모두 적용하는 것임.

전에는 GRID에 대하여 LIST 출력하는 내용만 기술하였는데 이번 프로젝트를 통해서 

CRUD를 모두 적용해보도록 하겠음. 

컴포넌트 설정 및 내용에 대하여는 이전 포스팅에 여러가지 올려놨으니 순서대로 차근차근 

보시는걸 추천드림.

우선적으로 웹소스 + DB 커넥션에 대한 설정은 제외 하도록 하겠음.

자 그럼 그리드를 이용한 CRUD 설명 GO!

CREATE TABLE member(  
  seq INT NOT NULL AUTO_INCREMENT COMMENT '회원번호',
  member_name VARCHAR(20) NOT NULL COMMENT '회원이름',
  member_birth VARCHAR(8) NOT NULL COMMENT '회원생년월일',
  member_mobile VARCHAR(11) NOT NULL COMMENT '회원연락처',
  create_date DATETIME NOT NULL COMMENT '등록일',
  PRIMARY KEY (`seq`)
) ENGINE=INNODB CHARSET=utf8;

화면의 mvc.js에서 변경된 것이 있다고 한다면  기존에는  controllers의 값을 

'MVCController'  -> 'MemberController' 이걸로 변경한것이 전부다.

name 명칭을 바꿔주면 cotroller/model/store/view에 대한 모든 define 명칭을 변경해주는것이 

귀찮아서 mvc로 냅둔상태...

자~ TABLE 도 생성했으니 1차적으로 MemberModel.js를 먼저 정의해두도록 하자

흐름방식을 model -> store -> view -> viewport -> controller 로 진행하는것이 수월할듯함... 

Ext.define('mvc.model.MemberModel', {
    extend: 'Ext.data.Model',
    fields: [
	    {name: 'seq', type: 'int'},
	    {name: 'member_name', type: 'string'},
	    {name: 'member_birth', type: 'string'},
	    {name: 'member_mobile', type: 'string'},
	    {name: 'create_date', type: 'date'}
	    /*{name: 'create_date', type: 'string'}*/
    ]
});

Ext.define('mvc.store.MemberStore', {
    extend: 'Ext.data.Store',
    model: 'mvc.model.MemberModel',
    autoLoad: true, 
    proxy: {
        type: 'ajax',
        api: {
        	// insert page
        	create : '/create',
        	// select page
        	read: '/list',
        	// update page
        	update : '/update',
        	// delete page
        	destroy : '/delete'
        },
        //select option
        reader: {
            type: 'json', 
            successProperty: 'success',
            rootProperty: 'items'
        },
        //create,update,delete option
       writer: {
	        type: 'json',
	        //그리드 row의 모든값 전송
	        writeAllFields: true,
	        //필수속성값
	        encode : true,
	        //server (request param id)
	        rootProperty: 'data'
	    }
    }
});

뭔가 드~~럽게 많이 추가되었다. 

예전 grid 페이징을 했을경우, proxy -> api가 read랑 proxy의 reader 속성만 다루었었는데

추가로 api의 속성들이 create / read / destroy 이 세개가 추가되었고 writer 라는 속성이 추가 

되었다.

이와같이 추가된 속성들은 insert / update / delete  db 처리 작업을 하기위하여 필요한 놈들이다 +_+ ㅋㅋㅋ

Ext.define('mvc.view.MemberGrid', {
    extend: 'Ext.grid.Panel',
    alias : 'widget.memberGrid',
    store : 'MemberStore',
    columns: [
   			  { 
				dataIndex : 'seq',
				text : '회원번호'			
			},
			{
				dataIndex : 'member_name',
				text : '회원이름',
				editor : 'textfield'
			},
			{
				dataIndex : 'member_birth',
				text : '생년월일',
				editor : 'textfield'					
			},
			{
				dataIndex : 'member_mobile',
				text : '연락처',
				editor : 'textfield'				
			},
			{
				dataIndex : 'create_date',
				text : '등록일',
				flex : 1
			}
    ],
    //그리드 컬럼을 수정하기위하여 필요한 ExtJS 관련 플러그인 {clicksToEdit: 1} << 제거후
    //수정하려면 컬럼 더블클릭해야함 해당옵션은 한번클릭으로 그리드 컬럼 수정가능
    plugins: [new Ext.grid.plugin.CellEditing({clicksToEdit: 1})],
    tbar : [
	    {
	    	//추가버튼
	    	xtype :'button',
	    	text : '추가',
	    	id : 'addBtn'
	    	
	    },
	    {
	    	//삭제버튼
	    	xtype :'button',
	    	text : '삭제',
	    	id : 'removeBtn'
	    	
	    },
	    {
	    	//적용버튼
	    	xtype :'button',
	    	text : '적용',
	    	id : 'syncBtn'
			
	    }
    ],
    initComponent: function() {
        this.callParent();
    }
});

Ext.define('mvc.controller.MemberController', {
    //기본상속
    extend: 'Ext.app.Controller',
    refs: [
       {
	        ref: 'memberGrid',
	        selector: 'memberGrid'
       }
	],
	stores : ['MemberStore'],
    views: ['MemberGrid'],
    init: function() {
        this.control({
        	//멤버그리드 컴포넌트내에 존재하는 버튼셀렉터
        	'memberGrid button' : {
        		//클릭이벤트 발생시 controller에 존재하는
        		//gridHandleButton 함수를 호출
        		click : this.gridHandleButton
        	}
        });
    },
    gridHandleButton : function(btn) {
    	//그리드 객체
    	var grid = this.getMemberGrid();
    	//그리드 -> 저장공간 객체
    	var gridStore = grid.getStore();
    	//그리드 행 추가버튼 클릭
    	if(btn.getId() == "addBtn") {
    		//membermodel
    		var rec = new mvc.model.MemberModel({
                seq: '',
                member_name : '',
                member_birth: '',
                member_mobile: '',
            	create_date: ''
            });
    		//store에 로우 추가
            gridStore.insert(0, rec);
            //에디트 시작포커스 잡기 (없으면 단순 로우만 추가)
            grid.plugins[0].startEditByPosition({
                row: 0,
                column: 1
            });
    	} else if(btn.getId() == "removeBtn") {
    		//그리드 로우 삭제
    		grid.getStore().remove(grid.getSelectionModel().getSelection());
    	} else if(btn.getId() == "syncBtn") {
    		//create,update,destroy 처리를 한다
    		grid.getStore().sync({
    			callback : function(){
    				//insert/update/delete 후에 리스트 재호출
    	    		grid.getStore().reload();		
    			}
    		});
    	}
    }
}); 

현 예제에서는 오류 관련은 다루지 않는다.

sync 일 경우 store에서 정의했던 create/update/destroy 속성을 각각호출한다.

한꺼번에 호출할수도 있는데 조금 복잡하므로 추후 시간이 나면 다루도록 하겠음

crud의 핵심은 store에 정의된 proxy url영역이고 컨트롤러의 store load/sync 함수이다!

list는 화면에 출력해주는 것이므로 reader -> rootProperty의 items가 response 해주는 

json root 객체인 셈이다.

db 호출후 서버에서 클라이언트로 응답해주는 json 객체의 json 문자열은 다음과 같다.

파싱관련은 본인이 사용하는 json object 생성 라이브러리를 이용하여 파싱해주도록 하자

// read url 호출시 list json객체
{
"items":
	[
		{"seq":"9","member_name":"333","member_birth":"333","member_mobile":"333","create_date":"2014-07-1623:20:35.0"},
		{"seq":"7","member_name":"11","member_birth":"11","member_mobile":"11","create_date":"2014-07-1623:20:22.0"}
	]
}

거꾸로 create/update/destroy에서 정해준 writer 속성의 rootProperty로 정해준 키값으로 서버

에서 데이터를 request 하게되면json 문자열로 파라미터를 받을수 있다.

writer의 rootProperty 값을 data 정의해준거면 서버에서 request.getParameter("data") 로 

받으면 다음처럼 데이터를 받을 수 있다.

//seq는 자동증가값이므로 입력할 필요없다 
// create_date 역시 null인대 쿼리문 자체에서 now()로 주므로 의미가 없다.
[
	{"seq":0,"member_name":"222","member_birth":"444","member_mobile":"555","create_date":null,"id":"mvc.model.MemberModel-4"},
	{"seq":0,"member_name":"111","member_birth":"333","member_mobile":"444","create_date":null,"id":"mvc.model.MemberModel-3"}
]

writer의 json 속성중 id 는 별의미 없다.

마지막으로 서버에서 가공해줘야 하는 순서는 다음과 같다.

1. 문자열 json을 json object 또는 json array 로 변경해주어야함 

2. json array 및 json object에 대하여 쿼리를 가공하여 db처리를 해준다.

   해당 샘플은 본인이 테스트로 만든 서버 로직이다. 

   (json-simple library 를 이용하였다)

////////////////////// "/create 호출 페이지" /////////////////////////

//object일수도 있고 array일수도 있다. object 변환후 json array에 담는다.
                JSONObject jsonObj = null;
		JSONObject jsonObject = null;
		JSONArray jsonArr = null;
		String data = request.getParameter("data");
		if(data.substring(0,1).equals("{")) {
			jsonObject = JSONObject.fromObject(JSONSerializer.toJSON(data));
			jsonArr = new JSONArray();
			jsonArr.add(jsonObject);
		} else if(data.substring(0,1).equals("[")) {
			jsonArr = JSONArray.fromObject(data);	
		}
		
		if(jsonArr.size() > 0){
			for(int i=0; i<jsonArr.size(); i++) {
				jsonObj = (JSONObject)jsonArr.get(i);
				String query = "";
				query += " INSERT INTO member(member_name,member_birth,member_mobile,create_date) ";
				query += " VALUES('"+jsonObj.get("member_name")+"','"+jsonObj.get("member_birth")+"','"+jsonObj.get("member_mobile")+"',now()) ";
				service.executeQuery(query);
			}
		}
		jsonObj = new JSONObject();
		jsonObj.put("success", true);
                PrintWriter pw = response.getWriter();
		pw.print(jsonObj);
		pw.flush();
		pw.close();

위와 같이 작업한결과 이상없이 동작하는것을 확인하였다.

영상으로 동작과정을 보고 마무리를 하도록 하겠음!!

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

"한줄기빛이내려왔다" 님께서 페이징 그리드가 느리다고 하셨길래 확인차 테스트 해보았음.

그리드 : 260.8 / 일반 테이블 리스트 : 281

결과적으로 네트워크 속도차이가 있고 그리드가 좀더 빨라보이긴 하지만 실질적으로 따지면 속도차이는 

눈에 보이지 않는다.

setTimeout은 사용하는 이유를 찾을수 없어서 제외하고 나머지 코드방식만 따라함.

어짜피 같은방식으로

1. var t = performance.timing; << onready전에 무조건 최상단 스크립트에서 전역변수로 호출하여 시작

2  console.log( "LOAD TIME: " + (t.loadEventEnd - t.navigationStart ) );

    일반 리스트의 경우는 onready상태일때 선언

    그리드의 경우는 load() 함수 호출후, callback 함수내에 선언

추가내용 : window.onload = function() {

 setTimeout( function() {

 var t = performance.timing;

 console.log( "LOAD TIME: " + (t.loadEventEnd - t.navigationStart ) );

}, 1000 );

     } 

이걸썼는데도 결과는비슷함

각 10번씩 테스트 한 다음의 결과이다.

결론적으로 별차이없음.

평균시간 : 260.8

평균속도 : 281

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!