Q1: 자바스크립트에서 템플릿 리터럴이란 무엇인가요?
A1: 템플릿 리터럴은 ES6에서 도입된 문자열 표기법으로, 백틱(``` ` ```) 기호를 사용하여 문자열을 감싸는 방식을 말합니다. 기존의 작은따옴표(' ')나 큰따옴표(" ") 사용과 달리, 여러 줄 문자열 작성과 변수 또는 표현식 삽입이 간편해졌습니다.

Q2: 템플릿 리터럴의 주요 특징은 무엇인가요?
A2:
- 백틱(``` ` ```) 사용: 문자열을 감쌀 때 백틱을 사용합니다.
- 멀티라인 지원: 여러 줄에 걸친 문자열을 그대로 표현할 수 있습니다.
- 표현식 삽입: `${expression}` 구문을 통해 문자열 내에 변수나 식을 삽입할 수 있습니다.
- 태그드 템플릿: 함수를 이용해 템플릿 리터럴을 처리하는 태그드 템플릿 기능도 지원합니다.

Q3: 템플릿 리터럴에서 표현식을 삽입하는 방법은?
A3: `${}` 안에 자바스크립트 표현식을 넣으면, 해당 표현식의 값이 문자열 내에 삽입됩니다. 예를 들어:
```javascript
const name = '홍길동';
console.log(`안녕하세요, ${name}님!`); // 출력: 안녕하세요, 홍길동님!
```

Q4: 기존 문자열 연결과 템플릿 리터럴 사용 시 차이점은?
A4: 전통적으로는 문자열과 변수를 `+` 연산자로 연결해야 했으나, 템플릿 리터럴을 사용하면 `${}` 구문으로 가독성 높고 간결하게 문자열을 작성할 수 있습니다.
예:
```javascript
// 기존 방식
'Hello, ' + name + '! Today is ' + day + '.';

// 템플릿 리터럴
`Hello, ${name}! Today is ${day}.`;
```

Q5: 템플릿 리터럴로 여러 줄 문자열을 작성하려면? A5: 백틱 안에서 줄바꿈을 그대로 입력하면 여러 줄 문자열이 생성됩니다. 별도의 이스케이프 문자 없이 가능해 코드를 깔끔하게 작성할 수 있습니다.
예:
```javascript
const text = `이것은
여러 줄에 걸친
문자열입니다.`;
```

Q6: 태그드 템플릿(Tag Template)이란?
A6: 태그드 템플릿은 템플릿 리터럴 앞에 함수 이름을 붙여 호출하는 방식으로, 템플릿 문자열과 표현식을 함수 인자로 받아 커스텀 처리할 수 있습니다. 주로 i18n, 텍스트 포맷팅, 보안 목적(예: XSS 방지) 등에 사용됩니다.
예:
```javascript
function tag(strings, ...values) {
// strings: 배열로 분리된 문자열 부분
// values: 각 ${} 표현식의 값
}
tag`Hello, ${name}!`;
```

Q7: 템플릿 리터럴을 사용하면 왜 좋은가요?
A7:
- 가독성이 좋아지고 코드가 간결해집니다.
- 여러 줄 문자열을 편리하게 작성할 수 있습니다.
- 동적 문자열 생성 시 버그가 줄어듭니다.
- 표현식 삽입이 쉽기 때문에 다양한 상황에 유연하게 대응할 수 있습니다.

---

요약하면, 자바스크립트 템플릿 리터럴은 백틱을 사용하여 문자열 내부에 변수와 표현식을 쉽게 삽입하고, 여러 줄 문자열을 작성할 수 있는 ES6 이상의 기능입니다. 이를 통해 코드의 가독성과 유지보수성이 대폭 향상됩니다.

템플릿 리터럴(Template Literal)은 자바스크립트에서 문자열을 보다 쉽게 작성하고 조작할 수 있도록 도와주는 기능입니다.

ES6(ECMAScript 2015)에서 도입된 이 기능은 여러 줄의 문자열을 작성하거나, 문자열 내에 변수를 삽입하는 등의 작업을 간편하게 수행할 수 있게 해줍니다.

템플릿 리터럴은 백틱(`) 기호로 감싸서 사용하며, 일반 문자열과는 몇 가지 중요한 차이점이 있습니다.

1. 여러 줄 문자열 전통적인 문자열에서는 줄 바꿈을 위해 `\n`을 사용해야 했습니다.

그러나 템플릿 리터럴을 사용하면 줄 바꿈을 자연스럽게 포함할 수 있습니다.

```javascript const multiLineString = `이것은 여러 줄로 구성된 문자열입니다.

`; console.log(multiLineString); ``` 위의 코드를 실행하면 줄 바꿈이 유지된 문자열이 출력됩니다.



2. 변수 및 표현식 삽입 템플릿 리터럴의 가장 큰 장점 중 하나는 문자열 내에 변수를 쉽게 삽입할 수 있다는 점입니다.

`${}` 구문을 사용하여 변수나 표현식을 삽입할 수 있습니다.

```javascript const name = "홍길동"; const age = 30; const greeting = `안녕하세요, 제 이름은 ${name}이고, 나이는 ${age}세입니다.

`; console.log(greeting); ``` 위의 예제에서 `name`과 `age` 변수가 문자열에 삽입되어 출력됩니다.



3. 표현식 사용 템플릿 리터럴 내에서는 단순한 변수뿐만 아니라 복잡한 표현식도 사용할 수 있습니다.

이를 통해 계산된 값을 문자열에 직접 삽입할 수 있습니다.

```javascript const a = 5; const b = 10; const result = `5와 10을 더하면 ${a + b}입니다.

`; console.log(result); ``` 이 경우, `${a + b}` 부분이 계산되어 `15`라는 값이 문자열에 삽입됩니다.



4. 태그드 템플릿 리터럴 템플릿 리터럴은 태그드(template-tagged) 기능을 통해 더욱 강력하게 사용할 수 있습니다.

태그드 템플릿 리터럴은 함수와 함께 사용되어, 템플릿 리터럴의 내용을 처리할 수 있게 해줍니다.

```javascript function tag(strings, ...values) { let result = ''; strings.forEach((string, index) => { result += string + (values[index] || ''); }); return result.toUpperCase(); // 모든 문자열을 대문자로 변환 } const name = "홍길동"; const age = 30; const taggedResult = tag`안녕하세요, 제 이름은 ${name}이고, 나이는 ${age}세입니다.

`; console.log(taggedResult); ``` 위의 예제에서 `tag` 함수는 템플릿 리터럴의 내용을 처리하여 대문자로 변환한 결과를 반환합니다.



5. 사용 예시 템플릿 리터럴은 다양한 상황에서 유용하게 사용될 수 있습니다.

예를 들어, HTML 템플릿을 작성할 때도 유용합니다.

```javascript const title = "안녕하세요"; const content = "이것은 템플릿 리터럴의 예시입니다.

"; const htmlTemplate = `

${title}

${content}

`; console.log(htmlTemplate); ``` 위의 코드에서는 HTML 구조를 템플릿 리터럴을 사용하여 간단하게 작성할 수 있습니다.

결론 템플릿 리터럴은 자바스크립트에서 문자열을 다루는 방식을 혁신적으로 변화시켰습니다.

여러 줄 문자열, 변수 및 표현식 삽입, 태그드 템플릿 리터럴 등의 기능을 통해 개발자는 더욱 직관적이고 가독성 높은 코드를 작성할 수 있습니다.

이러한 특성 덕분에 템플릿 리터럴은 자바스크립트 개발에서 필수적인 도구로 자리 잡고 있습니다.