JavaScript - Tagged Templates

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 태그된 템플릿의 세계로 흥미로운 여정을 떠납니다. 앞서 태그된 템플릿에 대해 들어본 적이 없으시면 걱정 마세요 - 이 강의가 끝나면 당신은 프로처럼 템플릿을 태그할 수 있을 것입니다!

JavaScript - Tagged Templates

태그된 템플릿이란?

태그된 템플릿은 ES6(ECMAScript 2015)에서 도입된 강력한 기능으로, 템플릿 리터럴을 함수로 파싱할 수 있게 해줍니다. 이제 이 것은 조금 무서울 수 있지만, 템플릿 문자열에 슈퍼파워를 주는 것으로 생각해보세요!

간단히 말하면, 태그된 템플릿은 템플릿 문자열이 최종 렌더링되기 전에 처리할 수 있게 해줍니다. 마치 당신의 메시지를 보내기 전에 개인 비서가 메시지를 수정하는 것과 같습니다.

기본 문법

먼저 기본 문법을 시작해보겠습니다:

function myTag(strings, ...values) {
  // 당신의 마법이 여기에 들어갑니다
}

const result = myTag`Hello, ${name}!`;

이 예제에서 myTag은 우리의 템플릿 태그 함수입니다. 이 함수는 두 가지 유형의 인자를 받습니다:

문자열 리터럴의 배열
치환된 값들 (${} 안에 있는 것들)

태그된 템플릿을 사용하는 이유

태그된 템플릿을 왜 귀찮게 사용해야 할까요? 그럼 작은 이야기를 들려드리겠습니다.

옛날 옛적, 젊은 개발자 Alex가 있었습니다. Alex는 메시지 앱을 만들고 있었고, 누군가가 메시지에 해로운 HTML을 보내는 것을 방지하고 싶었습니다. 태그된 템플릿이 구원자가 되었습니다! Alex는 사용자 입력을 정제하고 잠재적인 보안 위험을 방지하기 위해 태그된 템플릿을 사용했습니다.

태그된 템플릿은 다음과 같은 용도로 매우 유용합니다:

사용자 입력 정제
국제화(i18n)
스타일링 (예: React의 styled-components)
그리고 더 많은 것들!

태그된 템플릿의 예제

태그된 템플릿을 실제로 사용해보는 예제를 들어보겠습니다!

예제 1: 간단한 인사

function greet(strings, ...values) {
  return `${strings[0]}${values[0].toUpperCase()}${strings[1]}`;
}

const name = "alice";
console.log(greet`Hello, ${name}!`);
// 출력: Hello, ALICE!

이 예제에서 우리의 greet 함수는 이름을 대문자로 변환합니다. strings 배열은 ["Hello, ", "!"]을 포함하며, values 배열은 ["alice"]을 포함합니다.

예제 2: HTML 이스케이프

function safeHtml(strings, ...values) {
  const escapeHtml = (str) => {
    return str.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
  };

  return strings.reduce((result, string, i) => {
    return result + string + (values[i] ? escapeHtml(values[i]) : '');
  }, '');
}

const userInput = '<script>alert("XSS attack!")</script>';
console.log(safeHtml`User input: ${userInput}`);
// 출력: User input: &lt;script&gt;alert(&quot;XSS attack!&quot;)&lt;/script&gt;

이 예제는 태그된 템플릿을 사용하여 잠재적으로 해로운 HTML을 이스케이프하는 방법을 보여줍니다. 우리의 safeHtml 함수는 특수 문자를 HTML 엔티티로 변환합니다.

예제 3: 태그된 템플릿으로 스타일링

function css(strings, ...values) {
  return strings.reduce((result, string, i) => {
    return result + string + (values[i] || '');
  }, '');
}

const color = 'red';
const fontSize = '20px';

const styles = css`
  color: ${color};
  font-size: ${fontSize};
`;

console.log(styles);
// 출력: 
//   color: red;
//   font-size: 20px;

이 예제는 태그된 템플릿을 사용하여 스타일링하는 방법을 보여줍니다. styled-components와 같은 라이브러리에서 사용되는 방식과 유사합니다.

고급 사용: 태그된 템플릿 메서드

태그된 템플릿에 메서드를 추가할 수도 있습니다. 예제를 보겠습니다:

function currency(strings, ...values) {
  const result = strings.reduce((acc, str, i) => {
    return acc + str + (values[i] || '');
  }, '');

  return {
    toString() {
      return result;
    },
    USD() {
      return '$' + result;
    },
    EUR() {
      return '€' + result;
    }
  };
}

const amount = 100;
const formatted = currency`${amount}`;

console.log(formatted.toString()); // 출력: 100
console.log(formatted.USD()); // 출력: $100
console.log(formatted.EUR()); // 출력: €100

이 예제에서 우리의 currency 태그는 메서드를 반환하여 유연한 형식화 옵션을 제공합니다.

결론

태그된 템플릿은 JavaScript에서 강력한 기능으로, 복잡한 문자열 조작과 처리를 가능하게 합니다. 이것은 단순히 문자열을 결합하는 방법을 더 멋지게 하는 것을 넘어, 더 안전하고 유연하며 표현력 있는 코드를 만드는 데 다양한 가능성을 열어줍니다.

태그된 템플릿은 강력한 도구이지만, 신중하게 사용해야 합니다. 정제, 국제화, 또는 도메인 특정 언어를 만드는 등 특정 용도에 매우 유용하지만, 단순한 문자열 치환에는 일반 템플릿 리터럴이 충분할 수 있습니다.

이제 태그된 템플릿에 대해 배웠으니, 자신만의 태그된 템플릿을 만들어보세요! 작은 포맷팅 함수로 시작해보고, 점차 더 복잡한 사용 사례로 발전시켜보세요. 행복한 코딩, 미래의 JavaScript 마스터 여러분!

메서드	설명
`strings.raw`	템플릿 리터럴의 원시 문자열에 접근합니다
`String.raw`	템플릿 리터럴의 원시 문자열 형식을 얻는 내장 태그 함수

Credits: Image by storyset