ES6(ECMAScript 2015) – 템플릿 리터럴 – 2 – 태그된 템플릿 리터럴

작성자 wooah
ES6(ECMAScript 2015) - 객체 리터럴 확장 - 2 - 프로토타입 축약
ES6(ECMAScript 2015) – 템플릿 리터럴 – 2 – 태그된 템플릿 리터럴

ES6(ECMAScript 2015) – 템플릿 리터럴 – 2 – 태그된 템플릿 리터럴

소제목: 태그된 템플릿 리터럴이란?

자, ES6의 템플릿 리터럴에 이어서 이제는 “태그된 템플릿 리터럴”에 대해 알아보겠습니다. 태그된 템플릿 리터럴은 템플릿 리터럴을 특별한 방식으로 처리하는 기능입니다. 이해를 돕기 위해 한 가지 비유를 들어볼게요.

태그된 템플릿 리터럴은 마치 커피 전문점에서 커피 주문을 할 때 사용되는 메뉴판에 적힌 아이템과 주문 내용을 조합하여 다양한 커피를 주문하는 것과 유사합니다. 메뉴판에는 다양한 종류의 커피가 있지만, 주문할 때 내가 원하는 종류의 커피를 선택하고 원하는 양의 설탕, 우유 등을 추가로 요청할 수 있죠. 태그된 템플릿 리터럴도 마찬가지로 원래의 템플릿을 사용하여 다양한 처리를 수행할 수 있도록 도와줍니다.

소제목: 태그된 템플릿 리터럴의 구조와 사용법

태그된 템플릿 리터럴은 기본적으로 템플릿 리터럴을 사용하면서 함수를 호출하는 방식으로 사용됩니다. 다음은 태그된 템플릿 리터럴의 구조와 사용법을 보여주는 예시입니다.

function customTag(strings, ...expressions) {
  // strings: 템플릿 리터럴의 텍스트 부분을 배열로 나타냄
  // expressions: 템플릿 리터럴의 표현식 부분을 배열로 나타냄

  // 템플릿 리터럴의 처리를 원하는 방식으로 구현
}

customTag`Hello, ${name}!`;

위 예시에서 customTag라는 함수는 템플릿 리터럴의 텍스트 부분과 표현식 부분을 인자로 받아 처리하는 역할을 합니다. 텍스트 부분은 strings 배열에, 표현식 부분은 expressions 배열에 저장됩니다.

태그된 템플릿 리터럴을 사용할 때, 템플릿 리터럴이 있는 위치에서 함수가 호출되기 때문에 우리는 해당 함수를 직접 구현하여 원하는 동작을 정의할 수 있습니다.

소제목: 태그된 템플릿 리터럴의 활용 예시

태그된 템플릿 리터럴의 활용은 다양합니다. 예를 들어서 문자열 처리, HTML 마크업 생성, 다국어 지원 등의 기능을 태그된 템플릿 리터럴을 통해 구현할 수 있습니다. 다음은 각각의 예시를 살펴보겠습니다.

1. 문자열 처리

태그된 템플릿 리터럴을 사용하여 문자열을 처리하는 기능을 구현할 수 있습니다. 예를 들어, 문자열에서 특정 패턴을 추출하거나 변형하는 등의 작업을 수행할 수 있습니다.

function highlight(strings, ...expressions) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < expressions.length) {
      result += `<strong>${expressions[i]}</strong>`;
    }
  }
  return result;
}

const name = 'Alice';
const age = 25;

const message = highlight`Hello, ${name}! You are ${age} years old.`;

console.log(message);
// 출력: Hello, <strong>Alice</strong>! You are <strong>25</strong> years old.

위의 예시에서 highlight 함수는 템플릿 리터럴의 표현식을 <strong> 태그로 감싸는 기능을 수행합니다. 이를 통해 ${name}과 ${age}가 강조된 문자열을 생성합니다.

2. HTML 마크업 생성

태그된 템플릿 리터럴을 사용하여 동적으로 HTML 마크업을 생성할 수 있습니다. 예를 들어, 데이터를 받아와 테이블 형태로 마크업을 생성하는 작업을 수행할 수 있습니다.

function createTable(strings, ...expressions) {
  let tableContent = '';
  tableContent += '<table>';
  tableContent += '<thead>';
  tableContent += '<tr>';
  tableContent += '<th>Name</th>';
  tableContent += '<th>Age</th>';
  tableContent += '</tr>';
  tableContent += '</thead>';
  tableContent += '<tbody>';

  for (let i = 0; i < expressions.length; i++) {
    const { name, age } = expressions[i];
    tableContent += '<tr>';
    tableContent += `<td>${name}</td>`;
    tableContent += `<td>${age}</td>`;
    tableContent += '</tr>';
  }

  tableContent += '</tbody>';
  tableContent += '</table>';

  return tableContent;
}

const data = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 },
];

const table = createTable`Table: ${data}`;

console.log(table);
// 출력:
// <table>
//   <thead>
//     <tr>
//       <th>Name</th>
//       <th>Age</th>
//     </tr>
//   </thead>
//   <tbody>
//     <tr>
//       <td>Alice</td>
//       <td>25</td>
//     </tr>
//     <tr>
//       <td>Bob</td>
//       <td>30</td>
//     </tr>
//     <tr>
//       <td>Charlie</td>
//       <td>35</td>
//     </tr>
//   </tbody>
// </table>

위의 예시에서 createTable 함수는 data 배열을 받아와 테이블 형태의 HTML 마크업을 생성합니다. 각 데이터 객체의 name과 age를 테이블 셀에 추가하여 동적인 테이블을 생성합니다.

3. 다국어 지원

태그된 템플릿 리터럴을 활용하여 다국어 지원 기능을 구현할 수 있습니다. 예를 들어, 언어에 따라 다른 문구를 출력하는 작업을 수행할 수 있습니다.

function translate(strings, ...expressions) {
  const lang = getCurrentLanguage(); // 현재 언어 설정을 가져오는 함수 호출
  let translation = '';

  for (let i = 0; i < strings.length; i++) {
    translation += strings[i];
    if (i < expressions.length) {
      const key = expressions[i];
      translation += getTranslation(key, lang); // 키와 언어를 이용하여 번역된 문구 가져오는 함수 호출
    }
  }

  return translation;
}

const greetingKey = 'greeting';
const name = 'Alice';

const translatedGreeting = translate`key: ${greetingKey}, name: ${name}`;

console.log(translatedGreeting);
// 출력: key: 안녕하세요, name: Alice

위의 예시에서 translate 함수는 템플릿 리터럴의 표현식을 키로 사용하여 해당 키에 해당하는 번역된 문구를 가져옵니다. 이를 통해 다국어 지원 기능을 구현할 수 있습니다.

주의해야할 점

태그된 템플릿 리터럴을 사용할 때 주의해야 할 점이 있습니다. 아래의 내용을 참고하여 사용해주세요.

  1. 템플릿 리터럴에 전달되는 값은 배열로 저장되므로, 배열 메서드를 활용할 수 있습니다. strings 배열은 템플릿 리터럴의 텍스트 부분을, expressions 배열은 표현식 부분을 담고 있습니다.

  2. 태그된 템플릿 리터럴은 함수를 호출하는 방식으로 사용되므로, 해당 함수를 정의해야 합니다. 함수의 이름은 개발자가 원하는 대로 지정할 수 있습니다.

  3. 템플릿 리터럴을 처리하는 함수 내부에서 원하는 동작을 구현할 수 있습니다. 이를 통해 다양한 기능을 구현할 수 있습니다.

  4. 템플릿 리터럴을 사용할 때 주의해야 할 점은 XSS(Cross-Site Scripting) 공격에 대비하여 적절한 데이터 검증과 이스케이프 처리를 해야 한다는 점입니다. 사용자 입력이 포함된 템플릿 리터럴을 안전하게 처리하기 위해 적절한 방어 메커니즘을 구현해야 합니다.

태그된 템플릿 리터럴은 ES6에서 도입된 유용한 기능 중 하나입니다. 텍스트 처리, HTML 마크업 생성, 다국어 지원 등 다양한 상황에서 유용하게 활용될 수 있습니다. 주의해야 할 점을 기억하면서 적절히 활용해보세요!

답글 남기기