Skip to main content

OpenUI Lang — 함수 사용 사례 59개

총 59개 항목 · 118개 예제를 설명한다. 각 항목은 한국어 설명, 위치 기반 호출 계약, 완성된 OpenUI Lang 프로그램을 포함한다.

이 문서의 범위와 읽는 방법​

이 문서는 OpenUI Lang을 사용해 UI를 기술하는 라이브러리의 독립적인 사용 설명서다. 특정 프로젝트의 저장소·소스 파일·로컬 서버·다른 문서를 열지 않아도 계약과 예제를 읽을 수 있도록 구성했다. 여기에 정의한 이름·인자 순서·동작은 이 문서가 설명하는 카탈로그의 계약이며, 모든 OpenUI 카탈로그에 동일한 항목이 기본 제공된다는 뜻은 아니다.

Markdown은 예제 코드를 보여주는 문서 형식이다. 코드를 실행해 실제 화면을 표시하려면 OpenUI Lang 파서·평가기·렌더러와 본문에 설명된 컴포넌트·함수·액션을 등록한 호스트 애플리케이션이 필요하다. 이 문서 자체가 실행 엔진이나 설치 패키지는 아니다.

공통 문법​

root = Col([Text("횟수: " + $count), Button("증가", @Set($count, $count + 1))])
$count = 0
  • root = ...: 화면 진입점이다. root에서 연결한 요소가 표시된다.
  • Col(...), Text(...): 등록된 컴포넌트를 생성하는 표현식이다.
  • $count = 0: 사용자가 변경할 수 있는 상태의 초깃값이다. 초깃값에는 숫자·문자열·배열·객체·null 같은 literal을 사용한다.
  • result = @Percent(3, 4): 계산 표현식이다. 해당 함수가 등록돼 있다면 75가 계산된다. 일반 변수 result와 상태 변수 $result는 구별한다.
  • @Set($count, 새값): 클릭 등의 이벤트에서 상태값을 바꾸는 내장 액션이다. 변경된 상태를 읽는 표현식과 UI가 다시 평가된다.
  • 조건 ? 참일때값 : 거짓일때값: 조건에 따라 값을 선택한다.
  • 인자는 위치 기반이다. ?가 붙은 계약 항목은 선택 인자이며 중간 인자를 건너뛸 때 예제처럼 null을 사용할 수 있다.
  • null, false, 0, ""은 서로 다른 값이다. 객체 키는 {"id": 1}처럼 따옴표로 감싼다.
  • 표현식은 참조를 정의보다 앞에 둘 수 있다. 따라서 첫 줄의 root가 뒤에 선언된 상태나 계산값을 참조하는 예제가 있다.

예제에 사용하는 보조 요소와 타입​

이름의미 / 최소 사용 계약
Col(children, gap?, align?)자식을 세로로 배치한다. gap 숫자는 4px 단위이며, 예를 들어 4는 16px이다.
Text(text, size?, color?)문장이나 문자열로 변환한 결과를 표시한다.
Table(columns, rows)열 이름 배열과 행별 셀 배열로 표를 표시한다.
Button(label, action?)클릭하면 action을 실행한다.
Input($value, label?, type?)문자열·숫자 입력을 상태 변수에 연결한다. type은 text 또는 number다.
Box(children?, direction?, gap?, padding?, background?)콘텐츠를 감싸 방향·간격·배경 등을 지정한다.
@Each(list, "item", expression)목록의 각 항목에 expression을 적용해 결과 목록을 만든다.
@Join(list, separator?, field?)항목 또는 지정 필드를 문자열로 연결한다.
@Set($state, value)이벤트 발생 시 상태를 value로 바꾼다.
Node / Node[]렌더링할 문자열·컴포넌트 표현식 / 그 목록이다.
$binding<T>T 타입 값을 읽고 변경할 수 있는 상태 연결이다. 호출에서는 $value를 전달한다.
ActionExpression클릭·제출 등의 이벤트에서 실행할 액션 표현식이다.
Colorink·muted·surface·info·success·warning·danger 등의 토큰 또는 CSS 색상이다.
Radiussm·md·lg·xl·full 또는 숫자로 지정한 모서리 반경이다.
Length픽셀 숫자 또는 "50%" 같은 CSS 길이다.
Record<string, T>문자열 키마다 T 타입 값을 갖는 객체다.

본문의 @Name(...)에는 값을 계산하는 함수와 이벤트를 실행하는 액션이 함께 등장한다. 함수는 결과값을 반환하고, 액션은 상태 변경·복사·대화 요청 같은 동작을 일으킨다. @Set·@Each 같은 내장 기능과 본문에서 설명하는 사용자 정의 항목은 구별한다.

계산과 상태 저장의 차이​

root = Col([Button("실행", @Set($result, @Pick(["A", "B", "C"]))), Text($result == null ? "null" : "결과: " + $result)])
$result = null

처음에는 null이 표시된다. 실행 버튼을 누르면 Pick이 하나를 뽑고 Set이 그 값을 상태에 저장한다. Text는 바뀐 상태를 표시한다. 다음 클릭 전까지 그 결과를 유지한다. 같은 값이 다시 뽑힐 수도 있다. Pick·Shuffle·Random·Now처럼 재평가 시 달라질 수 있는 값은 이런 방식으로 저장해 사용한다.

나머지 예제의 result = @함수(...)는 계산식을 선언하고 그 결과를 표시한다. 목록 수정 함수는 원본을 직접 변경하는 대신 새 목록을 반환한다. 목록 상태를 실제 갱신하려면 이벤트에서 @Set($items, @Append($items, "새 항목"))처럼 반환값을 저장한다.

입력 타입·인자 수가 맞지 않거나 함수 실행 중 오류가 생기면 런타임이 오류를 기록하고 null을 반환할 수 있다. null이 함수의 정상 결과인 경우도 있으므로 Find의 미일치·Change의 이전 값 0과 실행 실패를 구별한다. 로그의 표시 방식은 호스트마다 다르며 특별한 Console 로그가 기본 제공된다고 가정하지 않는다.

전체 목차​

  • Append — 목록 끝에 항목을 추가한 새 목록을 반환한다.

  • Prepend — 목록 앞에 항목을 추가한 새 목록을 반환한다.

  • Concat — 두 목록을 이어 붙인다.

  • Remove — 지정 필드 값이 일치하는 항목을 제거한다. 빈 필드명은 항목 자체를 비교한다.

  • RemoveAt — 지정 인덱스의 항목을 제거한다. 인덱스는 0부터 시작하며 음수는 뒤에서 센다.

  • Update — 조건 필드가 일치하는 객체의 지정 필드 값을 바꾼 새 목록을 반환한다.

  • Toggle — 항목이 없으면 추가하고 있으면 제거한다.

  • Includes — 목록에 항목이 있거나 문자열에 값이 포함되는지 확인한다.

  • Find — 필드 값이 일치하는 첫 항목을 반환한다. 없으면 null이다.

  • IndexOf — 목록에서 항목의 인덱스를 반환한다. 없으면 -1이다.

  • Take — 앞에서 N개를 가져온다. N이 음수면 뒤에서 가져온다.

  • Slice — 목록 또는 문자열을 시작 위치부터 끝 위치 직전까지 잘라낸다.

  • Unique — 중복을 제거하고 처음 등장한 순서를 유지한다.

  • Reverse — 순서를 뒤집은 새 목록을 반환한다.

  • Range — 시작값부터 끝값 직전까지 지정 간격의 숫자를 생성한다.

  • Pick — 목록에서 임의 항목을 고른다. 빈 목록은 null이다.

  • Shuffle — 목록을 무작위 순서로 섞은 사본을 반환한다.

  • Flatten — 목록 안의 목록을 한 단계 펼친다.

  • Chunk — 목록을 지정 크기의 작은 목록들로 나눈다.

  • Pow — 밑을 지수만큼 거듭제곱한다.

  • Sqrt — 제곱근을 계산한다. 음수 입력은 예외 처리 후 런타임에서 null이 된다.

  • Random — 범위 안의 난수를 생성한다. 정수 모드에서는 양 끝을 포함한다.

  • Clamp — 숫자를 최소·최대 범위 안으로 제한한다.

  • Percent — 부분 / 전체 × 100을 계산한다. 전체가 0이면 0이다.

  • Lerp — 두 값 사이를 비율 t로 선형 보간한다.

  • Allocate — 총액을 가중치 비율로 배분하고 반올림 후에도 합계가 맞도록 조정한다.

  • Payment — 원금·회차별 이율(퍼센트)·회차 수로 회차당 상환액을 계산한다.

  • Convert — 지원되는 길이·질량·부피·속도·면적·온도 단위를 변환한다.

  • Format — 숫자를 일반·통화·퍼센트·축약 형식의 문자열로 표시한다.

  • Join — 목록 항목 또는 지정 필드를 구분자로 연결한다.

  • Plural — 수량과 영어 단어의 단수·복수를 표시한다.

  • Pad — 문자열 앞부분을 지정한 문자로 채워 길이를 맞춘다.

  • Upper — 문자열을 대문자로 바꾼다.

  • Lower — 문자열을 소문자로 바꾼다.

  • Trim — 앞뒤 공백을 제거한다.

  • Capitalize — 각 단어의 첫 글자를 대문자로 바꾼다.

  • Split — 구분자로 문자열을 나누고 각 항목의 공백과 빈 항목을 제거한다.

  • Replace — 일치하는 모든 문자열을 교체한다.

  • Duration — 초를 짧은 시간 표현 또는 시계 형식으로 바꾼다.

  • Default — 값이 null·빈 문자열·NaN 등일 때 대체값을 사용한다. 숫자 0은 유지한다.

  • MixColor — 두 hex 색상을 비율 t로 혼합한다.

  • Now — 현재 시각을 ISO 문자열로 반환한다.

  • Today — 브라우저 시간대의 오늘 날짜를 YYYY-MM-DD로 반환한다.

  • FormatDate — 날짜를 지정한 표시 형식으로 바꾼다.

  • AddDays — 날짜에 일수를 더하거나 뺀다.

  • AddMonths — 개월 수를 더한다. 원래 날짜의 일이 새로 계산된 달에 없으면 해당 달의 마지막 날로 맞춘다.

  • DaysBetween — 두 날짜 사이의 달력상 일수 차이를 계산한다.

  • MonthsBetween — 두 날짜 사이의 온전한 개월 수를 계산한다.

  • StartOf — 날짜가 속한 주(월요일)·월·년의 시작일을 반환한다.

  • GroupBy — 키별로 묶어 합계·평균·개수 등의 집계를 반환한다.

  • Pivot — 행 키·열 키별로 데이터를 교차 집계한다.

  • Top — 필드 기준으로 가장 큰 값 또는 작은 값의 상위 N개 행을 반환한다.

  • Between — 필드가 최소·최대 범위에 있는 행을 선택한다. 양 끝을 포함하며, 경계값이 null이면 해당 방향으로는 범위를 제한하지 않는다.

  • Bucket — 날짜를 일·주·월로 묶어 집계한다. 합계·개수의 빈 기간은 0으로 채운다.

  • Cumulative — 필드 값을 순서대로 누적 합계로 바꾼 사본을 반환한다.

  • MovingAvg — 최근 window개 값의 평균으로 필드를 바꾼다.

  • Change — 이전 값 대비 현재 값의 증감률을 계산한다. 이전 값이 0이면 null이다.

  • Histogram — 숫자를 같은 폭의 구간으로 나누고 구간별 개수를 반환한다.

  • Stats — 개수·최소·최대·평균·중앙값·표준편차를 반환한다. 빈 목록의 통계값은 모두 0이다.

Append​

목록 끝에 항목을 추가한 새 목록을 반환한다.

호출 계약

Append(list: any[], item: any) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [1, 2, 3]. 예제 2: ["첫 항목"].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Append([1,2], 3)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Append([], "첫 항목")

Prepend​

목록 앞에 항목을 추가한 새 목록을 반환한다.

호출 계약

Prepend(list: any[], item: any) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [1, 2, 3]. 예제 2: ["첫 항목"].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Prepend([2,3], 1)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Prepend([], "첫 항목")

Concat​

두 목록을 이어 붙인다.

호출 계약

Concat(list: any[], more: any[]) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [1, 2, 3, 4]. 예제 2: [1].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Concat([1,2], [3,4])

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Concat([], [1])

Remove​

지정 필드 값이 일치하는 항목을 제거한다. 빈 필드명은 항목 자체를 비교한다.

호출 계약

Remove(list: any[], field: string, value: any) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: id=1만 남는다. 예제 2: ["배"].

예제 1. 기본 호출​

root = Col([Table(["id"], @Each(result, "r", [r.id]))])
result = @Remove([{"id":1},{"id":2}], "id", 2)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Remove(["사과","배"], "", "사과")

RemoveAt​

지정 인덱스의 항목을 제거한다. 인덱스는 0부터 시작하며 음수는 뒤에서 센다.

호출 계약

RemoveAt(list: any[], index: number) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: ["A", "C"]. 예제 2: ["A", "B"].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @RemoveAt(["A","B","C"], 1)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @RemoveAt(["A","B","C"], -1)

Update​

조건 필드가 일치하는 객체의 지정 필드 값을 바꾼 새 목록을 반환한다.

호출 계약

Update(list: any[], field: string, value: any, setField: string, setValue: any) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

Update(list, field, value, setField, setValue)에서 field/value는 변경할 항목을 찾는 조건이고 setField/setValue는 바꿀 필드와 새 값이다. 첫 예제는 id=1의 done을 true로 바꾸며, 두 번째는 일치하는 id=9가 없어 원본과 같은 내용을 반환한다. 입력 목록 자체를 직접 수정하지 않는다.

기대 결과

예제 1: [{"id":1,"done":true}]. 예제 2: 조건에 맞는 항목이 없어 [{"id":1,"done":false}]를 유지한다.

예제 1. 기본 호출​

root = Col([Table(["id", "done"], @Each(result, "r", [r.id, "" + r.done]))])
result = @Update([{"id":1,"done":false}], "id", 1, "done", true)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["id", "done"], @Each(result, "r", [r.id, "" + r.done]))])
result = @Update([{"id":1,"done":false}], "id", 9, "done", true)

Toggle​

항목이 없으면 추가하고 있으면 제거한다.

호출 계약

Toggle(list: any[], item: any) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: ["A", "B"]. 예제 2: ["B"].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Toggle(["A"], "B")

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Toggle(["A","B"], "A")

Includes​

목록에 항목이 있거나 문자열에 값이 포함되는지 확인한다.

호출 계약

Includes(list: any[] | string, item: any) → boolean

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: true. 예제 2: false.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Includes(["A","B"], "A")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Includes("hello", "z")

Find​

필드 값이 일치하는 첫 항목을 반환한다. 없으면 null이다.

호출 계약

Find(list: any[], field: string, value: any) → any

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: {"id":1,"name":"A"}. 예제 2: null.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null — 일치 항목 없음" : "찾은 이름: " + result.name)])
result = @Find([{"id":1,"name":"A"}], "id", 1)

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null — 일치 항목 없음" : "찾은 이름: " + result.name)])
result = @Find([{"id":1,"name":"A"}], "id", 9)

IndexOf​

목록에서 항목의 인덱스를 반환한다. 없으면 -1이다.

호출 계약

IndexOf(list: any[], item: any) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 1. 예제 2: -1.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @IndexOf(["A","B"], "B")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @IndexOf(["A","B"], "C")

Take​

앞에서 N개를 가져온다. N이 음수면 뒤에서 가져온다.

호출 계약

Take(list: any[], n: number) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [1, 2]. 예제 2: [3, 4].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Take([1,2,3,4], 2)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Take([1,2,3,4], -2)

Slice​

목록 또는 문자열을 시작 위치부터 끝 위치 직전까지 잘라낸다.

호출 계약

Slice(list: any[] | string, start: number, end?: number) → any[] | string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "bcd". 예제 2: [2, 3].

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Slice("abcdef", 1, 4)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Slice([1,2,3,4], 1, 3)

Unique​

중복을 제거하고 처음 등장한 순서를 유지한다.

호출 계약

Unique(list: any[]) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [1, 2, 3]. 예제 2: ["A", "B"].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Unique([1,1,2,3,2])

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Unique(["A","A","B"])

Reverse​

순서를 뒤집은 새 목록을 반환한다.

호출 계약

Reverse(list: any[]) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [3, 2, 1]. 예제 2: ["B", "A"].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Reverse([1,2,3])

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Reverse(["A","B"])

Range​

시작값부터 끝값 직전까지 지정 간격의 숫자를 생성한다.

호출 계약

Range(start: number, end: number, step?: number) → number[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [0, 1, 2, 3, 4]. 예제 2: [0, 2, 4, 6, 8].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Range(0, 5)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Range(0, 10, 2)

Pick​

목록에서 임의 항목을 고른다. 빈 목록은 null이다.

호출 계약

Pick(list: any[]) → any

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

버튼 클릭 후 예제 1은 A·B·C 중 하나, 예제 2는 빈 목록이므로 null이다.

예제 1. 기본 호출​

root = Col([Button("실행", @Set($result, @Pick(["A","B","C"]))), Text($result == null ? "null" : "결과: " + $result)])
$result = null

예제 2. 다른 입력 / 경계 사례​

root = Col([Button("실행", @Set($result, @Pick([]))), Text($result == null ? "null" : "결과: " + $result)])
$result = null

Shuffle​

목록을 무작위 순서로 섞은 사본을 반환한다.

호출 계약

Shuffle(list: any[]) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

실행 버튼을 누르면 동일한 항목들이 임의 순서로 표시된다. 원래와 같은 순서가 나올 수도 있다.

예제 1. 기본 호출​

root = Col([Button("실행", @Set($result, @Shuffle([1,2,3,4]))), Table(["결과"], @Each($result, "r", [r]))])
$result = []

예제 2. 다른 입력 / 경계 사례​

root = Col([Button("실행", @Set($result, @Shuffle(["A","B","C"]))), Table(["결과"], @Each($result, "r", [r]))])
$result = []

Flatten​

목록 안의 목록을 한 단계 펼친다.

호출 계약

Flatten(list: any[]) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [1, 2, 3]. 예제 2: ["A", "B", "C"].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Flatten([[1,2],[3]])

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Flatten([["A"],[],["B","C"]])

Chunk​

목록을 지정 크기의 작은 목록들로 나눈다.

호출 계약

Chunk(list: any[], size: number) → any[][]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [[1,2],[3,4],[5]]. 예제 2: [[1],[2],[3]].

예제 1. 기본 호출​

root = Col([Table(["묶음"], @Each(result, "r", [@Join(r, ", ")]))])
result = @Chunk([1,2,3,4,5], 2)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["묶음"], @Each(result, "r", [@Join(r, ", ")]))])
result = @Chunk([1,2,3], 1)

Pow​

밑을 지수만큼 거듭제곱한다.

호출 계약

Pow(base: number, exponent: number) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 8. 예제 2: 9.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Pow(2, 3)

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Pow(3, 2)

Sqrt​

제곱근을 계산한다. 음수 입력은 예외 처리 후 런타임에서 null이 된다.

호출 계약

Sqrt(number: number) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 9. 예제 2: 음수 제곱근 오류를 런타임이 처리해 null을 표시한다.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Sqrt(81)

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Sqrt(-1)

Random​

범위 안의 난수를 생성한다. 정수 모드에서는 양 끝을 포함한다.

호출 계약

Random(min: number, max: number, integer?: boolean) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

버튼 클릭 후 예제 1은 1~6 정수, 예제 2는 0 이상 1 미만의 난수다.

예제 1. 기본 호출​

root = Col([Button("실행", @Set($result, @Random(1, 6, true))), Text($result == null ? "null" : "결과: " + $result)])
$result = null

예제 2. 다른 입력 / 경계 사례​

root = Col([Button("실행", @Set($result, @Random(0, 1))), Text($result == null ? "null" : "결과: " + $result)])
$result = null

Clamp​

숫자를 최소·최대 범위 안으로 제한한다.

호출 계약

Clamp(number: number, min: number, max: number) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 100. 예제 2: 0.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Clamp(120, 0, 100)

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Clamp(-10, 0, 100)

Percent​

부분 / 전체 × 100을 계산한다. 전체가 0이면 0이다.

호출 계약

Percent(part: number, total: number) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 75. 예제 2: 전체가 0이므로 0.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Percent(3, 4)

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Percent(1, 0)

Lerp​

두 값 사이를 비율 t로 선형 보간한다.

호출 계약

Lerp(a: number, b: number, t: number) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 20. 예제 2: 30.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Lerp(10, 30, 0.5)

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Lerp(10, 30, 1)

Allocate​

총액을 가중치 비율로 배분하고 반올림 후에도 합계가 맞도록 조정한다.

호출 계약

Allocate(total: number, weights: number[], decimals?: number) → number[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [33.34,33.33,33.33]. 예제 2: [25,75]. 각 합계는 100이다.

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Allocate(100, [1,1,1], 2)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Allocate(100, [1,3], 2)

Payment​

원금·회차별 이율(퍼센트)·회차 수로 회차당 상환액을 계산한다.

호출 계약

Payment(principal: number, rate: number, periods: number) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 회차당 100. 예제 2: 회차당 약 105.58. 두 번째 이율 1은 연이율이 아니라 회차별 1%다.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Payment(1000, 0, 10)

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Payment(1000, 1, 10)

Convert​

지원되는 길이·질량·부피·속도·면적·온도 단위를 변환한다.

호출 계약

Convert(value: number, from: string, to: string) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 1000m. 예제 2: 32°F.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Convert(1, "km", "m")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Convert(0, "c", "f")

Format​

숫자를 일반·통화·퍼센트·축약 형식의 문자열로 표시한다.

호출 계약

Format(value: number, kind?: "number" | "currency" | "percent" | "compact", decimals?: number, currency?: string) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "$12,345.68". 예제 2: "45%".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Format(12345.678, "currency", 2, "USD")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Format(45, "percent", 0)

Join​

목록 항목 또는 지정 필드를 구분자로 연결한다.

호출 계약

Join(list: any[], sep?: string, field?: string) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "사과, 배". 예제 2: "A / B".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Join(["사과","배"], ", ")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Join([{"name":"A"},{"name":"B"}], " / ", "name")

Plural​

수량과 영어 단어의 단수·복수를 표시한다.

호출 계약

Plural(n: number, word: string, plural?: string) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "1 guest". 예제 2: "3 guests".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Plural(1, "guest")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Plural(3, "guest")

Pad​

문자열 앞부분을 지정한 문자로 채워 길이를 맞춘다.

호출 계약

Pad(value: string | number, length: number, char?: string) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "0007". 예제 2: "00042".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Pad(7, 4, "0")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Pad(42, 5, "0")

Upper​

문자열을 대문자로 바꾼다.

호출 계약

Upper(text: string) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "HELLO". 예제 2: "OPENUI".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Upper("Hello")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Upper("openui")

Lower​

문자열을 소문자로 바꾼다.

호출 계약

Lower(text: string) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "hello". 예제 2: "openui".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Lower("Hello")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Lower("OPENUI")

Trim​

앞뒤 공백을 제거한다.

호출 계약

Trim(text: string) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "hello". 예제 2: 빈 문자열 ""이므로 결과 문구 뒤에 내용이 없다.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Trim("  hello  ")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Trim("   ")

Capitalize​

각 단어의 첫 글자를 대문자로 바꾼다.

호출 계약

Capitalize(text: string) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "New York". 예제 2: "Hello World".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Capitalize("new york")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Capitalize("hello world")

Split​

구분자로 문자열을 나누고 각 항목의 공백과 빈 항목을 제거한다.

호출 계약

Split(text: string, sep?: string) → string[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: ["a","b","c"]. 예제 2: ["a","b","c"].

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Split("a, b,,c", ",")

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Split("a/b/c", "/")

Replace​

일치하는 모든 문자열을 교체한다.

호출 계약

Replace(text: string, find: string, replacement: string) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "dog and dog". 예제 2: "hello".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Replace("cat and cat", "cat", "dog")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Replace("hello", "z", "x")

Duration​

초를 짧은 시간 표현 또는 시계 형식으로 바꾼다.

호출 계약

Duration(seconds: number, style?: "short" | "clock") → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "1:20:00". 예제 2: "4m 05s".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Duration(4800, "clock")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Duration(245, "short")

Default​

값이 null·빈 문자열·NaN 등일 때 대체값을 사용한다. 숫자 0은 유지한다.

호출 계약

Default(value?: any, fallback: any) → any

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "미입력". 예제 2: 0이며 대체값 100을 사용하지 않는다.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Default("", "미입력")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Default(0, 100)

MixColor​

두 hex 색상을 비율 t로 혼합한다.

호출 계약

MixColor(from: string, to: string, t: number) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 흰색과 파란색의 중간 hex 색상. 예제 2: 끝 색상 "#0285ff".

예제 1. 기본 호출​

root = Col([Col([Text(result), Box(["색상 미리보기"], "col", 2, 4, result)])])
result = @MixColor("#ffffff", "#0285ff", 0.5)

예제 2. 다른 입력 / 경계 사례​

root = Col([Col([Text(result), Box(["색상 미리보기"], "col", 2, 4, result)])])
result = @MixColor("#ffffff", "#0285ff", 1)

Now​

현재 시각을 ISO 문자열로 반환한다.

호출 계약

Now() → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

실행 버튼을 누른 시점의 ISO 날짜·시간 문자열이다. 클릭 전에는 null이다.

예제 1. 기본 호출​

root = Col([Button("실행", @Set($result, @Now())), Text($result == null ? "null" : "결과: " + $result)])
$result = null

예제 2. 다른 입력 / 경계 사례​

root = Col([Button("실행", @Set($result, @Now())), Text($result == null ? "null" : "결과: " + $result)])
$result = null

Today​

브라우저 시간대의 오늘 날짜를 YYYY-MM-DD로 반환한다.

호출 계약

Today() → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

실행 버튼을 누르면 브라우저 시간대의 오늘 날짜를 YYYY-MM-DD로 표시한다.

예제 1. 기본 호출​

root = Col([Button("실행", @Set($result, @Today())), Text($result == null ? "null" : "결과: " + $result)])
$result = null

예제 2. 다른 입력 / 경계 사례​

root = Col([Button("실행", @Set($result, @Today())), Text($result == null ? "null" : "결과: " + $result)])
$result = null

FormatDate​

날짜를 지정한 표시 형식으로 바꾼다.

호출 계약

FormatDate(date: string | number, style?: "date" | "short" | "long" | "weekday" | "month" | "time" | "datetime" | "iso") → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "2026-10-25". 예제 2: 날짜를 영어의 긴 날짜 형식으로 표시한다.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @FormatDate("2026-10-25", "iso")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @FormatDate("2026-10-25", "long")

AddDays​

날짜에 일수를 더하거나 뺀다.

호출 계약

AddDays(date: string | number, days: number) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "2026-11-01". 예제 2: "2026-10-18".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @AddDays("2026-10-25", 7)

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @AddDays("2026-10-25", -7)

AddMonths​

개월 수를 더한다. 원래 날짜의 일이 새로 계산된 달에 없으면 해당 달의 마지막 날로 맞춘다.

호출 계약

AddMonths(date: string | number, months: number) → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "2026-02-28". 예제 2: "2026-09-25".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @AddMonths("2026-01-31", 1)

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @AddMonths("2026-10-25", -1)

DaysBetween​

두 날짜 사이의 달력상 일수 차이를 계산한다.

호출 계약

DaysBetween(from: string | number, to: string | number) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 24. 예제 2: -24.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @DaysBetween("2026-10-01", "2026-10-25")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @DaysBetween("2026-10-25", "2026-10-01")

MonthsBetween​

두 날짜 사이의 온전한 개월 수를 계산한다.

호출 계약

MonthsBetween(from: string | number, to: string | number) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 3. 예제 2: -3.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @MonthsBetween("2026-01-15", "2026-04-15")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @MonthsBetween("2026-04-15", "2026-01-15")

StartOf​

날짜가 속한 주(월요일)·월·년의 시작일을 반환한다.

호출 계약

StartOf(date: string | number, unit: "week" | "month" | "year") → string

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: "2026-10-19". 예제 2: "2026-10-01".

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @StartOf("2026-10-25", "week")

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @StartOf("2026-10-25", "month")

GroupBy​

키별로 묶어 합계·평균·개수 등의 집계를 반환한다.

호출 계약

GroupBy(rows: any[], key: string, field?: string, agg?: "sum" | "avg" | "count" | "min" | "max") → {key: string | number, value: number}[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: A=30, B=5. 예제 2: A=2건, B=1건.

예제 1. 기본 호출​

root = Col([Table(["key", "value"], @Each(result, "r", [r.key, r.value]))])
result = @GroupBy([{"key":"A","value":10},{"key":"A","value":20},{"key":"B","value":5}], "key", "value", "sum")

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["key", "value"], @Each(result, "r", [r.key, r.value]))])
result = @GroupBy([{"key":"A"},{"key":"A"},{"key":"B"}], "key")

Pivot​

행 키·열 키별로 데이터를 교차 집계한다.

호출 계약

Pivot(rows: any[], rowKey: string, colKey: string, field?: string, agg?: "sum" | "avg" | "count" | "min" | "max") → Record<string, string | number>[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: East 행에 A=10, B=20. 예제 2: West 행에 A=30.

예제 1. 기본 호출​

root = Col([Table(["region", "A", "B"], @Each(result, "r", [r.region, r.A, r.B]))])
result = @Pivot([{"region":"East","product":"A","value":10},{"region":"East","product":"B","value":20}], "region", "product", "value", "sum")

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["region", "A"], @Each(result, "r", [r.region, r.A]))])
result = @Pivot([{"region":"West","product":"A","value":30}], "region", "product", "value", "sum")

Top​

필드 기준으로 가장 큰 값 또는 작은 값의 상위 N개 행을 반환한다.

호출 계약

Top(rows: any[], field: string, n: number, direction?: "desc" | "asc") → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: value 30, 20 순서. 예제 2: value 10인 행.

예제 1. 기본 호출​

root = Col([Table(["value"], @Each(result, "r", [r.value]))])
result = @Top([{"value":10},{"value":30},{"value":20}], "value", 2, "desc")

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["value"], @Each(result, "r", [r.value]))])
result = @Top([{"value":10},{"value":30},{"value":20}], "value", 1, "asc")

Between​

필드가 최소·최대 범위에 있는 행을 선택한다. 양 끝을 포함하며, 경계값이 null이면 해당 방향으로는 범위를 제한하지 않는다.

호출 계약

Between(rows: any[], field: string, min?: any, max?: any) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: value 20인 행. 예제 2: value 10, 20인 행.

예제 1. 기본 호출​

root = Col([Table(["value"], @Each(result, "r", [r.value]))])
result = @Between([{"value":10},{"value":20},{"value":30}], "value", 15, 25)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["value"], @Each(result, "r", [r.value]))])
result = @Between([{"value":10},{"value":20},{"value":30}], "value", null, 20)

Bucket​

날짜를 일·주·월로 묶어 집계한다. 합계·개수의 빈 기간은 0으로 채운다.

호출 계약

Bucket(rows: any[], dateField: string, unit: "day" | "week" | "month", field?: string, agg?: "sum" | "avg" | "count" | "min" | "max") → {key: string | number, value: number}[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 10월 1일 10, 2일 0, 3일 30. 예제 2: 2026-10 합계 10, 2026-11 합계 30.

예제 1. 기본 호출​

root = Col([Table(["key", "value"], @Each(result, "r", [r.key, r.value]))])
result = @Bucket([{"date":"2026-10-01","value":10},{"date":"2026-10-03","value":30}], "date", "day", "value", "sum")

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["key", "value"], @Each(result, "r", [r.key, r.value]))])
result = @Bucket([{"date":"2026-10-01","value":10},{"date":"2026-11-01","value":30}], "date", "month", "value", "sum")

Cumulative​

필드 값을 순서대로 누적 합계로 바꾼 사본을 반환한다.

호출 계약

Cumulative(rows: any[], field: string) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [10,30,60]. 예제 2: value 10, 30인 두 행.

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @Cumulative([10,20,30], "")

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["value"], @Each(result, "r", [r.value]))])
result = @Cumulative([{"value":10},{"value":20}], "value")

MovingAvg​

최근 window개 값의 평균으로 필드를 바꾼다.

호출 계약

MovingAvg(rows: any[], field: string, window: number) → any[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: [10,15,25,35]. 예제 2: [10,15,20]. 초기 구간은 존재하는 값만 평균 낸다.

예제 1. 기본 호출​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @MovingAvg([10,20,30,40], "", 2)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["결과"], @Each(result, "r", [r]))])
result = @MovingAvg([10,20,30], "", 3)

Change​

이전 값 대비 현재 값의 증감률을 계산한다. 이전 값이 0이면 null이다.

호출 계약

Change(current: number, previous: number) → number

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 20. 예제 2: 이전 값이 0이므로 null.

예제 1. 기본 호출​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Change(120, 100)

예제 2. 다른 입력 / 경계 사례​

root = Col([Text(result == null ? "null" : "결과: " + result)])
result = @Change(120, 0)

Histogram​

숫자를 같은 폭의 구간으로 나누고 구간별 개수를 반환한다.

호출 계약

Histogram(values: number[], bins: number, min?: number, max?: number) → {key: string, value: number, start: number, end: number}[]

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: 0~5 구간 3개, 5~10 구간 3개. 예제 2: 각 구간에 숫자를 분류한 개수를 표시한다.

예제 1. 기본 호출​

root = Col([Table(["key", "value"], @Each(result, "r", [r.key, r.value]))])
result = @Histogram([1,2,3,7,8,9], 2, 0, 10)

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["key", "value"], @Each(result, "r", [r.key, r.value]))])
result = @Histogram([1,2,3,4], 4, 0, 4)

Stats​

개수·최소·최대·평균·중앙값·표준편차를 반환한다. 빈 목록의 통계값은 모두 0이다.

호출 계약

Stats(values: number[]) → {count: number, min: number, max: number, mean: number, median: number, stdev: number}

호출 인자를 바꾸면 결과가 어떻게 달라지는지 비교한다. 예제의 root는 계산 결과를 Text 또는 Table로 표시한다.

기대 결과

예제 1: count=4, min=10, max=40, mean=25, median=25, stdev 약 11.18. 예제 2: 모든 통계값 0.

예제 1. 기본 호출​

root = Col([Table(["count", "min", "max", "mean", "median", "stdev"], [[result.count, result.min, result.max, result.mean, result.median, result.stdev]])])
result = @Stats([10,20,30,40])

예제 2. 다른 입력 / 경계 사례​

root = Col([Table(["count", "min", "max", "mean", "median", "stdev"], [[result.count, result.min, result.max, result.mean, result.median, result.stdev]])])
result = @Stats([])

확인할 사항​

  • 계약의 인자 순서와 타입을 확인한다. 숫자와 숫자 문자열은 같지 않다.
  • 코드를 읽을 때 초기 상태, 이벤트 발생, 계산 결과, 화면 갱신을 순서대로 따라간다.
  • 기대 결과와 다른 경우 해당 함수나 컴포넌트의 계약, 상태 연결, 호스트의 오류 처리를 확인한다.
  • 예제는 학습용이다. 모든 호스트에서 자동 실행되거나 동일한 카탈로그가 설치돼 있다는 의미는 아니다.