샌드박스

HTML, CSS, JavaScript 코드를 작성해 노드를 빌드할 수 있는 노드입니다.

---

설명

샌드박스 노드는 코드 에디터에 직접 HTML, CSS, JavaScript 코드를 입력하고 실행할 수 있습니다.

주요 기능:

• 코드 입력 및 실행: HTML, CSS, JavaScript 코드를 직접 작성하고 실행할 수 있습니다
• 실시간 프리뷰: 코드의 실행 결과를 바로 확인할 수 있는 프리뷰 창이 제공됩니다
• 콘솔 로깅: JavaScript를 통해 데이터를 콘솔에 로그하여, 코드 실행 중 발생하는 데이터를 확인할 수 있습니다

---

포트 구성

입력 포트

• 데이터셋: JavaScript에서 함수로 가져올 수 있는 데이터셋

출력 포트

• 데이터셋: sendDataToOutput 함수로 전달한 데이터셋

---

속성

입력 포트 추가

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

---

JS 에디터에서 사용 가능한 함수

getDataset

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

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

옵션 설명:

• target (number, optional): 입력 포트 번호 (기본값: 1, 최소값: 1)
• 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)
• 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()을 사용해야 합니다
• 페이지네이션 없이 모든 데이터를 가져오므로, 대량의 데이터가 있을 경우 성능에 영향을 줄 수 있습니다. 필요한 경우 getDataset의 limit과 page 옵션을 사용하세요

runNode

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

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

옵션 설명:

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

node 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);

node Id 확인 방법

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

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 샌드박스 아웃풋 리셋

예시:

resetSandboxOutput();

resetSandboxOutput("node-sandbox-1234");

node Id 확인 방법

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

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이 모두 빈 문자열을 반환합니다.

getDownloadURL

입력 포트와 연결된 데이터셋의 다운로드 URL을 가져오는 비동기 함수입니다.

getDownloadURL(options: {
  target?: number;
  format?: 'csv' | 'xlsx';
}): Promise<{
  downloadUrl: string;
  fileName: string;
}>

옵션 설명:

• target (number, optional): 입력 포트 번호 (기본값: 1, 최소값: 1)
• format (string, optional): 다운로드 파일 포맷 (기본값: 'csv')
  • 'csv': CSV 형식으로 다운로드
  • 'xlsx': Excel 형식으로 다운로드

반환값:

• downloadUrl (string): 데이터셋 다운로드 URL
• fileName (string): 다운로드 파일 이름

예시:

// 기본 사용 (CSV 형식)
const { downloadUrl, fileName } = await getDownloadURL();
console.log("다운로드 URL:", downloadUrl);
console.log("파일명:", fileName);

// Excel 형식으로 다운로드
const excelResult = await getDownloadURL({ format: "xlsx" });

// 특정 입력 포트의 데이터셋 다운로드
const result = await getDownloadURL({ target: 2, format: "csv" });

// 다운로드 링크 생성 예시
const { downloadUrl, fileName } = await getDownloadURL({ format: "xlsx" });
const link = document.createElement("a");
link.href = downloadUrl;
link.download = fileName;
link.click();

비동기 처리

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

downloadGoogleDriveFile

Google Drive 파일 ID로 해당 파일을 다운로드하는 비동기 함수입니다.

downloadGoogleDriveFile(fileId: string): Promise<void>

파라미터:

• fileId (string, required): Google Drive 파일 ID (공유 링크에서 확인 가능)

예시:

// Google Drive 파일 다운로드
downloadGoogleDriveFile("fileId");

---

JS 에디터에서 사용 가능한 이벤트

node-status-changed

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

예시:

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