---
html:
toc: true
offline: true
export_on_save:
html: true
---
# KSB 웹툴킷에 컴퍼넌트 등록하기
---
SW 개발자가 만든 신규 컴퍼넌트를 웹툴킷에서 사용할 수 있도록 등록하는 방법을 설명합니다. 웹툴킷 상단의 **Component** 메뉴를 클릭하여 Component 관리화면 으로 이동합니다. 컴포넌트를 등록하기 위한 절차는 다음과 같습니다.
1. 컴퍼넌트를 등록할 버전 선택
2. Enum Component 등록하기
3. Component Property 등록하기
4. UI Component 등록하기
5. 엔진과 매핑관계 만들기
## 컴퍼넌트를 등록할 버전 선택
**Revision** 탭으로 이동합니다. *Version Map* 표에서 웹툴킷의 *Component Version* 과 프레임워크의 *KSB Version* 목록을 확인할 수 있습니다. SW 개발자가 만든 신규 컴퍼넌트를 웹툴킷의 어떤 버전(*Component Version*)에 추가할지 선택한 후, 해당 버전에 컴퍼넌트를 등록합니다. 웹툴킷에서는 *Component Version* 을 관리하며, *KSB Version* 은 매핑만 시켜줍니다.
또한 *Working version* 은 Component 관리 화면에서 컴퍼넌트를 추가할 버전을 의미하고, *Current version* 은 워크플로우 편집 화면에서 워크플로우를 작성할 default 버전을 의미합니다.
사용자의 실수로 인한 에러를 막기 위해, 기본적으로 배포되는 *Component Version* 은 컴퍼넌트 수정/삭제/신규등록 등의 기능을 제공하지 않습니다. 따라서 *Component Version* 복제 기능을 이용하여 새로운 버전을 생성하고, 여기에 신규 컴퍼넌트를 등록하길 권장합니다.
본 예제에서는 *Component Version* = 1.0 을 복제하여 1.0.1 버전을 생성합니다. *Component Version* = 1.0 에서 "Clone" 버튼을 클릭하여 신규 버전 정보를 입력합니다 (*Component Version* = 1.0.1; *KSB Version* = 1.0). 그리고 "Clone to DB" 버튼을 클릭하여 적용합니다.
그리고 1.0.1 버전을 *Working version* 으로 선택합니다.
## Enum Component 등록하기
Protocol Buffer 메세지 작성 시 독립적으로 작성한 Enum Component가 있다면, 이를 가장 먼저 입력합니다. **Enum Component** 탭으로 이동하여 입력합니다.
1. Name(1) 을 입력한 후 Check Duplication 버튼(2) 을 클릭하여 중복된 이름이 있는 지 검사합니다. 중복된 이름이 있을 경우, 가급적 다른 이름을 사용합니다.
2. FieldName(3) 을 입력한 후, Add a new field! 버튼(4) 을 클릭하여 리스트에 추가합니다.
3. 2번 과정을 반복하여 리스트에 값을 추가합니다.
4. DB+ 버튼(5) 을 클릭하여 리스트에 있는 내용을 DB에 입력합니다.
- Enum Component 작성 예시
```protobuf
enum FieldType {
STRING = 0;
INTEGER = 1;
DOUBLE = 2;
BOOLEAN = 3;
BYTE = 4;
FLOAT = 5;
LONG = 6;
TIMESTAMP = 7;
}
```
- Enum Component 등록 예시
## Component Property 등록하기
Protocol Buffer 메세지의 필드 값을 입력합니다. Protocol Buffer 메세지에 포함되어 있는 Enum Component 와 Oneof Component 를 함께 입력합니다. **Component Property** 탭으로 이동하여 입력합니다.
**[ Component Property ]**
1. Name 을 입력한 후 Check Duplication 버튼(1) 을 클릭하여 중복된 이름이 있는 지 검사합니다. 중복된 이름이 있을 경우, 가급적 다른 이름을 사용합니다.
2. Oneof Component 또는 Enum Component 가 메세지 안에 정의되어 있을 경우, 이를 먼저 입력합니다. <아래 글 참조>
3. Required, FieldType, FieldComponent, FieldName, DefaultValue, Help 를 차례대로 입력한 후, Add a field! 버튼(2) 을 클릭하여 리스트에 추가합니다. Order는 자동으로 증가합니다. Help는 해당 필드값의 의미 및 사용자가 어떻게 값을 세팅해야 하는지에 관한 도움말을 입력합니다.
4. FieldType 이 MESSAGETYPE, ENUMTYPE, ONEOFTYPE 중 하나일 경우, FieldComponent 를 선택합니다.
5. DefaultValue 가 없을 경우, 이 필드는 입력하지 않아도 됩니다.
6. FieldName은 웹툴킷 워크플로우 편집화면의 Properties 창에 나타나는 이름이므로, 사용자 친화적인 이름으로 작성합니다. (직관적인 이름 사용)
7. 3번 과정을 반복하여 리스트에 값을 추가합니다. (3) 버튼을 클릭하면 Help 정보를 확인할 수 있고, 한번 더 클릭하면 Help 정보를 감출 수 있습니다.
**[ OneofGroups ]**
1. Name 을 입력한 후, Add a OneofGroup! 버튼(4) 을 클릭하여 리스트에 이름을 추가합니다.
2. Component Property, FieldName 을 차례대로 입력한 후, Add a field! 버튼을 클릭하여 리스트에 추가합니다. Order는 자동으로 증가합니다.
3. 2번 과정을 반복하여 리스트에 값을 추가합니다.
4. Oneof Component 가 2개 이상일 경우, 1 - 3번 과정을 반복하여 리스트에 값을 추가합니다.
**[ EnumComponent ]**
1. Name 입력한 후 Add a EnumComponent! 버튼(5) 을 클릭하여 리스트에 이름을 추가합니다.
2. FieldName 을 입력한 후, Add a field! 버튼을 클릭하여 리스트에 추가합니다. Order는 자동으로 증가합니다.
3. 2번 과정을 반복하여 리스트에 값을 추가합니다.
4. Enum Component 가 2개 이상일 경우, 1 - 3번 과정을 반복하여 리스트에 값을 추가합니다.
DB+ 버튼(6) 을 클릭하여 리스트에 있는 내용을 DB에 입력합니다. 그 다음 Component Property Help 를 입력합니다. Edit! 버튼을 클릭하여 입력합니다.
**[ Component Property Help ]**
1. Short Help를 입력합니다. 개략적인 설명을 입력합니다.
2. 도움말을 입력합니다. 사용자가 이해할 수 있도록 자세하게 도움말을 입력합니다.
Modify! 버튼을 클릭한 후, DB+ 버튼(6) 을 클릭하여 리스트에 있는 내용을 DB에 입력합니다.
- Protocol Buffer 메세지 작성 예시
```protobuf
message FilePipeReaderInfo {
required string filePath = 1;
required FileType fileType = 2 [default = JSON];
optional int32 maxFilesPerTrigger = 3;
optional string timeColName = 5 [default = "timestamp"];
optional string watermark = 6 [default = "1 seconds"];
repeated FieldInfo field = 7;
optional string delimiter = 8 [default = ","];
optional bool header = 9 [default = false];
enum FileType {
CSV = 0;
JSON = 1;
PARQUET = 2;
TEXT = 3;
}
}
```
- Protocol Buffer 메세지 등록 예시
## UI Component 등록하기
위에서 입력한 메세지가 Reader, Writer, Runner, Controller, Operator 와 같은 UI Component 로 등록되어야 할 경우, **UI Component** 탭으로 이동하여 입력합니다.
본 예제에서는 SW 개발자가 이클립스 환경에서 스트림 처리용 파일 입력기(ksb.csle.component.pipe.stream.reader.FilePipeReader.scala
)를 구현하였다고 가정하고, StreamJoinEngine 의 Reader 중 하나로 등록하는 방법을 설명합니다.
1. Component Property, Type, Class Name, Nickname, Description을 차례대로 입력합니다. Nickname은 워크플로우 편집 화면의 컴퍼넌트 선택창에서 표시할 이름입니다. Description은 워크플로우 편집 화면의 컴퍼넌트 선택창에서 컴퍼넌트 이름에 마우스 오버 시 표출할 툴팁 설명입니다.
2. DB+ 버튼을 클릭하여 입력한 내용을 DB에 추가합니다.
## 엔진과 매핑관계 만들기
위에서 입력한 UI Component 를 어떤 Engine에서 사용할 것인지 매핑 정보를 입력합니다.
1. UIComponent 는 위에서 입력한 컴퍼넌트를 선택합니다.
2. Engine 은 컴퍼넌트가 추가될 엔진을 선택합니다.
3. 선택된 엔진이 가지고 있는 OneofGroup 에 Field Name을 입력한 후 Add a new field! 버튼(2) 을 클릭하여 리스트에 추가합니다.
4. Save to Entry! 버튼(3) 을 클릭하여 Mapping Entries 리스트에 추가합니다.
5. UI Component를 여러 개의 엔진에 추가하고 싶은 경우, 1 - 4번 과정을 반복하여 Mapping Entries 리스트에 추가합니다. 동일한 OneofGroup 을 참조하는 엔진들은 일괄적으로 추가가 되므로 Mapping Entries 리스트에 추가하지 않아도 됩니다.
6. DB+ 버튼(4) 을 클릭하여 Mapping Entries 리스트에 있는 내용을 DB에 입력합니다.
DB에 입력한 후, UIComponent Mapping Relations! 버튼(1) 을 클릭하면 아래 그림과 같이 매핑 정보를 확인할 수 있습니다. 동일한 OneofGroup 을 참조하는 엔진들에 모두 매핑이 된 것을 확인할 수 있습니다.
