샌드박스

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

입력 포트

• 데이터셋

출력 포트

• 데이터셋

설명

• 코드 입력 및 실행: 사용자는 코드 에디터에 직접 HTML, CSS, JavaScript 코드를 입력하고 실행할 수 있습니다. 데이터셋 포트가 연결되어 있는 상태라면 Javascript 에디터에서 데이터셋을 "dataset" 변수로 가져와서 사용할 수 있습니다.

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

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

• 데이터 API 사용: JavaScript 에디터에서는 노드 간 데이터 흐름을 다룰 수 있는 API가 제공됩니다.

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

getDataset

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

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

• 옵션 설명:

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

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

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

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

• 예시

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

sendDataToOutgoers

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

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

• 파라미터:

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

• 예시

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

주의사항

• 데이터셋 제한: 입력받은 데이터는 1000번째 행까지만 사용할 수 있습니다.

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

사용방법

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

3. 캔버스에서 확인