Mustache 템플릿 엔진 사용법

Mustache는 다양한 언어로 사용 가능한 템플릿 엔진으로, HTML, CSS, JavaScript, Ruby, Python 등 다양한 언어에서 사용할 수 있습니다. Mustache는 간단한 구문을 사용하며, 데이터와 템플릿을 분리하여 유지 보수 및 개발 효율성을 높일 수 있습니다.

다음은 Mustache 템플릿 엔진 사용법에 대한 상세한 설명입니다.

 

Mustache는 다양한 언어로 사용 가능한 템플릿 엔진으로, HTML, CSS, JavaScript, Ruby, Python 등 다양한 언어에서 사용할 수 있습니다. Mustache는 간단한 구문을 사용하며, 데이터와 템플릿을 분리하여 유지 보수 및 개발 효율성을 높일 수 있습니다.

다음은 Mustache 템플릿 엔진 사용법에 대한 상세한 설명입니다.

 

Mustache 설치
먼저 Mustache를 사용하기 위해서는 해당 언어에 맞는 Mustache 라이브러리를 설치해야 합니다. 여기서는 JavaScript를 예시로 설명하겠습니다.

위 명령어를 통해 Mustache를 설치할 수 있습니다.

npm install mustache --save

Mustache 구문
Mustache 구문은 {{}}으로 표시합니다. 구문 내부에는 템플릿을 구성할 데이터의 키값을 넣습니다.

{{key}}

예를 들어, 데이터 객체가 다음과 같다면,

{
  "name": "John",
  "age": 30
}

Mustache 구문을 사용하여 템플릿을 작성할 수 있습니다.

<p>Name: {{name}}, Age: {{age}}</p>

위 코드는 다음과 같이 변환됩니다.

<p>Name: John, Age: 30</p>

Mustache 템플릿 사용
Mustache 템플릿은 데이터와 함께 사용됩니다. 데이터는 Mustache에 의해 처리되어 HTML로 렌더링됩니다. 다음은 Mustache 템플릿을 사용하는 예시 코드입니다.

const Mustache = require('mustache');

const template = '<p>Name: {{name}}, Age: {{age}}</p>';
const data = {
  "name": "John",
  "age": 30
};

const output = Mustache.render(template, data);
console.log(output);

위 코드를 실행하면 다음과 같이 출력됩니다.

<p>Name: John, Age: 30</p>

Mustache 조건문
Mustache에서는 조건문을 사용할 수 있습니다. 다음은 Mustache 조건문의 예시입니다.

{{#isAdult}}
<p>{{name}} is an adult.</p>
{{/isAdult}}

위 구문에서 isAdult가 true일 경우, name is an adult.가 출력됩니다. 반대로 isAdult가 false일 경우, 출력되지 않습니다. 이는 if문과 유사한 기능을 합니다.

 

조건문에 대한 데이터는 불리언 값(true 또는 false)이어야 합니다. 다음은 데이터 객체에 조건문 데이터가 포함된 예시입니다.

const data = {
  "name": "John",
  "age": 30,
  "const data = {
                    "name": "John",
                    "age": 30,
                    "isAdult": true
                    };

조건문 데이터를 템플릿과 함께 사용할 때는 `Mustache.render()` 함수를 사용합니다.

const output = Mustache.render(template, data);
console.log(output);

위 코드를 실행하면 다음과 같이 출력됩니다.

<p>John is an adult.</p>

Mustache 반복문
Mustache에서는 반복문을 사용할 수 있습니다. 다음은 Mustache 반복문의 예시입니다.

{{#people}}
  <p>Name: {{name}}, Age: {{age}}</p>
{{/people}}

위 구문에서 people은 배열이어야 하며, 배열의 각 요소에 대해 템플릿을 반복해서 출력합니다.

반복문에 대한 데이터는 배열 형태여야 합니다. 다음은 데이터 객체에 반복문 데이터가 포함된 예시입니다.

const data = {
  "people": [
    { "name": "John", "age": 30 },
    { "name": "Jane", "age": 25 },
    { "name": "Bob", "age": 35 }
  ]
};

반복문 데이터를 템플릿과 함께 사용할 때는 Mustache.render() 함수를 사용합니다.

const output = Mustache.render(template, data);
console.log(output);

위 코드를 실행하면 다음과 같이 출력됩니다.

<p>Name: John, Age: 30</p>
<p>Name: Jane, Age: 25</p>
<p>Name: Bob, Age: 35</p>

Mustache 삼항 연산자
Mustache에서는 삼항 연산자를 사용할 수 있습니다. 다음은 Mustache 삼항 연산자의 예시입니다.

<p>{{#isAdult}}Adult{{^}}Child{{/isAdult}}</p>

위 구문에서 isAdult가 true일 경우 Adult가 출력됩니다. 반대로 isAdult가 false일 경우 Child가 출력됩니다. 이는 삼항 연산자의 기능과 유사합니다.

결론
이상으로 Mustache 템플릿 엔진의 사용법에 대한 상세한 설명을 마치겠습니다. Mustache는 간단한 구문과 데이터 분리 기능을 통해 유지 보수 및 개발 효율성을 높일 수 있는 템플릿 엔진입니다. 여러분도 Mustache를 사용하여 다양한 프로젝트를 개발해보세요!