Skip to main content

JavaScript

JavaScript 쿼리 스텝은 데이터 처리, 변환, 검증 등 다양한 로직을 구현할 수 있는 도구입니다. 일반적인 JavaScript 문법을 모두 사용할 수 있으며, 워크플로우의 다른 스텝들과 조합하여 복잡한 비즈니스 로직을 구현할 수 있습니다.

쿼리 추가​

페이지 목록에서 워크플로우를 추가하여 쿼리 스텝을 추가할 수 있습니다.
워크플로우 스텝 사이드바에서 JavaScript 데이터 소스를 선택하면 쿼리 입력 창이 나타납니다.
별도의 데이터 소스 추가 없이 사용할 수 있습니다.

javascript

기본 구조​

JavaScript 스텝의 기본 구조는 다음과 같습니다:

// 데이터 처리 로직
const result = // 처리 로직

// 결과 반환
return result;

변수 사용하기​

다음과 같은 방식으로 변수를 사용할 수 있습니다.

1. 페이지 변수 사용​

페이지에 등록된 변수는 page.변수명 형식으로 사용합니다. 자세한 내용은 페이지 변수 이해하기 문서를 참고해주세요.

페이지에 정의된 변수에 접근:

// 페이지 변수 사용
const currentUser = page.currentUser;
const selectedItems = page.selectedItems;

2. 워크플로우 입력값 사용​

워크플로우에 정의된 입력값은 inputs.변수명 형식으로 사용합니다. 자세한 내용은 워크플로우 변수 값 가져오기 문서를 참고해주세요.

// 워크플로우 입력값 사용
const userId = inputs.userId;
const startDate = inputs.startDate;

3. 이전 스텝의 결과값 사용​

이전 스텝의 결과값은 outputs.스텝명 형식으로 사용합니다. 자세한 내용은 워크플로우 스텝의 결과 값 가져오기 문서를 참고해주세요.

// 이전 스텝 결과 사용
const previousData = outputs.step1;
const dbQueryResult = outputs.queryStep.data;

4. 컴포넌트 상태값 사용​

페이지 내 컴포넌트의 상태값은 컴포넌트명.상태명 형식으로 사용합니다. 자세한 내용은 컴포넌트 문서를 참고해주세요.

// 컴포넌트 상태 사용
const tableSelection = table1.selectedRows;
const inputValue = textField1.value;

일반적인 사용 사례​

1. 데이터 변환​

// SQL 쿼리 결과 변환
const rawData = outputs.queryStep.data;
const transformed = rawData.map((item) => ({
  id: item.id,
  fullName: `${item.firstName} ${item.lastName}`,
  age: calculateAge(item.birthDate),
}));

return transformed;

2. 데이터 필터링​

// 조건에 맞는 데이터 필터링
const items = outputs.getItems.data;
const filtered = items.filter((item) => item.price >= parseInt(inputs.minPrice) && item.stock > 0);

return filtered;

3. 데이터 집계​

// 데이터 집계 처리
const orders = outputs.getOrders.data;
const summary = orders.reduce(
  (acc, order) => ({
    totalAmount: acc.totalAmount + order.amount,
    totalCount: acc.totalCount + 1,
    avgAmount: (acc.totalAmount + order.amount) / (acc.totalCount + 1),
  }),
  { totalAmount: 0, totalCount: 0, avgAmount: 0 },
);

return summary;

4. API 응답 포맷팅​

// API 응답 데이터 포맷팅
const apiResponse = outputs.apiStep.data;
const formatted = {
  items: apiResponse.items.map((item) => ({
    ...item,
    createdAt: new Date(item.createdAt).toLocaleDateString(),
  })),
  total: apiResponse.total,
  page: apiResponse.currentPage,
};

return formatted;

라이브러리​

dayjs​

JavaScript 쿼리 스텝에서는 날짜 처리를 위한 dayjs 라이브러리가 기본적으로 제공됩니다. dayjs는 경량화된 날짜 처리 라이브러리로, moment.js와 유사한 API를 제공합니다.

// 현재 날짜/시간
const now = dayjs();

// 특정 날짜/시간
const date1 = dayjs('2024-01-01');
const date2 = dayjs('2024-01-01 13:30:00');
const date3 = dayjs(1698765432000); // timestamp

// ISO 형식 문자열로 변환
return now.toISOString();