[JavaScript] Rete.js란?

Rete.js

Rete.js는 비주얼 프로그래밍 및 노드 기반 편집기(Node-based Editor)를 제작할 수 있는 오픈소스 JavaScript 라이브러리이다. 텍스트 기반 코딩이 아닌 Visual Flow Programming 도구로, 사용자가 한 줄의 코드 없이 편집기에서 데이터 처리 방식을 정의하여 브라우저에서 시각적으로 프로그래밍을 할 수 있다.

 

Rete.js

 

Drag & Drop 인터페이스를 제공하여 그래픽적으로 노드를 배치하고 연결할 수 있으며, 워크플로우 시스템, AI 플로우, 데이터 플로우 기반 앱을 개발하는 데 유용하다.

 

 

특징

1. 노드 기반 UI 제작
   • 쉬운 구현 : 블록을 배치하고 선으로 연결하는 형태
     ex) 블록형 코드 편집기, 시각적 데이터 흐름 관리 시스템
2. 모듈화된 플러그인 시스템
   • 기본 엔진에 플러그인을 추가하여 기능 확장 가능
     ex) Drag & Drop 기능, 미니맵, 미리보기 창 등의 추가 기능
3. 커스텀 노드 제작 가능
   • HTML, Vue, React 등과 연동하여 원하는 UI 요소를 추가할 수 있음
4. 웹 기반
   • 브라우저에서 실행되는 JavaScript 라이브러리
   • 추가적인 소프트웨어 설치 없이 웹 애플리케이션으로 제작 가능
5. 오픈소스 및 확장성
   • 누구나 사용할 수 있는 MIT 라이선스 기반 오픈소스
   • 복잡한 데이터 흐름을 간단하게 구성할 수 있음

 

설치

npm을 이용하여 다음과 같이 설치한다.

# Rete만 설치
$ npm install rete

# 플러그인 포함 설치 (공식 문서 내용)
$ npm install rete rete-vue-render-plugin rete-connection-plugin

# 또는 yarn을 이용하여 다음과 같이 설치 가능
$ yarn add rete rete-connection-plugin rete-vue-render-plugin

 

이후 다음과 같이 import하여 사용한다.

import Rete from "rete";
import ConnectionPlugin from 'rete-connection-plugin';
import VueRenderPlugin from 'rete-vue-render-plugin';

 

플러그인

노드 간 연결선을 생성하는 플러그인

import ConnectionPlugin from "rete-connection-plugin";
editor.use(ConnectionPlugin);

 

Vue.js를 사용해 UI를 렌더링하는 플러그인

import VueRenderPlugin from "rete-vue-render-plugin";
editor.use(VueRenderPlugin);

 

우클릭 메뉴를 추가하는 플러그인

import ContextMenuPlugin from "rete-context-menu-plugin";
editor.use(ContextMenuPlugin);

 

 

JSON 저장 및 불러오기

Rete.js는 JSON 형식으로 노드 편집기의 상태를 저장하고 불러올 수 있다.

저장

const json = editor.toJSON();
localStorage.setItem("reteData", JSON.stringify(json));

 

불러오기

const data = JSON.parse(localStorage.getItem("reteData"));
editor.fromJSON(data);

 

 

예제

import Rete from "rete";
import ConnectionPlugin from "rete-connection-plugin";
import VueRenderPlugin from "rete-vue-render-plugin";

// HTML 요소 선택 (노드 편집기가 들어갈 div)
const container = document.getElementById("rete");

// 노드 편집기 생성 (ID는 'demo@0.1.0'으로 지정)
const editor = new Rete.NodeEditor("demo@0.1.0", container);
editor.use(ConnectionPlugin);
editor.use(VueRenderPlugin);

// 소켓 정의 (노드 간 연결을 위한 인터페이스)
const numSocket = new Rete.Socket("Number");

// 커스텀 노드 정의
class NumComponent extends Rete.Component {
  constructor() {
    super("Number");
  }

  builder(node) {
    const out = new Rete.Output("num", "Number", numSocket);
    return node.addOutput(out);
  }

  worker(node, inputs, outputs) {
    outputs["num"] = node.data.num;
  }
}

// 엔진 생성 및 노드 추가
const engine = new Rete.Engine("demo@0.1.0");
const numComponent = new NumComponent();

editor.register(numComponent);
engine.register(numComponent);

// 기본 노드 추가
(async () => {
  const node1 = await numComponent.createNode();
  node1.position = [80, 200];
  editor.addNode(node1);
})();

• Rete.NodeEditor : 노드 편집기 인스턴스 생성 (초기화)
• editor.use(ConnectionPlugin) : 노드 간 연결 기능을 추가
• editor.use(VueRenderPlugin) : Vue.js를 사용하여 노드 UI를 렌더링
• Rete.Socket : 노드 간 연결할 수 있는 소켓을 정의
• Rete.Component : 커스텀 노드를 정의하는 클래스
• builder(node) : 노드의 입출력 인터페이스를 구성
• worker(node, inputs, outputs) : 입력 값을 처리하고 출력을 생성하는 로직
• editor.addNode(node1) : 노드를 편집기에 추가

 

활용 사례

• 비주얼 스크립팅 도구
• AI 플로우 차트 (TensorFlow, 머신러닝 노드 편집기)
• 게임 개발 (Unity, Unreal Engine의 블루프린트 스타일 시스템)
• IoT 데이터 흐름 관리
• 비주얼 데이터 분석 도구 (BI툴)
• 노코드(No-Code) 및 로우 코드(Low-Code) 앱 개발