저번에는 DB에서 정보를 받아와 JAVA에서 동적으로 HTML을 만들어 뿌려주는 방식을 사용했다면, 이번에는 DB에서 정보를 가져와 JS 딴에서 데이터를 처리해 뿌려주는 방식을 사용해봤다.

장단점이 있다면?

당연히 JAVA는 서버에서 동작하기에, 대량의 데이터를 자주 처리하게 되면 비효율적인 방법이라고 생각한다.

하지만 JS는 Client에서 동작되기 때문에 서버에 부담이 덜하다...

요즘 SPA을 알게된 이후로 JS에서 데이터를 처리하는 방식을 더 선호하게 되는것 같다.

그렇다면 어떻게 동적으로 처리했을까?

저번 내용과 동일하게 <ul>과 <li> 태그를 이용한 코드이나, 조금 더 복잡하다.

그렇기에 열리고 닫혀야 되는 부분이 명확해야 하고, Mark Up Language는 Stack 처럼 LIFO이기 때문에 Javascript의 Array 프로토타입에서 제공하는 push()와 pop()을 이용해 구현하였다.

코드는 아래와 같다.

  /* To make HTML for tree */
   drawTree : function(){
      var data = this.selectCode();	
      var list = data.getDataObject("DATA");	
      
      var step = 1;  // Depth value
      var stack = [];
      var scriptString = "";
      
      for(var i = 0; i < list.length; i++){
         /* In increasing */
         if(list[i].STEP > step){
            scriptString = scriptString.concat("<ul><li><a href=\'#\' onclick=\'Announcement.selectTableData("+list[i].D1+","+list[i].D2+");\'>"
            							, list[i].N1, "</a>\n");
            step = list[i].STEP;
            stack.push("</li></ul>");
         }
         /* Depth is the same or In decreasing */
         else{
            /* Same case */
            if(step == list[i].STEP){
               if(stack.length != 0) {
                  scriptString = scriptString.concat(stack.pop()+"\n");
               }
               if(step == 1){
                  scriptString = scriptString.concat("<li><strong>", list[i].N1, "</strong>\n")
                  stack.push("</li>");
               }else{
                  scriptString = scriptString.concat("<ul><li><a href=\'#\' onclick=\'Announcement.selectTableData("+list[i].D1+","+list[i].D2+");\'>" 
                  							, list[i].N1, "</a>\n");
                  stack.push("</li></ul>");
               }
            }
            /* Decreasing case */
            else{
               var size = step - list[i].STEP + 1;
               step = list[i].STEP;
               
               for(var j = 0; j < size; j++){ 
                  scriptString = scriptString.concat(stack.pop()+"\n");
               }
               
               if(step == 1){
                  scriptString = scriptString.concat("<li><strong>", list[i].N1, "</strong>\n")
                  stack.push("</li>");
               }else{
                  scriptString = scriptString.concat("<ul><li><a href=\'#\' onclick=\'Announcement.selectTableData("+list[i].D1+","+list[i].D2+");\'>" 
                  							, list[i].N1, "</a>\n");
                  stack.push("</li></ul>");
               }
            }
         }
      }
      if(stack.length != 0) {
         for(var i = 0; i < stack.length; i++){
            scriptString = scriptString.concat(stack.pop());            
         }
      }
      
      $("#tree").append(scriptString);
   }

코드가 굉장히 복잡해보인다...

복잡한 이유는 위 메서드는 Tree를 만들어주는 메서드이며, <li>태그 하나 하나 클릭할 때마다 selectTableData라는 메서드가 동작되어야 하기 때문에 복잡해 보일 수 있다.

무튼 저렇게 문자열로 붙여준 후 Jquery를 이용해 id가 tree인 태그를 가져와 append 해주는 방법을 사용하였다.

물론 다른 Tree를 그려야 할 때는 $("#tree").empty() 를 이용해 지워줘야한다.

그냥 이 코드를 기록으로 남기는 이유는...

알고리즘이나 자료구조 공부를 꾸준히 하지 않았다면 이때 Stack을 생각하지 못했겠지...

꾸준히 공부하자...!!

라는 의미로....