안녕하세요 레스트풀 서버를 이용하여 웹페이지 제작을 하고 있는 초보 개발자입니다.

저의 홈페이지 방식에대해서 자문을 구하고자 글을 올립니다.

메인페이지의 태그와 서버에서 게시판 자료를 가져오는 스크립트는 아래와 같습니다.

<!-- 메인페이지 시작-->
<div id="wrap">
   <nav>
      <ul id="navigation">
         <li class="active" >게시판</li>
         <li>지도 </li>
         <li>링크3</li>
         <li>링크4</li>
      </ul>
   </nav>
   <div id="contents">
      <div id="contents_title">
      </div>
      <div id="contents_main">
      </div>
   </div>
</div>

<!-- 메인페이지 끝-->

<script>
//서버에서 게시판 데이터를 가져와서 테그를 생성 후 뿌려줌 //
function getBoardList(){
    $.ajax({      
      type:"GET",  
      url: board_url + "total/10/limit/0/format/json" ,      
      success: function(args){
         var table_html = "<tr ><th>ID</th><th>작성자</th><th>제목</th><th>생성시간</th></tr>"; 
         for(var i = 0; i < 10; i++){
            table_html += "<tr onmouseup='getBoard("+args[i].id+")'><td>"+args[i].id+"</td><td>"+args[i].name+"</td><td>"+args[i].title+"</td><td>"+args[i].becreated+"</td></tr>"
         }
         $("#contents_main").html(table_html);
      },
      error: function(){ alert("error"); },
   });  
}
</script>

저의 홈페이지의 방식은 스크립트로 서버에서 데이터를 가져와 태그를 생성 후 <div class="contents"> </div> 부분에 삽입하는게 저의 홈페이지 방식입니다.

위에 스크립트로 실행하면 게시판 내용이 <div class="contents_main"> </div>  부분에 삽입이 됩니다.

그 후 맨위의 탭(네이게이션  바)에 지도를 클릭하면  <div class="contents_main"> </div> 부분의 안에 있는 내용을 전부 삭제하고 지도태그를 만드는 펑션을 실행하여 집어 넣습니다.

이게 저의 홈페이지 방식인데 이방식으로 하려니까 약간 코드가 어지럽고 유지보수가 어려울 것같다는 생각이 들어서 중단하고 고수님들이 만드는 방식은 어떠한지 자문을 구하려고 합니다.

이방식이 괞찬은지 알고 싶고 만약 아니면 어떠한 방식으로 하는게 옳은 건지 알고 싶습니다.

방식에 정답은 없지만 그래도 좀더 낳은 방식으로 하고 싶은 욕심이 생겨서요..

고수님들의 따듯한 조언 부탁드리겠습니다!