SDK 가이드

SDK를 통한 커스텀 노드 개발

⚠️ 현재 상태: 개발 예정 (Phase 4+)

SDK 개요

SDK를 통해 커스텀 노드를 개발하면, 워크스페이스에서 자체 제작한 노드를 사용할 수 있습니다.

  • • 자신의 비즈니스 로직에 맞는 노드 개발
  • • 외부 서비스와의 통합
  • • 고급 자동화 기능 구현
  • • 커뮤니티와 노드 공유

시작하기

1. SDK 설치

npm install @divetobada/sdk

2. 노드 컴포넌트 작성

import { NodeComponent, NodeProps } from '@divetobada/sdk';

export default function MyCustomNode({ data, id }: NodeProps) {
  return (
    <div className="custom-node">
      <h3>{data.title}</h3>
      <p>{data.content}</p>
    </div>
  );
}

3. 노드 등록

import { registerNode } from '@divetobada/sdk';
import MyCustomNode from './MyCustomNode';

registerNode({
  type: 'MY_CUSTOM_TYPE',
  label: '내 커스텀 노드',
  icon: 'CustomIcon',
  component: MyCustomNode,
  defaultWidth: 300,
  defaultHeight: 200
});

노드 인터페이스

커스텀 노드는 다음 인터페이스를 구현해야 합니다.

data: CustomNodeData

노드의 데이터 객체 (필수)

id: string

노드의 고유 ID (필수)

selected: boolean

노드가 선택되었는지 여부 (선택)

모범 사례

  • • 노드의 크기는 콘텐츠에 맞게 자동 조절되도록 설계하세요
  • • 연결점(Handle)은 노드의 좌우에 배치하세요
  • • 편집 및 삭제 기능은 호버 시에만 표시하세요
  • • 노드 데이터는 JSON 형식으로 저장됩니다
  • • 성능을 위해 불필요한 리렌더링을 방지하세요

향후 기능

  • 🚀 노드 마켓플레이스 (커뮤니티 노드 공유)
  • 🚀 노드 실행 기능 (자동화 워크플로우)
  • 🚀 노드 간 데이터 전달
  • 🚀 노드 그룹화 및 템플릿 기능