logologo
시작
가이드
개발
플러그인
API
홈
English
简体中文
日本語
한국어
Español
Português
Deutsch
Français
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
시작
가이드
개발
플러그인
API
홈
logologo

소개

FlowEngine이란?
FlowEngine과 플러그인의 관계
빠른 시작
학습 로드맵

가이드

FlowModel 등록
FlowModel 생성
FlowModel 렌더링
FlowModel 이벤트 플로우 & 구성
FlowModel 영속성
FlowModel 생명주기
FlowModel 컨텍스트 시스템
반응형 메커니즘: Observable
FlowModel vs React.Component

Definitions

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageFlowModel vs React.Component
Next PageFlowDefinition
TIP

이 문서는 AI로 번역되었습니다. 부정확한 내용이 있을 경우 영어 버전을 참조하세요

#ModelDefinition

ModelDefinition은 FlowEngine.createModel() 메서드를 통해 모델 인스턴스를 생성하는 데 사용되는 플로우 모델의 생성 옵션을 정의합니다. 여기에는 모델의 기본 설정, 속성, 하위 모델 등의 정보가 포함됩니다.

#타입 정의

interface CreateModelOptions {
  uid?: string;
  use: RegisteredModelClassName | ModelConstructor;
  props?: IModelComponentProps;
  flowRegistry?: Record<string, Omit<FlowDefinitionOptions, 'key'>>;
  stepParams?: StepParams;
  subModels?: Record<string, CreateSubModelOptions[]>;
  parentId?: string;
  subKey?: string;
  subType?: 'array' | 'single';
  sortIndex?: number;
  flowRegistry?: Record<string, Omit<FlowDefinitionOptions, 'key'>>;
}

#사용 방법

const engine = new FlowEngine();

// 모델 인스턴스 생성
const model = engine.createModel({
  uid: 'unique-model-id',
  use: 'MyModel',
  props: {
    title: 'My Model',
    description: 'A sample model'
  },
  stepParams: {
    step1: { param1: 'value1' }
  },
  subModels: {
    childModels: [
      {
        use: 'ChildModel',
        props: { name: 'Child 1' }
      }
    ]
  }
});

#속성 설명

#uid

타입: string
필수: 아니요
설명: 모델 인스턴스의 고유 식별자입니다.

값을 제공하지 않으면 시스템이 자동으로 고유한 UID를 생성합니다.

예시:

uid: 'model-123'
uid: 'user-profile-model'
uid: 'data-processing-instance'

#use

타입: RegisteredModelClassName | ModelConstructor
필수: 예
설명: 사용할 모델 클래스입니다.

등록된 모델 클래스 이름 문자열 또는 모델 클래스의 생성자일 수 있습니다.

예시:

// 문자열 참조 사용
use: 'MyModel'

// 생성자 사용
use: MyModel

// 동적 참조 사용
const ModelClass = engine.getModelClass('MyModel');
use: ModelClass

#props

타입: IModelComponentProps
필수: 아니요
설명: 모델의 속성 설정입니다.

모델 생성자에 전달되는 속성 객체입니다.

예시:

props: {
  title: 'My Model',
  description: 'A sample model instance',
  config: {
    theme: 'dark',
    language: 'ko-KR'
  },
  metadata: {
    version: '1.0.0',
    author: 'Developer'
  }
}

#stepParams

타입: StepParams
필수: 아니요
설명: 스텝 파라미터 설정입니다.

워크플로우의 각 스텝에 파라미터를 설정합니다.

예시:

stepParams: {
  loadData: {
    url: 'https://api.example.com/data',
    method: 'GET',
    timeout: 5000
  },
  processData: {
    processor: 'advanced',
    options: {
      format: 'json',
      encoding: 'utf8'
    }
  },
  saveData: {
    destination: 'database',
    table: 'processed_data'
  }
}

#subModels

타입: Record<string, CreateSubModelOptions[]>
필수: 아니요
설명: 하위 모델 설정입니다.

모델의 하위 모델을 정의하며, 배열 및 단일 하위 모델을 모두 지원합니다.

예시:

subModels: {
  // 배열 타입 하위 모델
  childModels: [
    {
      use: 'ChildModel1',
      props: { name: 'Child 1', type: 'primary' }
    },
    {
      use: 'ChildModel2',
      props: { name: 'Child 2', type: 'secondary' }
    }
  ],
  // 단일 하위 모델
  singleChild: {
    use: 'SingleChildModel',
    props: { name: 'Single Child' }
  }
}

#parentId

타입: string
필수: 아니요
설명: 부모 모델의 UID입니다.

모델 간의 부모-자식 관계를 설정하는 데 사용됩니다.

예시:

parentId: 'parent-model-123'
parentId: 'master-instance'

#subKey

타입: string
필수: 아니요
설명: 부모 모델 내 하위 모델의 키 이름입니다.

부모 모델 내에서 하위 모델의 위치를 식별하는 데 사용됩니다.

예시:

subKey: 'childModels'
subKey: 'subComponents'
subKey: 'nestedItems'

#subType

타입: 'array' | 'single'
필수: 아니요
설명: 하위 모델의 타입입니다.

  • 'array': 여러 인스턴스를 포함할 수 있는 배열 타입 하위 모델입니다.
  • 'single': 하나의 인스턴스만 포함할 수 있는 단일 하위 모델입니다.

예시:

subType: 'array'  // 배열 타입
subType: 'single' // 단일 타입

#sortIndex

타입: number
필수: 아니요
설명: 정렬 인덱스입니다.

목록에서 모델의 표시 순서를 제어하는 데 사용됩니다.

예시:

sortIndex: 0  // 가장 앞
sortIndex: 10 // 중간 위치
sortIndex: 100 // 뒤쪽

#flowRegistry

타입: Record<string, Omit<FlowDefinitionOptions, 'key'>>
필수: 아니요
설명: 플로우 레지스트리입니다.

모델 인스턴스에 특정 플로우 정의를 등록합니다.

예시:

flowRegistry: {
  'customFlow': {
    title: 'Custom Flow',
    manual: false,
    steps: {
      step1: {
        use: 'customAction',
        title: 'Custom Step'
      }
    }
  },
  'anotherFlow': {
    title: 'Another Flow',
    on: 'click',
    steps: {
      step1: {
        handler: async (ctx, params) => {
          // 사용자 정의 처리 로직
        }
      }
    }
  }
}

#전체 예시

class DataProcessingModel extends FlowModel {}

// 모델 클래스 등록
engine.registerModel('DataProcessingModel', DataProcessingModel);

// 모델 인스턴스 생성
const model = engine.createModel({
  uid: 'data-processing-001',
  use: 'DataProcessingModel',
  props: {
    title: 'Data Processing Instance',
    description: 'Processes user data with advanced algorithms',
    config: {
      algorithm: 'neural-network',
      batchSize: 100,
      learningRate: 0.01
    },
    metadata: {
      version: '2.1.0',
      author: 'Data Team',
      createdAt: new Date().toISOString()
    }
  },
  stepParams: {
    loadData: {
      source: 'database',
      query: 'SELECT * FROM users WHERE active = true',
      limit: 1000
    },
    preprocess: {
      normalize: true,
      removeOutliers: true,
      encoding: 'utf8'
    },
    process: {
      algorithm: 'neural-network',
      layers: [64, 32, 16],
      epochs: 100,
      batchSize: 32
    },
    saveResults: {
      destination: 'results_table',
      format: 'json',
      compress: true
    }
  },
  subModels: {
    dataSources: [
      {
        use: 'DatabaseSource',
        props: {
          name: 'Primary DB',
          connection: 'mysql://localhost:3306/db1'
        }
      },
      {
        use: 'APISource',
        props: {
          name: 'External API',
          url: 'https://api.external.com/data'
        }
      }
    ],
    processors: [
      {
        use: 'DataProcessor',
        props: {
          name: 'Main Processor',
          type: 'neural-network'
        }
      }
    ],
    outputHandler: {
      use: 'OutputHandler',
      props: {
        name: 'Results Handler',
        format: 'json'
      }
    }
  },
  flowRegistry: {
    'dataProcessingFlow': {
      title: 'Data Processing Flow',
      manual: false,
      sort: 0,
      steps: {
        load: {
          use: 'loadDataAction',
          title: 'Load Data',
          sort: 0
        },
        process: {
          use: 'processDataAction',
          title: 'Process Data',
          sort: 1
        },
        save: {
          use: 'saveDataAction',
          title: 'Save Results',
          sort: 2
        }
      }
    },
    'errorHandlingFlow': {
      title: 'Error Handling Flow',
      manual: true,
      on: 'error',
      steps: {
        log: {
          use: 'logErrorAction',
          title: 'Log Error'
        },
        notify: {
          use: 'notifyErrorAction',
          title: 'Notify Admin'
        }
      }
    }
  }
});

// 모델 사용
model.applyFlow('dataProcessingFlow');