자바스크립트 백틱 사용에 대하여

백틱(`)은 ES6(ES2015)에서 도입된 **템플릿 리터럴(Template Literal)**을 위한 문자열 표기법입니다.

주요 기능

1. 문자열 보간 (String Interpolation)

변수나 표현식을 문자열 안에 바로 삽입할 수 있습니다.

javascript

const name = "철수";
const age = 25;

// 기존 방식
console.log("이름: " + name + ", 나이: " + age);

// 백틱 방식
console.log(`이름: ${name}, 나이: ${age}`);

2. 여러 줄 문자열 (Multiline String)

줄바꿈을 그대로 표현할 수 있습니다.

javascript

// 기존 방식 (\n 필요)
const text1 = "첫 번째 줄\n두 번째 줄";

// 백틱 방식
const text2 = `첫 번째 줄
두 번째 줄`;

3. 표현식 삽입

${} 안에 연산, 함수 호출 등 모든 JS 표현식을 넣을 수 있습니다.

javascript

const a = 10, b = 20;

console.log(`합계: ${a + b}`);           // 합계: 30
console.log(`대문자: ${"hello".toUpperCase()}`); // 대문자: HELLO
console.log(`짝수? ${a % 2 === 0 ? "예" : "아니오"}`); // 짝수? 예

4. 태그드 템플릿 (Tagged Template)

함수로 템플릿 리터럴을 파싱할 수 있는 고급 기능입니다.

javascript

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) =>
    `${result}${str}${values[i] ? `<b>${values[i]}</b>` : ""}`, "");
}

const name = "철수";
const score = 100;
console.log(highlight`${name}의 점수는 ${score}점입니다.`);
// <b>철수</b>의 점수는 <b>100</b>점입니다.

따옴표와 비교

구분	큰따옴표 "	작은따옴표 '	백틱 `
변수 삽입	❌	❌	✅ ${}
여러 줄	❌	❌	✅
따옴표 혼용	' 가능	" 가능	둘 다 가능

실용적인 활용 예

javascript

// HTML 생성
const items = ["사과", "바나나", "포도"];
const html = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join("")}
  </ul>
`;

// URL 조합
const userId = 42;
const url = `https://api.example.com/users/${userId}/profile`;

백틱은 현대 자바스크립트에서 문자열을 다루는 가장 편리하고 강력한 방법으로, 특히 동적인 문자열을 만들 때 필수적으로 사용됩니다.