자바스크립트 대용량 데이터 처리 (게시판 관리자페이지 데이터 일괄 수정작업)

기능 구현상 (관리페이지) 

전체 게시판들의 속성값을 한꺼번에 설정하고 수정변경해야만 했다.

A게시판 - 읽기권한변경

B게시판 - 삭제

C게시판 - 숨김설정

D게시판 - 변경사항없음

E게시판  - 변경사항없음

F게시판  - 쓰기권한변경

G게시판 - 신규게시판생성

A~F까지의 메타데이터를 조회해서 클라이언트에 저장해둔다.(전역변수)

클라이언트에서 사용자의 동작에 따라 변경된 내용을 전역변수에 수정변경한다.

전역변수(수정된 게시판들의 메타데이터)를 서버로 넘겨 저장한다.

이때 각 게시판들이 Update가 되었는지, 신규로 Insert 되었는지, Delete 되었는지를 판단하고 각 비즈니스 로직을 탄다.

라고 생각한 뒤, 구현을 했다.

<관리페이지 상세>

jstree 플러그인으로 게시판목록을 그렸고

각 게시판목록을 클릭하면 우측의 설정template에서 속성을 변경할 수 있었다.

1. 메타정보를 전역에 저장

var o_array = {}; // 게시판 메타데이터 

,getBrdList : function(directoryCode){
		var _this = this;
		var params = {
				directoryCode : directoryCode
		}
		if($(".Listbox").find("#jstree").length < 1){
			$(".Listbox").empty().html("
");	
		}
		
		PubEP.req.ajax({
			type:"POST",
			url: ePortalConfig.boardContext+"/admin/getBrdList",
			data : params,
			dataType: "json",
			cache 	: false,
			loadSelector :  $(".selectbox").closest('.p_relative'),
			success : function(data){
				var items = data.items;
				var len = items.length;
				if(len > 0){  //기준데이타 insert
					$.each(data.items, function(i, item){
						o_array[item.id] = item; 
					});
				}
                           //가져온 데이터를 jstree를 통해 그리기


               ...생략

2. 관리자 수정 action시 데이터 저장

좌측의 게시판목록에서 특정 게시판을 클릭하여 수정할 수 있다.

클릭시 게시판 고유의 게시판코드를 가져와 해당 데이터를 수정한 값을 넣어준다.

중간소스들이 많이 생략되어 있지만....

수정할때(U), 생성되었을때(C), 삭제되었을때(D)

를 BRD_MODE라는 FLAG값을 두어 개발했다.

..생략

,setData : function(){
		var _this = this;
		
		var dataSet = {
				id          :		 _this.selectedBrd_Id //수정하고자 선택한 게시글코드를 그때그때 담아서 사용했다.
				//,parent     :        o_array[_this.selectedBrd_Id].parent
				,BOARD_NAME :        $("#"+_this.selectedBrd_Id+">a").text()
				,BOARD_TYPE :       'BRD'
				,BOARD_CODE :  		 $("#brdCode").val()
				,USE_YN     :        $(":input:radio[name='brdUseYN']:checked").val()
				,LIKE_YN    :     	 $(":input:radio[name='likeYN']:checked").val()
				,COMMENT_YN :   	 $(":input:radio[name='rplyYN']:checked").val()
				,FILE_YN    :        $(":input:radio[name='fileYN']:checked").val()
				,CHILD_CNT  :        o_array[_this.selectedBrd_Id].CHILD_CNT	
				,BRD_MODE   : 		 o_array[_this.selectedBrd_Id].BRD_MODE == 'C' ? 'C' : 'U'
				,PARENT_BOARD_CODE : $("#jstree").jstree().get_node(  _this.selectedBrd_Id ).parent
	                        // 파마리터 생략...
		}
		
                //template에서 수정한 값들을 기존 o_array에 담아두었던 자신의 게시판코드값에 새로 저장한다.
		o_array[_this.selectedBrd_Id] = dataSet;

3. 저장

수정된 o_array를 다시 서버로 전송한다.

,save : function(){
		var _this=this;
		var saveFlag = true;
		var resultArray = [];
		$.each(o_array,function(idx,value){
			//유효성체크, 파라미터체크 등의 로직이 있었음 (생략)
			resultArray.push(value);
		});
		
		if(saveFlag){
			$.ajax({
				type:"POST",
				url: ePortalConfig.boardContext+"/admin/saveBoardList",
				dataType: "json",
				data : "brdList="+ encodeURIComponent( JSON.stringify(resultArray) )+"&directoryCode="+_this.selectedDirectoryCode,
				cache 	: false,
				success : function(data){

4. 받은 request Data를 파싱하여 DB에저장

	public Map saveBoard(DataEntity param) {
		Map resultObject = new HashMap();
		List result = new ArrayList();
		String DIRECTORY_CODE = param.getString("directoryCode");
		try{
			String brdList = param.getString("brdList");
			JSONArray ja = new JSONArray(brdList) ;
			
			for ( int i = 0; i <= ja.length(); i++){
				JSONObject brdInfo = ja.getJSONObject(i) ;
				Map map = new HashMap();
				logger.debug("*************************************************************************");
				map.put("id", brdInfo.getString("id")); 						//게시판코드
				map.put("brdCodeFlag", brdInfo.getString("brdCodeFlag") );		//코드생성구분(자동생성,수동생성) //
				map.put("DIRECTORY_CODE", DIRECTORY_CODE);						//게시판디렉토리코드
				map.put("BOARD_CODE", brdInfo.getString("BOARD_CODE"));			//게시판코드(id와동일한값)
				map.put("BOARD_NAME", brdInfo.getString("BOARD_NAME"));			//게시판이름
				map.put("BOARD_ORD", brdInfo.getString("BOARD_ORD"));			//게시판순서
				map.put("USE_YN", brdInfo.getString("USE_YN"));					//게시판상태(공개,비공개)
				map.put("BOARD_TYPE", brdInfo.getString("BOARD_TYPE"));			//게시판타입
				map.put("FILE_YN", brdInfo.getString("FILE_YN"));				//첨부파일사용설정
				map.put("COMMENT_YN", brdInfo.getString("COMMENT_YN"));			//댓글사용설정
                                .....일부 생략
                                
				
				/*모드에따라 실행*/
				String brdMode = brdInfo.getString("BRD_MODE");
				
				if( "U".equals(brdMode) ){
                                     //update dao 호출
                                 }else if( "C".equals(brdMode) ){
                                     //insert dao 호출
                                 }else if("D".equals(brdMode)){
                                    //delete dao 호출
                                 }

5. 문제?

예제 경우 1~2Depth의 게시판들을 모아봤자 20개정도의 데이터밖에 되지 않지만

팀별게시판 경우 사용자조직별로 게시판들이 전부 생성되어 있어서

관리자가 수정을 할 경우, 몇만건의 데이터를 수정한뒤 서버로 보내고 처리해야 했기에 

환경적으로 성능이 좋아도 화면에서부터 많이 버벅되고 시간소요가 상당했다.

........어떻게 해결해야 좋을까?

는 생각중 ㅠㅠ

좋은방법 있으면 댓글로 알려주세요 ㅠㅠ