테마
Handlebars.js 헬퍼
기본적인 {{#if}}, {{#unless}}, {{#each}} 헬퍼 외에도 블록 메이커에서는 다양한 헬퍼 문법을 지원해요.
| 구분 | 헬퍼(Helper) | 사용 예시 | 설명 |
|---|---|---|---|
| Conditional | and | {{#if (and property.flagA property.flagB)}} 모두 true예요 {{else}} 둘 중 하나는 false예요 {{/if}} | · 여러 조건이 모두 true일 때만 true를 반환해요.· 논리 연산에서 모든 조건이 참인지 확인할 때 사용해요. 예: {{and true true}} → true, {{and true false}} → false |
| Conditional | or | {{#if (or property.flagA property.flagB)}} 둘 중 하나는 true예요 {{else}} 모두 false예요 {{/if}} | · 여러 조건 중 하나라도 true이면 true를 반환해요.· 둘 중 하나만 참이면 되는 조건을 구성할 때 사용해요. 예: {{or false true}} → true, {{or false false}} → false |
| Conditional | isNil | {{#if (isNil property.value)}} 값이 없어요 {{else}} 값이 있어요 {{/if}} | · 값이 null 또는 undefined인지 확인해요.· 아무 값도 정의되지 않은 상태인지 확인할 때 사용해요. 예: {{isNil null}} → true, {{isNil "hello"}} → false |
| Conditional | isEmpty | {{#if (isEmpty property.text)}} 비어 있어요 {{else}} 내용이 있어요 {{/if}} | · 값이 비어 있는지를 확인해요. 문자열, 배열, 객체에 사용할 수 있어요. 예: {{isEmpty ""}} → true, {{isEmpty "abc"}} → false |
| Conditional | eq | {{#if (eq property.value 5)}} 값이 5예요 {{else}} 5가 아니에요 {{/if}} | · 두 값이 같은지를 비교해요. 예: {{eq 5 5}} → true, {{eq 5 "5"}} → false |
| Conditional | gt | {{#if (gt property.value 10)}} 10보다 커요 {{else}} 10 이하예요 {{/if}} | · 왼쪽 값이 오른쪽 값보다 큰지 비교해요. · 숫자의 크기를 비교할 때 자주 사용해요. 예: {{gt 5 3}} → true, {{gt 2 4}} → false |
| Conditional | gte | {{#if (gte property.value 10)}} 10 이상이에요 {{else}} 10 미만이에요 {{/if}} | · 왼쪽 값이 오른쪽 값보다 크거나 같은지 확인해요. · 특정 기준 이상인지 조건을 검사할 때 사용해요. 예: {{gte 5 5}} → true, {{gte 3 4}} → false |
| Conditional | lt | {{#if (lt property.value 10)}} 10보다 작아요 {{else}} 10 이상이에요 {{/if}} | · 왼쪽 값이 오른쪽 값보다 작은지 비교해요. · 값이 기준보다 작은지 확인할 때 사용해요. 예: {{lt 2 5}} → true, {{lt 7 3}} → false |
| Conditional | lte | {{#if (lte property.value 10)}} 10 이하예요 {{else}} 10 초과예요 {{/if}} | · 왼쪽 값이 오른쪽 값보다 작거나 같은지 확인해요. · 숫자가 어떤 한도를 넘지 않았는지 확인할 때 사용해요. 예: {{lte 3 3}} → true, {{lte 5 2}} → false |
| Conditional | inRange | {{#if (inRange property.value 1 10)}} 범위 안에 있어요 {{else}} 범위를 벗어났어요 {{/if}} | · 값이 두 수 사이에 있는지 확인해요. 예: {{inRange 3 1 5}} → true, {{inRange 6 1 5}} → false |
| Conditional | startsWith | {{#if (startsWith property.text "Hi")}} Hi로 시작해요 {{else}} 다른 시작이에요 {{/if}} | · 문자열이 특정 문자로 시작하는지 확인해요. · 접두사를 검사하거나 특정 구문으로 시작하는지 판단할 때 사용해요. 예: {{startsWith "hello" "he"}} → true |
| Conditional | endsWith | {{#if (endsWith property.text "ing")}} ing로 끝나요 {{else}} 다른 끝이에요 {{/if}} | · 문자열이 특정 문자로 끝나는지 확인해요. · 접미사를 검사할 때 사용해요. 예: {{endsWith "hello" "lo"}} → true |
| Conditional | includes | {{#if (includes property.text "hello")}} 'hello'가 포함되어 있어요 {{else}} 포함되어 있지 않아요 {{/if}} | · 문자열이나 배열에 특정 값이 포함되어 있는지 확인해요. · 어떤 키워드나 항목이 있는지 체크할 때 사용해요. 예: {{includes "apple" "pp"}} → true |
| Number | ceil | {{ceil property.value}} | · 숫자를 올림해요. 예: {{ceil 4.2}} → 5 |
| Number | floor | {{floor property.value}} | · 숫자를 내림해요. 예: {{floor 4.8}} → 4 |
| Number | round | {{round property.value}} | · 숫자를 반올림해요. 예: {{round 4.6}} → 5 |
| Number | add | {{add property.a property.b}} | · 두 수를 더해요. 예: {{add 2 3}} → 5 |
| Number | subtract | {{subtract property.total property.used}} | · 왼쪽 값에서 오른쪽 값을 빼요. 예: {{subtract 5 2}} → 3 |
| Number | multiply | {{multiply property.width property.height}} | · 두 수를 곱해요. 예: {{multiply 3 4}} → 12 |
| Number | divide | {{divide property.total property.count}} | · 왼쪽 값을 오른쪽 값으로 나눠요. 예: {{divide 10 2}} → 5 |
| Number | minBy | {{minBy property.people "age"}} | · 배열에서 가장 작은 값을 가진 항목을 찾아요. 예: {{minBy items "age"}} |
| Number | maxBy | {{maxBy property.students "score"}} | · 배열에서 가장 큰 값을 가진 항목을 찾아요. 예: {{maxBy items "score"}} |
| Number | meanBy | {{meanBy property.scores "value"}} | · 특정 속성의 평균을 구해요. 예: {{meanBy items "score"}} → 평균값 |
| Number | sumBy | {{sumBy property.items "count"}} | · 특정 속성의 합계를 구해요. 예: {{sumBy items "price"}} → 합계 |
| String | camelCase | {{camelCase property.text}} | · 문자열을 camelCase 형식으로 바꿔요. 예: {{camelCase "hello world"}} → helloWorld |
| String | kebabCase | {{kebabCase property.title}} | · 문자열을 kebab-case 형식으로 바꿔요. 예: {{kebabCase "Hello World"}} → hello-world |
| String | lowerCase | {{lowerCase property.text}} | · 문자열을 모두 소문자로 바꿔요 (공백 포함). 예: {{lowerCase "HELLO WORLD"}} → hello world |
| String | snakeCase | {{snakeCase property.text}} | · 문자열을 snake_case 형식으로 바꿔요. 예: {{snakeCase "Hello World"}} → hello_world |
| String | startCase | {{startCase property.text}} | · 문자열의 단어를 대문자로 시작하게 바꿔요. 예: {{startCase "hello world"}} → Hello World |
| String | upperCase | {{upperCase property.text}} | · 문자열을 모두 대문자로 바꿔요 (공백 포함). 예: {{upperCase "hello world"}} → HELLO WORLD |
| String | lowerFirst | {{lowerFirst property.word}} | · 문자열의 첫 글자만 소문자로 바꿔요. 예: {{lowerFirst "Hello"}} → hello |
| String | upperFirst | {{upperFirst property.word}} | · 문자열의 첫 글자만 대문자로 바꿔요. 예: {{upperFirst "hello"}} → Hello |
| String | toLower | {{toLower property.text}} | · 문자열을 모두 소문자로 바꿔요. 예: {{toLower "HELLO"}} → hello |
| String | toUpper | {{toUpper property.text}} | · 문자열을 모두 대문자로 바꿔요. 예: {{toUpper "hello"}} → HELLO |
| String | capitalize | {{capitalize property.text}} | · 첫 글자를 대문자로 바꿔요. 예: {{capitalize "hello"}} → Hello |
| String | padStart | {{padStart property.number 4 "0"}} | · 문자열 앞을 채워 길이를 맞춰요. 예: {{padStart "1" 3 "0"}} → 001 |
| String | padEnd | {{padEnd property.code 5 "0"}} | · 문자열 끝을 채워 길이를 맞춰요. 예: {{padEnd "a" 3 "_"}} → a__ |
| String | trim | {{trim property.text}} | · 문자열 앞뒤의 공백을 제거해요. 예: {{trim " hello "}} → hello |
| String | join | {{join property.items ", "}} | · 문자열 구분자를 사용해 배열을 하나의 문자열로 만들 수 있어요. 예: {{join property.items ", "}} → a, b, c |
| String | split | {{split property.text ","}} | · 문자열을 구분자로 나눠 배열로 만들어요. 예: {{split property.text ","}} → ["a", "b"] |
| Date | datetime | {{datetime post.createdDate}} | · ISO8601 날짜 문자열을 포맷팅해요. · 기본 포맷 사용 시에는 포맷 문자열을 생략하거나 단축 포맷( date, datetime)를 사용할 수 있어요.· 커스텀 포맷 사용 시에는 Unicode Technical Standard #35 포맷을 사용할 수 있어요. 예: {{datetime "2025-01-01T00:00:00+09:00"}} → 2025-01-01예: {{datetime "2025-01-01T00:00:00+09:00" "date"}} → 2025-01-01예: {{datetime "2025-01-01T00:00:00+09:00" "datetime"}} → 2025-01-01 00:00예: {{datetime "2025-01-01T00:00:00+09:00" "yyyy/MM/dd HH:mm" }} → 2025/01/01 00:00 |
| Array | first | {{first property.items}} | · 배열의 첫 번째 값을 가져와요. 예: {{first property.items}} → 배열의 첫 번째 항목 |
| Array | last | {{last property.items}} | · 배열의 마지막 값을 가져와요. 예: {{last property.items}} → 배열의 마지막 항목 |
| Array | slice | {{slice property.items 1 3}} | · 배열의 일부를 잘라내요. 예: {{slice property.items 1 3}} → 1번째부터 3번째 전까지 |
| Array | size | {{size property.items}} | · 배열, 문자열, 객체의 길이나 개수를 구해요. 예: {{size "abc"}} → 3 |
| Array | concat | {{concat property.items property.extra}} | · 여러 값을 배열로 이어붙여요. 예: {{concat property.items property.extra}} → 배열을 합쳐요 |
| Array | orderBy | {{orderBy property.records "name" "desc"}} | · 배열을 정렬해요. 예: {{orderBy items "name" "asc"}} |
| Array | filter | {{filter property.items "isActive"}} | · 조건에 맞는 항목만 걸러내요. 예: {{filter property.items "isActive"}} |
| Array | reject | {{reject property.tasks "completed"}} | · 조건을 만족하지 않는 항목만 걸러내요. 예: {{reject items "isDone"}} |
| Array | chunk | {{chunk property.items 2}} | · 배열을 지정한 크기로 나눠 2차원 배열로 만들어요. 예: {{chunk property.items 2}} → [[a,b],[c,d]] 형태 |
| Random | random | {{random 0 10}} | · 주어진 범위에서 무작위 수를 만들어요. 예: {{random 1 5}} → 3 |
| Random | shuffle | {{shuffle property.items}} | · 배열의 순서를 무작위로 섞어요. 예: {{shuffle property.items}} → 섞인 배열 |
| Random | sample | {{sample property.items}} | · 배열에서 무작위 항목 하나를 골라요. 예: {{sample property.items}} → 무작위 요소 하나 |
| Random | sampleSize | {{sampleSize property.items 2}} | · 배열에서 지정한 개수만큼 무작위로 골라요. 예: {{sampleSize property.items 2}} → 무작위 2개 항목 |
| Other | range | {{range 1 6}} | · 숫자 범위 배열을 만들어요. 예: {{range 0 3}} → [0, 1, 2] |
| Other | defaultTo | {{defaultTo property.value "없음"}} | · 값이 null 또는 undefined일 때 기본값을 설정해요.예: {{defaultTo null "기본값"}} → 기본값 |
| Type Converter | toInteger | {{toInteger property.value}} | · 값을 정수로 바꿔요. 예: {{toInteger 4.7}} → 4 |
| Type Converter | toNumber | {{toNumber property.string}} | · 값을 숫자로 바꿔요. 예: {{toNumber "3.14"}} → 3.14 |
| Type Converter | toString | {{toString property.value}} | · 값을 문자열로 바꿔요. 예: {{toString 123}} → 123 |
| Type Converter | toJSON | {{toJSON property.data}} | · 객체나 배열을 JSON 문자열로 바꿔요. 예: {{toJSON property.data}} → {"a":1} |
| Type Converter | fromJSON | {{fromJSON property.jsonText}} | · JSON 문자열을 다시 객체로 바꿔요. 예: {{fromJSON property.jsonText}} → 객체 |
