프로젝트 중 가장 어려웠던 작업 메뉴 작업에 대한 리뷰다.
나에게 메뉴는 잊을 수 없는 개발이였다.
리뷰 시작하자
본사메뉴
지점메뉴
사용자에 권한에 따라 메뉴구성이 달라지는 메뉴다.
테이블에 칼럼은 메뉴번호,상위메뉴번호,메뉴이름,정렬순서,삭제여부,깊이,서브메뉴 여부,메뉴주소
쿼리
--본사메뉴 순서 뽑아오기--
SELECT DISTINCT SM.SITE_MENU_NO,TOP_SITE_MENU_NO,SM.SITE_MENU_NAME,SM.ARR_SEQ,SM.DEPTH,SMA.AUTH_CODE,A.AUTH_NO,SM.SUB_MENU_FLAG as sub,SM.MENU_ADDR AS MADDR
FROM SITE_MENU SM INNER JOIN SITE_MENU_AUTH SMA
ON SM.SITE_MENU_NO = SMA.SITE_MENU_NO
AND SM.SITE_MENU_NO BETWEEN 1 AND 13
AND SMA.AUTH_CODE IN (1,2)
INNER JOIN AUTH A
ON A.AUTH_NO = SMA.AUTH_NO
WHERE A.AUTH_NO = 0
START WITH SM.DEPTH = 1
CONNECT BY PRIOR SM.SITE_MENU_NO =SM.TOP_SITE_MENU_NO
ORDER BY SM.ARR_SEQ ASC
;계층형 쿼리를 하면서 처음써보는 START WITH, CONNECT BY 에 잠깐 설명하고 간다.
계층형 쿼리란?
계층형 구조는 상하 수직관계의 트리형태의 구조로 이루어진 형태를 말합니다. 예를 들자면 특정회사의 부서, 특정학교의 학과등이 있습니다. 계층형 쿼리는 테이블에 저장된 데이터를 계층형 구조로 반환하는 쿼리를 말합니다. 오라클에서의 계층형 쿼리는 START WITH ... CONNECT BY 절로 생성할 수 있으며 계층형 정보를 표현하기 위한 목적으로 오라클 8부터 지원되었습니다.
출처 :https://coding-factory.tistory.com/461
-
START WITH : 말그대로 어디서 부터 시작할지 정하는 것이다. 그래서 보통 최상위 행을 넣습니다. 저의 경우에는 상위메뉴인 뎁스번호 1이 들어갔습니다.
-
CONNECT BY: 연결고리를 가지는 목록가져옵니다. 사실 무슨말인지 이해하기 어려워서 더욱 자세히 이야기 해볼게요. 저도 하면서 이해가 안됐었습니다. 당연한거에요 개발 배우면서 쉬운게 하나도 없잖아요?? 사실 ㅋㅋ 간단하게 말해서 각행이 어떻게 연결되는지 알려주는 역활입니다.
저의 경우인 메뉴를 예들 들어서 설명하자면
SITE_MENU_NO = TOP_SITE_MENU_NO는 사이트 메뉴 번호 필드가 TOP_SITE_NO 필드로 존재하는 자식을 찾아 관계를 맺는다는 의미입니다.
결과
그다음은 이제 나온 쿼리결과를 가지고 페이지에서 그려주기만 하면된다. 물론 조건에 맞게 뽑아야기 때문에 이틀 정도 진짜 고생했다. 부족한...나의실력 때문이다.
//메뉴 그리기
function drawMenu(menu){
var html = "";
// " + + "
html += "<div class=\"logo_area\">";
html += " <img class=\"logo\" alt=\"logo\" src=\"resources/images/bb/logo.png\" width=\"250px\">";
html += " </div>";
for(var i =0; i < menu.length; i++){
//메뉴 1뎁스 이면서 하위메뉴가 없는 경우
if(menu[i].DEPTH == 1 && menu[i].SUB == 1){
if(menu[i].SITE_MENU_NO == "${param.menuno}"){
html += "<div class=\"menu1_wrap_on\" menuno=\"" + menu[i].SITE_MENU_NO + "\" addr = \""+menu[i].MADDR + "\">";
}
else{
html += "<div class=\"menu1_wrap\" menuno=\"" + menu[i].SITE_MENU_NO + "\" addr = \""+menu[i].MADDR + "\">";
}
html +=" <div class=\"menu1_title\">";
html += "<div class=\"menu_depth1\" menuno=\"" + menu[i].SITE_MENU_NO + "\">" + menu[i].SITE_MENU_NAME + "</div>";
html += "</div>";
}
//메뉴 1뎁스 이면서 하위메뉴가 있는 경우
else if(menu[i].DEPTH == 1 && menu[i].SUB == 0){
if(menu[i].SITE_MENU_NO == "${param.menuno}"){
html += "<div class=\"menu1_wrap_on\" menuno=\"" + menu[i].SITE_MENU_NO + "\" addr = \""+menu[i].MADDR + "\">";
}
else{
html += "<div class=\"menu1_wrap\" menuno=\"" + menu[i].SITE_MENU_NO + "\" addr = \""+menu[i].MADDR + "\">";
}
html +=" <div class=\"menu1_title\">";
html += "<div class=\"menu_depth1\" menuno=\"" + menu[i].SITE_MENU_NO + "\">" + menu[i].SITE_MENU_NAME + "</div>";
html += "</div>";
for(var j = menu.length -1; j > i; j--){
if(menu[i].SITE_MENU_NO == menu[j].TOP){
if(menu[j].DEPTH == 2){
html +="<div class=\"menu2_wrap\" menuno=\"" + menu[j].SITE_MENU_NO + "\" addr = \""+menu[i].MADDR + "\">";
}
html += "<div class=\"menu2_title\">";
html += "<div class= \"menu_depth2_area \">";
if(menu[i].SITE_MENU_NO == 2 && $("#Dt").val() == "0"){
html += "<div class=\"menu_depth2\" menuno=\"" + menu[j + 1].SITE_MENU_NO + "\" addr = \""+menu[j+1].MADDR + "\">" + menu[j-1].SITE_MENU_NAME + "</div>";
html += "<div class=\"menu_depth2\" menuno=\"" + menu[j].SITE_MENU_NO + "\" addr = \""+menu[j].MADDR + "\">" + menu[j].SITE_MENU_NAME + "</div>";
}
else if(menu[i].SITE_MENU_NO == 2 && $("#Dt").val() != "0" ){
html += "<div class=\"menu_depth2\" menuno=\"" + menu[j].SITE_MENU_NO + "\" addr = \""+menu[j].MADDR + "\">" + menu[j].SITE_MENU_NAME + "</div>";
}
else if(menu[i].SITE_MENU_NO == 5){
html += "<div class=\"menu_depth2\" menuno=\"" + menu[j-2].SITE_MENU_NO + "\" addr = \""+menu[j-2].MADDR + "\">" + menu[j-2].SITE_MENU_NAME + "</div>";
html += "<div class=\"menu_depth2\" menuno=\"" + menu[j-1].SITE_MENU_NO + "\" addr = \""+menu[j-1].MADDR + "\">" + menu[j-1].SITE_MENU_NAME + "</div>";
html += "<div class=\"menu_depth2\" menuno=\"" + menu[j].SITE_MENU_NO + "\" addr = \""+menu[j].MADDR + "\">" + menu[j].SITE_MENU_NAME + "</div>";
}
html += "</div>";
html += "</div>";
html += "</div>";
html +="</div>";
}
}
}
html +="</div>";
}일단 처음 조건으로 상위메뉴이면서 서브메뉴가 있는 메뉴 와 없는 메뉴로 나뉘었고, 서브 메뉴 중에서 특정 조건을 충족시에만 서브메뉴가 나오게 추가적으로 조건을 걸어서 완성했다.
완성한 다음에는 임포트를 사용해서 팀원들이 작업한 부분을 합쳤다.
<c:import url="H_Menu.jsp">
<c:param name="menuno" value="9"></c:param>
</c:import>이렇게 연결해서 사용했다.
프로젝트를 하면서 처음해 본 계층형 쿼리, 정말 오랜작업이였고, 쉽지 않았다. 완성하지 못할까봐 엄청 스트레스 받았었고, 팀원들과 협업과정에서 꼭 필요한 요소이기 때문에 심리적인 압박도 있었던 것 같다.
포기하지 않고 계속 시도했기에 완성할 수 있었다고 생각한다.
