JavaScript Academy · 강의

태그된 템플릿 실전 활용 사례

태그를 사용하여 안전한 HTML과 스타일이 적용된 문자열을 만듭니다.

태그된 템플릿 실전 활용 사례은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

실전에서 사용하는 태그

태그된 템플릿은 여러 라이브러리에서 사용됩니다. HTML 이스케이프 처리, 스타일이 적용된 컴포넌트, GraphQL 쿼리, 국제화 등이 그 예입니다. 공통된 핵심은 보간값을 가로채 안전하게 처리하는 것입니다.

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

이스케이프 처리의 문제

사용자 입력으로 HTML을 만들 때 보다 작음 기호 같은 특수 문자가 마크업을 삽입할 수 있습니다. 태그 함수는 보간된 값에서만 이러한 문자를 자동으로 이스케이프 처리할 수 있습니다.

const danger = "<script>"
console.log("raw: " + danger)

이스케이프 도우미

위험한 문자를 안전한 HTML 엔티티로 바꾸는 도우미를 먼저 정의합니다.

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

안전한 HTML 태그

이제 모든 보간값은 이스케이프 처리하고 정적 템플릿 부분은 그대로 두는 태그를 만듭니다. 정적 부분은 신뢰할 수 있는 개발자가 작성하기 때문입니다.

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

정적 부분을 raw로 유지하는 이유

신뢰할 수 없는 사용자 데이터는 보간된 값뿐입니다. 리터럴 템플릿 부분은 개발자가 작성하므로 의도한 마크업이 작동하도록 이스케이프 처리하지 않고 그대로 둡니다.

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

서식 있는 출력 태그

또 다른 패턴은 보간값을 서식 표시로 감싸는 것입니다. 예를 들어 보고서의 숫자를 강조할 수 있습니다.

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

쿼리 문자열 만들기

태그는 웹 주소에 사용할 값을 인코딩할 수 있습니다. 보간된 각 부분을 이스케이프 처리하여 정적 구조는 유지하면서 데이터를 안전하게 인코딩합니다.

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

복수형 처리

태그는 값을 살펴보고 주변 텍스트를 조정할 수 있습니다. 예를 들어 단수형과 복수형 표현 중 하나를 선택할 수 있습니다.

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

들여쓰기 제거

태그는 여러 줄로 작성된 템플릿을 정리할 수 있습니다. 각 줄의 앞쪽 들여쓰기를 제거하여 깔끔한 출력을 만듭니다.

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

태그 조합

한 태그가 도우미를 호출하게 하여 동작을 겹쳐 구성할 수 있습니다. 여기서 태그는 값에 서식을 적용하고 강조까지 합니다.

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

태그를 사용하지 않을 때

간단한 문자열에는 일반 템플릿 리터럴이면 충분합니다. 이스케이프 처리나 현지화처럼 보간값을 일관되게 변환해야 할 때만 태그 함수를 사용하세요.

const name = "Lee"
console.log("Welcome, " + name)

간단히 확인하기

태그 활용 지식을 확인해 보세요.

복습

복습: 태그된 템플릿을 사용하면 안전하고 서식이 적용된 출력을 만들 수 있습니다.

HTML을 안전하게 처리하려면 보간값만 이스케이프 처리합니다
정적 부분은 신뢰할 수 있으므로 raw 상태로 유지합니다
서식 지정, 인코딩, 복수형 처리에는 태그를 사용합니다
변환이 필요하지 않다면 일반 리터럴을 우선 사용합니다

function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))

자주 묻는 질문

“태그된 템플릿 실전 활용 사례” 강의는 무료인가요?

네 — “태그된 템플릿 실전 활용 사례” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“태그된 템플릿 실전 활용 사례”에서 뭘 배우나요?

태그를 사용하여 안전한 HTML과 스타일이 적용된 문자열을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“태그된 템플릿 실전 활용 사례” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기