커스텀 컴포넌트 만들기

페이지 빌더를 위한 커스텀 컴포넌트를 만들기 위해서는 먼저 순수하게 Vue 컴포넌트를 만들어서 테스트를 진행한 다음 문제가 없으면 코어에 컴포넌트를 등록하면 된다. 이때, 만약 작성한 컴포넌트가 props 를 통해서 특정 데이터를 받아야 한다면 해당 데이터를 모델을 코어의 스키마로 작성하고, 컴포넌트 설정에 해당 스키마를 매핑하면 빌더에서 해당 컴포넌트에 대한 파라미터를 설정할 수 있으며, 해당 데이터는 props로 연결된다.

Vue 컴포넌트 만들기

빌더를 위한 컴포넌트 개발은 일반적인 Vue 컴포넌트 개발과 동일하게 진행하면 된다. 이때 현재의 커스텀 컴포넌트의 위치는 src/components/builder 하위이다.

일반적으로 컴포넌트 개발이 완료되어 해당 컴포넌트에 대한 테스트까지 완료되면 빌더용 컴포넌트로 등록하는데 이때 코어에서 컴포넌트를 등록할때 사용할 컴포넌트의 ID와 실제 Vue 컴포넌트의 위치를 매핑한다.

컴포넌트 ID 매핑 : builder.collection.js 에
[componentId('new-component')]: registerComponent(() => import('./newComponent'))
와 같은 형태로 작성한다.

코어에 컴포넌트 설정 등록

일반적으로 코어에 foComponentData.json 이라는 파일명으로 컴포넌트가 선언되어 있다. src/main/resources/schema/lg/builder/foComponentDate.json 참조

기존 선언된 JSON과 동일하게 다음과 같이 componentId를 앞서 매핑한 컴포넌트 ID를 이용하여 다음과 같은 형태로 작성하여 해당 파일에 추가한다.

{
  "typeId": "foComponent",
  "componentId": "new-componet",
  "thumbnail2": "",
  "apiUsing": [],
  "componentName": "새로운 컴포넌트",
  "componentCategory": 1900,
  "description": "새로운 컴포넌트",
  "componentPropClass": "mainProp",
  "childrenAcceptable": false,
  "acceptableComponents": "",
  "acceptComponentsAll": false,
  "thumbnail": ""
  "orderNo": 999
},

props 전달 스키마 설정

신규 개발 컴포넌트에 빌더에서 입력한 설정 데이터를 props를 통해서 전달 받고 싶으면 전달하고 싶은 데이터에 대한 스키마를 정의해야한다. (스키마 설정은 https://ionsdp.atlassian.net/wiki/spaces/JUS/pages/64913409 문서 참조)

만약 새로 작성한 컴포넌트에 대해서 특정 문자열을 받아서 컴포넌트의 타이틀로 이용하고 컴포넌트 유형을 받아서 컴포넌트 UI를 변경하고 싶다면 다음과 같은 순서로 작업한다.

title 항목을 설정할 수 할 수 있는 스키마를 newComponentPropSchema.json 으로 다음과 같이 정의

[
  {
    "parentId": "foComponentProp",
    "typeId": "nodeType",
    "tid": "newComponentProp",
    "typeName": "새 컴포넌트 설정",
    "repositoryType": "node",
    "microservice": "frontoffice",
    "standaloneIndex": fale,
    "targetGroup": "foComponentProp",
    "propertyTypes": [
      {
        "pid": "id",
        "name": "ID",
        "valueType": "INT",
        "defaultComponent": "common.presentational.Hidden",
        "idable": true,
        "idType": "hash",
        "indexable": true
      },
      {
        "pid": "title",
        "name": "컴포넌트 제목",
        "valueType": "STRING"
      },
      {
        "pid": "comType",
        "name": "컴포넌트 유형",
        "valueType": "CODE",
        "code": [
          {
            "value": "type1",
            "label": "유형 1"
          },
          {
            "value": "type2",
            "label": "유형 2"
          }
        ]
      }
    ]
  }
]

컴포넌트 설정에서 componentPropClass 항목을 해당 스키마의 tid로 변경

{
  "typeId": "foComponent",
  "componentId": "new-componet",
  "thumbnail2": "",
  "apiUsing": [],
  "componentName": "새로운 컴포넌트",
  "componentCategory": 1900,
  "description": "새로운 컴포넌트",
  "componentPropClass": "newComponentProp",
  "childrenAcceptable": false,
  "acceptableComponents": "",
  "acceptComponentsAll": false,
  "thumbnail": ""
  "orderNo": 999
},

Vue 컴포넌트 소스에서 title, comType으로 props 설정하고 해당 props을 이용하도록 소스 변경

이렇게하면 빌더에서 newComponent를 원하는 위치에 Drop하면 우측의 설정창에 title과 comType을 입력할 수 있도록 나타나고 입력한 값은 해당 컴포넌트의 props로 전달된다.