4장. Parameter 기반 개발

다보리 파라메터의 개념

다보리 파라메터란?

다보리 파라메터는 쿼리를 호출하여 내가 필요한 데이터를 불러오긴 위한 여러 요소들이 압축되어 있는 json 파일입니다.

이 파라메터를 다양한 구조로 구성하여 쿼리를 호출할 수 있습니다. 또한 view 페이지의 css적인 요소나 boolean 요소 등등 다양한 것들을 지정할 수 있습니다.

 

다보리 컴포저블에서는 모든 데이터에 대한 접근을 이 파라메터를 통해 이루어지고 있으며 통상적으로 사용하는 표준 para가 있고 theme에서 사용되는 para가 있습니다.

para의 경로는 프로젝트 '/' 경로를 기준으로 다음과 같습니다.

표준 pra : /dabory/para/ko_KR/{$type}/{$filePath}.json 

테마 para : /dabory/themes/$theme/$theme_type/para/ko_KR/{$type}/{$filePath}.json

$theme = 테마명
$theme_type= pro or erp
$type = request or response
$filePath = 세부경로 + 파일명
표준이던 테마던 모두 큰 틀에서 같은 구조를 가지고 있기 때문에 이 파라메터의 구조를 파악하는 것이 중요합니다.

파라메터의 구조

{
    "//list-type-1": "simple and plain list by query of table join",

    "General": {
        "Title": "Crawling Domains",
        "PageApi": "list-type1-page",
        "ActApi": "domain-act"
    },

    "QueryVars": {
        "QueryName": "pro/my-app/dbr-main/domain-input",
        "FilterName": "",
        "FilterValue": "",
        "FilterDate": "domain_date"
    },

    "HeadSelectOptions": [
        {
            "Value": "new",
            "Caption": "레코드 추가"
        },
        {
            "Value": "multi-delete",
            "Caption": "일괄 삭제"
        },
        {
            "Value": "clear-all-filter",
            "Caption": "초기화"
        }
    ],

    "//FormVars": "FormVars[0]-caption, FormVars[1]-searchPopup",
    "FormVars": [
        {
            "ListButton": "조회",
            "DateRange": "",
            "DateNavi": "일자방향(오늘)",
            "Date": "날짜",
            "From": "부터",
            "To": "까지",
            "FirstRange": "",
            "SecondRange": "",
            "ThirdRange": "",
            "FourthRange": "",
            "AddTotalLine": "",
            "SelectPopup": "",
            "MultiPopup": "",
            "ChartPopup": "",
            "DownloadList": "",
            "ShowOnlyClosed": "",
            "Balance": "",
            "OrderBy": "표시 순서",
            "FilterOption": "검색조건",
            "SimpleOption": "상태별 검색"
        }
    ],

    "FilterSelectOptions": [
        {
            "Value": "",
            "Caption": "=검색 조건="
        },
        {
            "Value": "mx.domain_url",
            "Caption": "Domain URL"
        },
        {
            "Value": "mx.solution_code",
            "Caption": "Solution Code"
        },
        {
            "Value": "mx.search_tool",
            "Caption": "Search Tool"
        }
    ],

    "SimpleSelectOptions": [
        {
            "Value": "",
            "Caption": "전체"
        },
        {
            "Value": "mx.status='0'",
            "Caption": "Waiting"
        },
        {
            "Value": "mx.status='1'",
            "Caption": "Confirmed"
        },
        {
            "Value": "mx.status='2'",
            "Caption": "GivingUp"
        },
        {
            "Value": "mx.status='9'",
            "Caption": "Exception"
        }
    ],

    "//ListType1RangeVars": "[0]-filter, [1]-component, [2]-parameter",
    "ListType1RangeVars": [
        {
            "FirstRange": "",
            "SecondRange": "",
            "ThirdRange": "",
            "FourthRange": ""
        },
        {
            "FirstRange": "",
            "SecondRange": "",
            "ThirdRange": "",
            "FourthRange": ""
        },
        {
            "FirstRange": "",
            "SecondRange": "",
            "ThirdRange": "",
            "FourthRange": ""
        }
    ],

    "// DateRangeOptions": "월:현재월의 1~30, 분기: 현재분기의 첫째월 1일 ~ 마지막월의 말일, 반기/년 동일한 컨셉,전체:1990~3000",
    "DateRangeOptions": [
    ],

    "DateNaviOptions": [
        {
            "Value": "day",
            "Caption": "일"
        },
        {
            "Value": "week",
            "Caption": "주"
        },
        {
            "Value": "month",
            "Caption": "월"
        },
        {
            "Value": "quarterly",
            "Caption": "분기"
        },
        {
            "Value": "year",
            "Caption": "년"
        },
        {
            "Value": "all",
            "Caption": "전체"
        }
    ],

    "SelectPopupOptions": [

    ],

    "// OrderByOptions": "OrderBy Options//첫번째 Value가 Default",
    "OrderByOptions": [
        {
            "Value": "mx.domain_url asc",
            "Caption": "도메인 순서"
        },
        {
            "Value": "mx.solution_code asc",
            "Caption": "솔루션 순서"
        }
    ],

    "//BalanceOptions": "Show OnlyBalaceRemained or All",
    "BalanceOptions": [
        {
            "Value": "",
            "Caption": "전체 보기"
        },
        {
            "Value": "c10 > 0",
            "Caption": "잔량있는 것만"
        }
    ],

    "DisplayVars": {
        "IsListFirst" : true,
        "IsExcelColumn" : false,
        "InitLines" : 15,
        "HeadHeight": "130",
        "InitDateRange" : "all",
        "IsC1Popup": "1",
        "BodyHeight": "680"
    },

    "// ListVars": "ListVars[0]-caption, ListVars[1]-size(px), ListVars[2]-align->right(number) left(left)",
    "ListVars": [
        {
            "$Radio": "$Radio",
            "$Check": "$Check",
            "No": "No",
            "C1": "Domain URL*",
            "C2": "Host Hash",
            "C3": "Domain Date",
            "C4": "Owner Name",
            "C5": "Solution Code",
            "C6": "OwnerFile",
            "C7": "EncryptKey",
            "C8": "DbrHub URLs",
            "C9": "TimeZone",
            "C10": "크롤링 상태",
            "C11": "Aggreg Hash",
            "C12": "Status"
        },
        {
            "$Radio": "5",
            "$Check": "5",
            "No": "5",
            "C1": "20",
            "C2": "15",
            "C3": "15",
            "C4": "20",
            "C5": "15",
            "C6": "10",
            "C7": "10",
            "C8": "10",
            "C9": "10",
            "C10": "10",
            "C11": "10",
            "C12": "10"
        },
        {
            "$Radio": "center",
            "$Check": "center",
            "No": "center",
            "C1": "left",
            "C2": "center",
            "C3": "center",
            "C4": "center",
            "C5": "center",
            "C6": "center",
            "C7": "center",
            "C8": "center",
            "C9": "center",
            "C10": "status('crawled')",
            "C11": "center",
            "C12": "status('domain')"
        }
    ]
}

각각의 요소에 대한 설명
1. General
Title : 타이틀명
PageApi : page api명, 해당 list-type-1 데이터를 페이지네이션하여 요청할 수 있습니다
ActApi : act api명, 해당 list-type-1 데이터를 insert, update, delete 할 수 있습니다.
이부분이 이해가 안가신다면 아래 링크를 통해 PAP API에 대해 이해하고 오시면 좀 더 빠른 파악이 가능합니다.

PAP api

링크


2. QueryVars -> 쿼리 제어 파라메터
해당 파라메터를 통해 초기설정된 db 서버에 접근하여
QueryName과 일치하는 경로의 쿼리를 실행하여 결과를 반환할 수 있습니다.
QueryName : sql 파일명
FilterName : 쿼리의 기준 컬럼명
FilterValue : FilterName에서 입력한 컬럼의 입력할 값
FilterDate : 정렬 기준 날짜 데이터 혹은 기준 날짜 컬럼
-> WHERE FilterName like '%FilterValue%' 과 같은 형태로 쿼리에 추가됩니다.
-> WHERE column = 'value' 와 같은 형태로 쿼리를 조회하고 싶다면
SimpleFilter : "column='value'"를 사용하시면 됩니다.
  
3. 명칭 + Options -> 각 option별 key : value 형식
Value : option의 value값
Caption : option명
     
4. FormVars -> 폼 제어 파라메터
-> 해당 폼에 직접적으로 보여지는 부분입니다.
FormVars[0]-caption, FormVars[1]-format",
"key" : "value" 형

7. ListType1RangeVars -> ListType1 제어변수
[0]-filter, [1]-component, [2]-parameterFirstRange
FirstRange : 
SecondRange : 
ThirdRange : 
FourthRange : 
      

12. DisplayVars   -> 디스플레이 제어 파라메터
IsListFirst : 첫번째 리스트인지 여부
IsExcelColumn : 엑셀컬럼인지 여부
InitLines : 호출한 라인인지 여부
HeadHeight : 헤드의 높이
InitDateRange :  날짜범위 호출여부
IsC1Popup :  C1 팝업 여부
BodyHeight : 바디의 높이

DisplayVars   이부분도 LT1을 구성하는데 굉장히 중요한 요소입니다.
* diplay의 형식에 따라 다른 파라메터를 사용


13. ListVars -> 리스트 제어 파라메터
ListVars[0] - > caption(메뉴명)
ListVars[1] -> size(px) 
ListVars[2] -> align->right or left or center


ListType1 파라메터의 이해와 사용법


다보리 파라메터 중 가장 많이 사용하는 ListType1 파라메터의 예시

다음은 새로운 LT1을 추가하는 방법입니다.

image.png

먼저 erp 페이지의 슈퍼유저메뉴 -  바둑판 불러오기 메뉴를 통해 파라메터 명을 확인합니다.

혹은 dbr_user_menu에서 para_name을 확인확인할 수 있습니다. 파라메터명을 확인했다면 

페이지의 소스에서 list-type1 디렉토리 내 para_name에 해당하는 경로의 json 파일을 똑같이 복사하여 붙여넣습니다.

예를들어 para_name이 /list/list-type1/dowonload/menu/sort-menu 라면 /list/list-type1/dowonload/menu/ 경로로 이동하여

sort-menu.json 파일을 복사하여 같은 경로에 붙여넣고 네이밍을 해줍니다.

weberp-queries에서도 동일한 경로로 이동하여 

해당 페이지 메뉴에서 보여주고 싶은 데이터, 엑셀 다운로드 데이터를 C1~C20까지 순서대로 넣습니다.

image.png

쿼리 작성이 끝났다면 방금 만들어줬던 쿼리와 동일하게 새로 만들어준 json 파일의 파라메터도 수정해줍니다.

image.png

마지막으로 쿼리를 실행하기 위래 QueryName을 입력해줍니다.

image.png

이제 다시 웹으로 가서 바둑판 메뉴 불러오기를 하면 새로 추가한 list를 확인할 수 있습니다.

파라메터를 통해 쿼리 확인하는 방법

api test tool을 이용하여 파라메터로 요청을 보내고 서버에 호출된 쿼리를 확인할 수 있습니다.

예제에서는 vscode의 Thunder Client를 사용했습니다.

kbgolf theme의 커스터마이징 쿼리를 QueryName으로 넣고 테스트해보겠습니다.

요청을 보내기 위해서는 해당 db에 접근할 GateToken이 필요합니다.

프로젝트 루트 경로에 .env.dabory 파일에서 MAIN_API_URL, MAIN_API_CLIENT_ID, MAIN_API_BEFORE_BASE64를 복사해둡니다.

kbgolf는 dbr02 서버에 설치되어 있기 때문에 http://13.124.2.254:18080 로 요청하겠습니다.

참고사항

서버에서 게이트토큰 받아오기

위 참고사항을 체크하고 게이트토큰을 획득합니다.

이제 이 게이트토큰을 이용하여 dbr02 서버에 쿼리를 요청할겁니다.

MAIN_API_URL 뒤에 요청을 보낼 url을 입력합니다. 일반적으로 파라메터별로
General 요소 안 pap api가 명시되어 있는데 이부분이 url입니다.

예제에서 요청을 보낼 url은 다음과 같습니다.
http://13.124.2.254:18080/list-type1-page

headers에 획득한 GateToken을 추가해줍니다.

image.png

Body 부분입니다.

image.png

필요한 부분만 작성한뒤 post로 요청을 보냅니다.

image.png

위와 같이 요청한 쿼리를 반환하고 있습니다.

파라메터를 이용한 head/body 복사

head 복사 구현하기

파라메터를 이용하여 sorder의 head와 body를 복사하는 방법을 명시합니다.

예제에서는 sorder(수주)로 테스트를 진행하겠습니다.


 필요한 사항

1. 파라메터에 대한 전반적인 이해도

2. JavaScript에 대한 기초적인 이해도

3. API에 대한 이해도


1. 수주리스트의 파라메터인 sorder.json을 살펴보겠습니다.

{
    "General": {
        "Title": "수주등록",
        "PickApi": "slip-form-book",
        "ActApi": "sorder-act"
    },


    "QueryVars": {
        "QueryName": "sales/sorder"
    },


    "HeadSelectOptions": [
        {
            "Value": "new",
            "Caption": "추가",
            "Parameter": ""
        },
        {
            "Value": "save-and-new",
            "Caption": "저장 후 추가",
            "Parameter": ""
        },
        {
            "Value": "copy-to-another",
            "Caption": "수주에서 수주로 복사(-)",
            "Parameter": "sales/sorder-sorder"
        },
        {
            "Value": "copy-to-another",
            "Caption": "매입 가격표에서 수주로 복사(-)",
            "Parameter": "purch/pquote-sorder"
        },
        {
            "Value": "copy-to-another",
            "Caption": "견적에서 수주로 복사",
            "Parameter": "sales/squote-sorder"
        },
        {
            "Value": "delete",
            "Caption": "삭제",
            "Parameter": ""
        }
    ],


    "StatusOptions": [
        {
            "Value": "확정",
            "Caption": "확정"
        },
        {
            "Value": "취소",
            "Caption": "취소"
        }
    ],


    "BodySelectOptions": [
        {
            "Value": "body-copy",
            "Caption": "수주에서 수주로 품목 복사(-)",
            "Parameter": "sales/sorder-sorder"
        },
        {
            "Value": "body-copy",
            "Caption": "견적에서 수주로 품목 복사(-)",
            "Parameter": "sales/squote-sorder"
        },
        {
            "Value": "multi-delete",
            "Caption": "품목 일괄 삭제",
            "Parameter": ""
        },
        {
            "Value": "multi-update",
            "Caption": "품목 일괄 수정",
            "Parameter": ""
        }
    ],


    "//FormVars": "ListVars[0]-Caption",
    "FormVars": [
        {
            "SaveButton": "저장",
            "AddNewBdButton": "품목 추가",
            "AutoSlipNo": "수주번호(자동채번)*",
            "Date": "수주일자*",
            "Buyer": "매출업체*",
            "BuyerContact": "업체담당자",
            "DealType": "거래구분*",
            "VatType": "부가세*",
            "VatTypeRate": "부가세율",
            "Status": "상황",
            "Delivery": "납품기한",
            "PayTerms": "지불조건",
            "Destination": "납품장소",
            "IsClosed": "종결",
            "SgroupName": "영업부서*",
            "UserName": "입력사용자*",
            "Remarks": "비고"
        },
        {
            "SaveButton": "left",
            "AddNewBdButton": "left",
            "AutoSlipNo": "left",
            "Date": "left",
            "Buyer": "left",
            "BuyerContact": "left",
            "DealType": "left",
            "VatType": "left",
            "VatTypeRate": "left",
            "Status": "left",
            "Delivery": "left",
            "PayTerms": "left",
            "Destination": "left",
            "IsClosed": "left",
            "SgroupName": "left",
            "UserName": "left",
            "Remarks": "left"
        },
        {
            "SaveButton": "0",
            "AddNewBdButton": "20",
            "AutoSlipNo": "20",
            "Date": "20",
            "Buyer": "20",
            "BuyerContact": "20",
            "DealType": "20",
            "VatType": "20",
            "VatTypeRate": "20",
            "Status": "20",
            "Delivery": "20",
            "PayTerms": "20",
            "Destination": "20",
            "IsClosed": "0",
            "SgroupName": "20",
            "UserName": "20",
            "Remarks": "0"
        },
        {
            "SaveButton": "",
            "AddNewBdButton": "",
            "AutoSlipNo": "required",
            "Date": "required",
            "Buyer": "required",
            "BuyerContact": "",
            "DealType": "required",
            "VatType": "required",
            "VatTypeRate": "",
            "Status": "",
            "Delivery": "",
            "PayTerms": "",
            "Destination": "",
            "IsClosed": "",
            "SgroupName": "required",
            "UserName": "required",
            "Remarks": ""
        }
    ],
    "// ListVars": "ListVars[0]-Caption, ListVars[1]-Size(%), ListVars[2]-align",
    "ListVars": [
        {
            "$Radio": "",
            "$Check": "$Check",
            "ItemCode": "품목코드*",
            "ItemName": "품명*",
            "SubName": "서브명#",
            "CountUnit": "단위#",
            "SorderQty": "수주수량*",
            "SorderPrc": "수주단가*",
            "SupplyAmt": "공급가액*",
            "VatAmt": "세액*",
            "SumAmt": "합계금액*",
            "CurrSalesPrc": "매출가#",
            "ConfirmDate": "요청납기일",
            "DeliDate": "확정납기일*",
            "Ref1": "참고1",
            "Ref2": "참고2",
            "SorderMemo": "품목설명(M)"
        },
        {
            "$Radio": "",
            "$Check": "3",
            "ItemCode": "10",
            "ItemName": "30",
            "SubName": "10",
            "CountUnit": "5",
            "SorderQty": "10",
            "SorderPrc": "10",
            "SupplyAmt": "10",
            "VatAmt": "10",
            "SumAmt": "10",
            "CurrSalesPrc": "10",
            "DeliDate": "12",
            "ConfirmDate": "12",
            "Ref1": "15",
            "Ref2": "15",
            "SorderMemo": "10"
        },
        {
            "$Radio": "",
            "$Check": "center",
            "ItemCode": "left",
            "ItemName": "left",
            "SubName": "left",
            "CountUnit": "center",
            "SorderQty": "decimal('sales_qty')",
            "SorderPrc": "decimal('sales_prc')",
            "SupplyAmt": "decimal('sales_amt')",
            "VatAmt": "decimal('sales_amt')",
            "SumAmt": "decimal('sales_amt')",
            "CurrSalesPrc": "decimal('sales_prc')",
            "DeliDate": "right",
            "ConfirmDate": "right",
            "Ref1": "right",
            "Ref2": "right",
            "SorderMemo": "right"
        }
    ],
    "FooterVars": [
        {
            "StorageName": "창고",
            "BranchName": "점포명",
            "QtyTotal": "수량 합계",
            "SupplyTotal": "공급가액 소계",
            "VatTotal": "부가세액 소계",
            "SumTotal": "합계액 소계"
        }
    ]
}