샌드박스

HTML, CSS, JavaScript 코드를 작성해 위젯을 빌드 할 수 있습니다.

입력 포트

• 데이터셋

출력 포트

• 데이터셋

설명

• 코드 입력 및 실행: 사용자는 코드 에디터에 직접 HTML, CSS, JavaScript 코드를 입력하고 실행할 수 있습니다. 입력 포트가 연결되어 있으면, JavaScript 에디터에서 getDataset API를 사용해 데이터를 가져올 수 있습니다.

• 실시간 프리뷰: 코드의 실행 결과를 바로 확인할 수 있는 프리뷰 창이 제공됩니다.

• 콘솔 로깅: JavaScript를 통해 데이터를 콘솔에 로그하여, 코드 실행 중 발생하는 데이터를 확인할 수 있습니다.

인풋 포트 추가 방법

샌드박스 노드 편집 화면의 Settings 탭에서 샌드박스 노드의 입력 포트를 추가할 수 있습니다.

샌드박스 노드 편집 모달

JS 에디터에서 사용 가능한 API

getDataset

입력포트와 연결된 노드의 데이터를 가져오는 비동기 함수입니다.

getDataset(options: {
  target?: number;
  limit?: number;
  page?: number;
  sortedBy?: string;
  ascending?: boolean; 
}): Promise<Record<string, any>>

• 옵션 설명:

  • target(number, optional): 입력 포트 번호 (기본값:1, 최소값: 1).

    • 입력 포트는 설정에 따라 동적으로 추가될 수 있으므로, 포트 번호를 명시해 원하는 연결 데이터를 정확히 선택할 수 있습니다.

    • 예를 들어, target: 1이면 첫 번째 입력 포트에서, target: 2이면 두 번째 입력 포트에서 데이터를 가져옵니다.

    • 지정하지 않으면 기본적으로 첫 번째 포트에서 데이터를 가져옵니다.

  • limit (number, optional): 가져올 행 개수 (기본값: 20, 최대값: 1000, 최소값: 1).

  • page (number, optional): 페이지 번호 (기본값: 1, 최소값: 1).

  • sortedBy (string, optional): 정렬 기준 필드명.

  • ascending (boolean, optional): 오름차순 여부 (기본값: true).

• 예시

getDataset({ limit: 10, page: 2 })
    .then(response => {
        console.log(response)
    })

주의사항

• 비동기 처리: getDataset은 비동기 함수이므로 await 또는 .then()을 사용해야 합니다.

getAllDataset

입력포트와 연결된 노드의 전체 데이터를 가져오는 비동기 함수입니다. (페이지네이션 없이 모든 데이터를 가져옵니다)

getAllDataset(
    target?: number, 
    sortedBy?: string, 
    ascending?: boolean
): Promise<Record<string, any>>

• 옵션 설명:

  • target(number, optional): 입력 포트 번호 (기본값:1, 최소값: 1).

    • 입력 포트는 설정에 따라 동적으로 추가될 수 있으므로, 포트 번호를 명시해 원하는 연결 데이터를 정확히 선택할 수 있습니다.

    • 예를 들어, target: 1이면 첫 번째 입력 포트에서, target: 2이면 두 번째 입력 포트에서 데이터를 가져옵니다.

    • 지정하지 않으면 기본적으로 첫 번째 포트에서 데이터를 가져옵니다.

  • sortedBy (string, optional): 정렬 기준 필드명.

  • ascending (boolean, optional): 오름차순 여부 (기본값: true)

• 예시

// await 사용 (async 함수 내부에서)
const data = await getAllDataset();
console.log('전체 데이터:', data);
console.log('데이터 개수:', data.length);

// .then() 사용
getAllDataset()
    .then(data => {
        console.log('전체 데이터:', data);
        console.log('데이터 개수:', data.length);
    })

주의사항

• 비동기 처리: getAllDataset은 비동기 함수이므로 await 또는 .then()을 사용해야 합니다.

• 데이터 크기: getAllDataset은 페이지네이션 없이 모든 데이터를 가져오므로, 대량의 데이터가 있을 경우 성능에 영향을 줄 수 있습니다. 필요한 경우 getDataset의 limit과 page 옵션을 사용하세요.

runNode

캔버스 상의 다른 노드를 프로그래밍적으로 실행시키는 비동기 함수입니다.

runNode(options: {nodeId: string;}): Promise<boolean>

• 옵션 설명:

  • nodeId (string, required): 실행할 노드의 ID.

• 예시

// 캔버스에서 해당 노드를 우클릭 → “노드 ID 복사”로 확인할 수 있습니다.
// 특정 노드를 실행
await runNode({ nodeId: 'node-preprocess-1234' });

getNodeStatus

지정한 노드의 현재 상태를 가져오는 비동기 함수입니다.

getNodeStatus(options: {
    nodeId: string;
}): Promise<'not start' | 'loading' | 'complete' | 'failed'>

• 옵션 설명:

  • nodeId (string, required): 상태를 조회할 노드의 ID.

• 반환값:

  • 'not start': 실행되지 않은 상태

  • 'loading': 실행 중인 상태

  • 'complete': 실행이 정상적으로 완료된 상태

  • 'failed': 실행 중 오류로 실패한 상태

• 예시

// await 사용 (async 함수 내부에서)
const status = await getNodeStatus({ nodeId: 'node-sandbox-1234' });

if (status === 'loading') {
  console.log('노드가 아직 실행 중입니다.');
} else if (status === 'complete') {
  console.log('노드 실행이 완료되었습니다.');
} else if (status === 'failed') {
  console.error('노드 실행이 실패했습니다.');
}

주의사항

• 일정 주기로 getNodeStatus를 호출하여 상태 변화를 감지해야 합니다.

getNodeOutputDataset

다른 노드의 출력 포트에 연결된 데이터셋을 가져오는 비동기 함수입니다. 페이지네이션 및 정렬 옵션을 지원하며, 특정 출력 포트를 선택해서 조회할 수 있습니다.

getNodeOutputDataset(options: {
    nodeId: string;
    target?: number;
    limit?: number;
    page?: number;
    sortedBy?: string;
    ascending?: boolean;
}): Promise<Record<string, any>[]>

• 옵션 설명:

  • nodeId (string, required): 출력 데이터를 가져올 대상 노드의 ID.

  • target (number, optional): 출력 포트 번호 (기본값: 1, 최소값: 1).

  • limit (number, optional): 한 번에 가져올 행(row) 수 (기본값: 20).

  • page (number, optional): 페이지 번호 (기본값: 1, 최소값: 1).

  • sortedBy (string, optional): 정렬 기준 필드명.

  • ascending (boolean, optional): 오름차순 여부 (기본값: true).

• 예시

// 다른 노드의 첫 번째 출력 포트 데이터 100건만 가져오기
const rows = await getNodeOutputDataset({
  nodeId: 'node-previous-1234',
  target: 1,
  limit: 100,
  page: 1,
});

console.log('이전 노드 출력 데이터:', rows);

sendDataToOutput

출력포트와 연결된 노드에 데이터를 전달하는 함수입니다.

sendDataToOutput(data: Record<string, any>[]): void

• 파라미터:

  • data: 다음 노드로 보낼 객체 배열 형식의 데이터

• 예시

sendDataToOutput([
  { name: 'Alice', age: 28 },
  { name: 'Bob', age: 34 },
]);

resetSandboxOutput

샌드박스 노드의 출력 데이터를 초기화 하는 함수입니다.

nodeId를 전달하지 않으면 현재 샌드박스의 출력 데이터를 초기화하고,

nodeId가 있으면 해당 nodeId의 샌드박스 데이터를 초기화합니다.

resetSandboxOutput(nodeId?: string): void

• 파라미터:

  • nodeId (optional): 리셋할 샌드박스 노드의 ID

    • 미전달 시: 현재 샌드박스 아웃풋 리셋

    • 전달 시: 해당 nodeId 샌드박스 아웃풋 리셋

    • nodeId 확인 방법: 캔버스에서 해당 노드를 우클릭 → 노드 ID 복사에서 확인할 수 있습니다.

• 예시

resetSandboxOutput();

resetSandboxOutput("node-sandbox-1234");

changeApplicationMenu

애플리케이션의 메뉴를 변경하는 함수입니다.

changeApplicationMenu(menuNumber: number): void

• 파라미터:

  • menuNumber (number, required): 이동할 메뉴 번호 (최소값: 1).

  • 첫 번째 메뉴는 1, 두 번째 메뉴는 2입니다.

  • 1보다 작은 값을 입력하면 에러가 발생합니다.

• 예시

// 첫 번째 메뉴로 이동
changeApplicationMenu(1);

// 두 번째 메뉴로 이동
changeApplicationMenu(2);

// 버튼 클릭 시 메뉴 변경
document.getElementById('nextBtn').addEventListener('click', () => {
  changeApplicationMenu(2);
});

getUserInfo

현재 로그인한 사용자의 기본 정보를 가져오는 비동기 함수입니다.

getUserInfo(): Promise<{
    id: string;
    name: string;
    email: string;
}>

• 반환값:

  • id (string): 사용자 ID.

  • name (string): 사용자 이름.

  • email (string): 사용자 이메일.

• 예시

// await 사용 (async 함수 내부에서)
const user = await getUserInfo();

if (!user.id) {
  console.log('로그인되지 않은 사용자입니다.');
} else {
  console.log('현재 사용자:', user.name, user.email);
}

주의사항

• 비로그인 상태: 인증 정보가 없는 경우(비로그인 등) 에러 대신 id, name, email이 모두 빈 문자열을 반환합니다.

JS 에디터에서 사용 가능한 event

node-status-changed

노드 상태 변경을 감지하는 이벤트입니다.

• 예시

window.addEventListener('node-status-changed', async (event) => {
  console.log('노드 상태 변경됨!');
  console.log('nodeStatus:', event.detail.nodeStatus); // ✅ loading, complete 등
});

사용방법

2. 차량이름과 가격정보 코드작성

3. 캔버스에서 확인