{{InteractionDefaults.Email}} 이중 중괄호 의미를 찾아서

Salesforce CustomActivity 를 공부하다가 생소한 패턴을 만났다!

 

https://trailhead.salesforce.com/ko/trailblazer-community/feed/0D54S00000A8F3dSAF

Getting default Interaction Email | Salesforce Trailblazer Community

 

링크 내용을 읽어보면  "EmailAddress": "{{Contact.Attribute.JulioTest.EmailAddress}}" 라는 부분이 있다.

{{

json 에서 { 또는 [ 를 사용한다. { 을 대개는 한 번만 쓰는데, 그냥 남들과 달라보이려고 한 번 더 쓴것일까?

 

 

 

AngularJS 일까?

 

구글링을 해본 결과 AngularJS 문법일 수도 있고 mustache 문법일 수도 있을 것 같다.

 

우선 AngularJS 는 따라하기가 아주 쉬웠다.

 

https://www.w3schools.com/angular/tryit.asp?filename=try_ng_expression_3

W3Schools online HTML editor

 

https://www.w3schools.com/angular/angular_expressions.asp

Angular Expressions

 

 

그러나, {{ ... }} 패턴은 동일하지만 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 와 같은 부분이 있어야하며, {{ } 내부에는 연산 기능을 주로 사용하는 것으로 보여 내가 찾는 것과는 조금 다른 느낌이다.

 

 

 

mustache 를 공부해보자!

 

AngularJS  보다는 왠지 mustache 일 가능성이 높아 보인다. 그런데 mustache 실습이 간단하지 않다.

 

https://github.com/janl/mustache.js

GitHub - janl/mustache.js: Minimal templating with {{mustaches}} in JavaScript

 

 

Install

You can get Mustache via npm.

$ npm install mustache --save

 

Usage

Below is a quick example how to use mustache.js:

const Mustache = require('mustache');

const view = {
  title: "Joe",
  calc: () => ( 2 + 4 )
};

const output = Mustache.render("{{title}} spends {{calc}}", view);

 

In this example, the Mustache.render function takes two parameters: 1) the mustache template and 2) a view object that contains the data and code needed to render the template.

 

 

따라는 해보았는데 아직 선수 지식이 부족해서인지 정확히 어떻게 실습을 할지 모르겠다.

 

npm install mustache 한 다음에 node mustache.js 하면 아무런 반응이 없다.

npm install mustache --save
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'jb-activity-template@1.0.0',
npm WARN EBADENGINE   required: { node: '6.11.1' },
npm WARN EBADENGINE   current: { node: 'v20.9.0', npm: '10.1.0' }
npm WARN EBADENGINE }

added 1 package, and audited 530 packages in 5s

26 packages are looking for funding
  run `npm fund` for details

18 vulnerabilities (8 moderate, 9 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
PS D:\example-rest-activity> node mustache.js
PS D:\example-rest-activity> 

 

 

public 폴더 아래에 mustache.js 를 만들고 브라우저에서 접근(http://localhost:3000/mustache.js)하면 소스코드 그대로 노출되버린다.

 

바보같은 짓인가?

 

 

동영상을 보고 스터디를 해보자

 

How to Use Template Engines for Beginners in Node.js

https://youtu.be/5uQWAxsV4_g?si=Ts20qJM8cl8jnIx-

 

 

소스코드에 {{ }} 패턴이 있다. phoneValue = "{{Contact.Default.SMS}}";  라는 부분이다. 그런데 VSCode 에서 View - Search 를 통해 검색해보면 mustache 나 angular 라는 텍스트는 찾을 수 없다.

 

 

이것 저것 공부를 조금 해본 결과, mustache 는 정규표현식과 같은 하나의 표현식이며, 다양한 프레임워크에서 활용하는 것으로 보인다.  

 

 

 

Vue / Angular / Mustache Expression

비슷비슷해 보이고 헷갈리는데, 이해에 도움이 되는 블로그가 있다.

 

Vue는 Angular의 양방향 데이터 바인딩과, React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크다.
Vue 에서는 {{}} 콧수염 모양을 닮았다고 해서 콧수염 표현식 {{Mustache Expression}}을 사용하여 HTML DOM에 데이터를 렌더링한다.

https://mkil.tistory.com/435

Vue.js 입문 공부(1) /view정의,장점,예제 등

 

 

Marketing Cloud APIs and SDKs 에서 찾아보니

Salesforce 내부적으로 mustache syntax 를 사용하면 특정한 기능이 동작되도록 서버단에서 구현이 되어있는 것으로 보인다.

Data Binding Syntax Basics 

 

Using Mustache syntax provides a similar experience to using personalization strings in Marketing Cloud. However, Marketing Cloud limits Data Binding to Contacts and Event Data for a journey for the supplied Contact.

 

https://developer.salesforce.com/docs/marketing/marketing-cloud/guide/how-data-binding-works.html#data-binding-syntax-basics

How Data Binding Works | APIs | Marketing Cloud APIs and SDKs | Salesforce Developers