CMS: CMS 표현식을 사용해 텍스트 문자열 조작하기
13 분 분량
CMS 표현식을 사용하면 Velo 또는 JS 코드를 사용하지 않고도 CMS의 잠재력을 최대한 활용할 수 있습니다.
표현식을 사용하면 정적 텍스트를 단일 텍스트 문자열 형식인 여러 컬렉션 입력란의 동적 값과 결합할 수 있습니다. 동적 날짜, 시간 및 숫자에 서식을 적용해 필요에 따라 표시하세요. 계산에 숫자 입력란을 사용하는 수학 방정식을 생성합니다. 동일한 표현식에 함수를 결합해 무한한 가능성을 열 수도 있습니다.
이 과정에 대한 개요를 알아보려면, Ultimate CMS 가이드 동영상을 확인하세요.
CMS 표현식 함수 정보
CMS 표현식은 함수, 리터럴 값 및 컬렉션 입력란 값을 결합해 새로운 방식으로 사이트의 데이터를 표시합니다.
지원되는 페이지 요소를 데이터세트에 연결한 후에는, 텍스트 값을 CMS 표현식에 연결할 수 있습니다. 그런 다음 함수, 입력란 ID, 문자열, 숫자 및 기타 구문으로 구성된 표현식을 생성합니다. 그러면 연결된 요소의 텍스트는 표현식 계산 결과를 표시합니다.
표현식은 다음 구조로 구성됩니다.
- 함수: 함수 뒤 괄호 안에 표시되는 값을 쉼표로 구분해 계산하는 방법을 정의합니다(예: MULTIPLY(price, count), DAYS(_createdDate, NOW()), CONCAT("Created on ", _created Date)).
- 입력란 ID: 각 컬렉션 입력란의 고유 식별자입니다(예: title, _createdDate, clientName).
- 문자열: 문자, 숫자, 기호 및 공백을 포함할 수 있는 일련의 문자입니다.
- 문자열 리터럴: 정적 텍스트를 표시하는 데 사용되는 따옴표로 묶인 일련의 문자입니다(예: "Hello", 'Hello', '"Errata" by Kevin Young', "\"Errata\" by Kevin Young", "backslash is \\, forward slash is /").
- 숫자 리터럴: 함수에 사용되는 숫자 값입니다(예: 123, 1000, 3.14).
- 배열 리터럴: 일반적으로 동일한 유형의 값의 정렬된 컬렉션인 배열을 표현하는 방법으로, 대괄호로 묶입니다(예: 1,2,3], ["cat", "dog", "mouse"]).
- 특수 상수: 함수 범위 내에서 특정 의미를 가진 사전 정의된 값입니다(예: true, false, undefined, null).
표현식은 대소문자를 구분합니다. 표현식 내에서 입력란을 사용하는 경우, 입력란 이름 대신 입력란 ID를 사용하고, 입력란 ID 또한 대소문자를 구분합니다.
표현식을 입력하면 함수 및 입력란 ID를 올바르게 사용하는 데 도움이 되는 제안을 받게 됩니다. 에디터에서 입력란 ID를 더 쉽게 볼 수 있도록 [개발자 모드를 활성화하세요.
표현식 작성에 대한 중요 정보:
- 컬렉션 입력란 참조 시 입력란 이름 대신 입력란 ID를 입력합니다. 입력란 ID는 입력란 이름과 달리 각 컬렉션 입력란의 고유 식별자입니다.
- 함수 및 입력란 ID는 대소문자를 구분합니다. 두 단어 모두 대문자로 표시되는지 주의합니다.
- CONCAT 함수의 경우 '정적' 문자열 리터럴 값을 따옴표로 묶어야 합니다. 여기에는 정적 문장 부호 및 참조된 입력란 사이의 공백이 포함됩니다.
- 함수가 작동하지 않는 경우, 표현식 입력란 하단의 오류 메시지에서 문제를 해결하는 방법을 확인합니다.
데이터세트의 표현식에 요소 연결하기
먼저 해당 요소를 CMS에 연결하고 표현식 연결 옵션을 선택하세요. 사용하고자 하는 표현식을 입력합니다. 표현식 생성에 대한 도움말은 다음 섹션을 참조하세요.
Wix 에디터
에디터 X
Studio 에디터
- 에디터에서 CMS에 연결할 요소를 클릭합니다(예: 텍스트, 버튼, 갤러리).
- CMS에 연결
아이콘을 클릭합니다. - 데이터세트 선택 드롭다운을 클릭해 컬렉션에 연결할 기존 데이터세트를 선택합니다. 또는 데이터세트 추가를 클릭한 후 연결할 컬렉션을 선택합니다.
- 연결 옵션에서 해당 드롭다운을 클릭한 후 표현식을 선택합니다.
- 표현식 입력란을 클릭합니다.
- 사용하고자 하는 함수의 이름을 입력합니다(예: CONCAT, DATE, TEXT).
도움말: 입력을 시작하면 사용 가능한 함수 목록에서 선택할 수 있습니다.
- 여는 괄호(()를 입력합니다.
- 표현식에 사용할 입력란 ID 또는 값을 입력합니다. 입력 시 선택할 수 있는 매칭 입력란 ID 목록이 표시됩니다.
- 닫는 괄호())를 입력합니다.
표현식 예시
다음 섹션에서 다양한 유형의 표현식 작성에 대한 예시를 확인하세요.
문자열 접합을 사용해 여러 입력란의 값 결합하기
CONCAT 함수를 사용해 여러 컬렉션 입력란의 값을 단일 텍스트 입력란으로 결합하세요. 함수에 고유한 텍스트를 추가해 정적 문자와 동적 값을 결합합니다. 정적 문자는 변경되지 않지만 동적 값은 데이터세트에서 검색한 아이템에 따라 변경됩니다. 공백과 구두점을 포함한 모든 정적 텍스트는 따옴표로 묶여야 합니다(예: " " 또는 ",").
다른 함수를 사용해 유사한 작업을 수행할 수 있으며, 고급 작업을 위해 함수 내 함수를 결합할 수도 있습니다. 표현식에 문제가 있는 경우, 오류 메시지에서 해결 방법에 대한 단서를 확인하세요.
CONCAT 함수 사용의 예시는 동적 아이템 페이지 소개를 위한 사용자 지정 텍스트를 생성하는 것입니다. 텍스트는 이름별로 각 회원을 소개하고 직책, 회사에 근무한 기간 등을 언급할 수 있습니다. 해당 표현식은 다음과 같이 표시됩니다.
1CONCAT("Our ",jobTitle,", ",title,", has worked here since ",date,".")이 예시에서는 다음을 확인할 수 있습니다.
JobTitle 입력란 ID는 각 회원의 직책이 포함된 컬렉션 입력란을 나타냅니다. title 입력란 ID는 각 회원의 이름이 있는 입력란의 ID입니다. hireDate 키는 각 회원의 근무 시작일이 포함된 입력란에서 가져옵니다. 모든 정적 텍스트와 문장 부호가 따옴표로 묶여 있는 것을 볼 수 있습니다.
함수를 결합하고 월 또는 일 없이 연도를 표시하는 방법
CONCAT 함수 사용에 대한 더 기본적인 예시는 아래 표를 확인하세요.
사용 사례 | 표현식 | 예시 | 결과 |
|---|---|---|---|
공백 또는 구두점 없이 입력란 값 결합 | CONCAT(value,value) | CONCAT(title,jobTitle) | Brian ChangVP Product |
쉼표 및 공백으로 구분된 입력란 값 결합 | CONCAT(value,", ",value) | CONCAT(title,", ",jobTitle) | Brian Chang, VP Product |
정적 텍스트와 입력란 값 결합 | CONCAT("Hello, ",value) | CONCAT("Hello, ",title) | Hello, Brian Chang |
시작 및 끝에 정적 텍스트가 있는 입력란 값 결합 | CONCAT("Hello, ",value,", welcome back.") | CONCAT("Hello, ",title,", welcome back.") | Hello, Brian Chang, welcome back. |
날짜/시간 서식 지정하기
라이브 사이트에서 날짜 및 시간 서식이 지정되는 방식을 제어하거나 날짜에서 값을 계산하려면 날짜/시간 함수를 사용하세요. 이러한 함수는 날짜, 시간 및 숫자 입력란 유형에서 작동합니다.
위 예시에서는 다음을 확인하세요.
DAYS 함수는 동적 dueDate 입력란과 오늘 날짜 사이의 일 수를 반환합니다. DAYS 함수와 TODAY 함수 뿐 아니라 정적 및 동적 텍스트를 병합하는 데 사용되는 CONCAT 함수를 어떻게 결합하는지 확인하세요.
아래에서 해당 함수를 클릭해 자세한 내용을 확인하세요.
DATE
DATEVALUE
YEAR
MONTH
DAY
HOUR
MINUTE
SECOND
DAYS
DAYS360
EDATE
EOMONTH
NETWORKDAYS
NETWORKDAYSINTL
NOW
TODAY
TIME
TIMEVALUE
WEEKDAY
ISOWEEKNUM
WEEKNUM
WORKDAY
WORKDAYINTL
YEARFRAC
TEXT 함수를 사용한 숫자 서식 지정
TEXT 함수를 사용해 숫자에 서식을 적용하세요. 예를 들어, 숫자 입력란 유형의 값을 통화 또는 백분율로 서식을 지정할 수 있습니다.
위 예시에서는 다음을 확인하세요.
TEXT 함수는 숫자 입력란 유형(price)의 서식을 달러 금액으로 지정합니다. TEXT 함수가 CONCAT 함수 내에 어떻게 삽입되어 가격 앞에 정적 텍스트를 추가하는지 확인하세요.
아래를 클릭해 TEXT 함수 사용 예제를 확인하세요.
숫자를 통화 형식으로 변환하기
숫자를 백분율(%) 형식으로 변환하기
수학 함수
수학 함수를 사용해 다양한 숫자 입력란 유형 및/또는 정적 숫자를 기반으로 계산을 수행할 수 있습니다.
위 예시에서는 다음을 확인하세요.
MINUS 함수는 20-11=9를 계산합니다. 20 값은 정적이지만 숫자 입력란 값(rewardPoints)은 동적입니다. 식이 정적 텍스트와 동적 값을 결합하는 CONCAT 함수 내에 MINUS 함수를 삽입하는 방법을 확인하세요.
아래 표에서 수식 사용에 대한 더 많은 예제를 확인하세요.
사용 사례 | 표현식 | 예시 | 결과 |
|---|---|---|---|
두 숫자의 합계 계산 | ADD(value,value) | ADD(number1,number2) 추가(4,20) | 24 |
두 숫자의 차이 계산하기 | MINUS(value,value) | MINUS(number1,number2) MINUS(100,1) | 99 |
두 숫자를 곱한 값을 계산합니다. | MULTIPLY(value,value) | MULTIPLY(number1,number2) MULTIPLY(2,4) | 6 |
한 숫자를 다른 숫자로 나눈 값 계산 | DIVIDE(value,value) | DIVIDE(number1,number2) DIVIDE(10,2) | 5명 |
2 개의 값이 같으면 "true"를 반환하고, 그렇지 않으면 "false"를 반환합니다. | EQ(value,value) | EQ(number1,number2) EQ(200,200) | true |
숫자('x')의 거듭제곱('y') | POW(x,y) | POW(2,3) POW(3,3) | 8 27 |
두 값이 동일한지 확인합니다. | EQ (Equal) | EQ(5,5) | true |
두 값이 같지 않은지 확인합니다. | NE (Not Equal) | NE(5,7) | true |
한 값이 다른 값보다 큰지 확인합니다. | GT (Greater Than) | GT(7,5) GT(7,7) | true false |
한 값이 다른 값보다 작은지 확인합니다. | LT (Less Than) | LT(5,7) LT(7,5) | true false |
한 값이 다른 값보다 크거나 같은지 확인합니다. | GTE (Greater Than or Equal) | GTE(7,5) GTE(5,5) GTE(5,4) | true true false |
한 값이 다른 값보다 작거나 같은지 확인합니다. | LTE (Less Than or Equal) | LTE(5,7) LTE(5,5) LTE(5,4) | true true false |
자주 묻는 질문
표현식 사용에 대한 자주 묻는 질문에 대한 답변을 확인하려면 아래를 클릭하세요.
어떤 요소에 표현식을 사용할 수 있나요?
입력란 ID는 어디에서 찾을 수 있나요?
아이콘을 클릭하세요. 여기에서 관련 컬렉션을 클릭해 확장하고 각 입력란 옆의 괄호 안에 입력란 ID를 볼 수 있습니다. 
도움이 되었나요?
|