ChatGPT와 JavaScript 공부:템플릿 리터럴(Template literals)

ChatGPT와 JavaScript 공부:템플릿 리터럴(Template literals)

이번 포스트에서는 JavaScript의 템플릿 리터럴(Template literals)에 대해서 공부해 보고자 한다.
ES6부터 도입된 기능으로, 백틱(`)[키보드상 물결(~)키]로 사용할 수 있다.
JavaScript를 공부하기 시작했을 때 배웠던 것인데, 사실 이름은 몰랐었다.
ChatGPT를 통해 자세히 알아보는 시간을 가질 건데, 이번에는 직접 물어보지 않고 ChatGPT Plugin 중에 WebPilot을 사용해서 템플릿 리터럴의 문서를 가지고 요약해서 공부를 해볼까 한다.
ChatGPT Plugin 사용법 및 WebPilot이 무엇인지는 이전에 포스트를 참고 부탁드린다.

2023.05.16 - [With chatGPT/Others] - ChatGPT Plugin 과연 어떨까? 사용방법과 리뷰

ChatGPT Plugin 과연 어떨까? 사용방법과 리뷰

Question

아래 URL을 읽고 내용을 정리해줘.

Template literals mdn web docs URL

Answer

자바스크립트의 템플릿 리터럴에 대한 내용입니다.

템플릿 리터럴이란?

템플릿 리터럴은 백틱(`) 문자로 구분되는 리터럴입니다.
이를 통해 여러 줄의 문자열, 문자열 내부에 표현식을 삽입하거나, 태그된 템플릿이라는 특별한 구조를 사용할 수 있습니다.

템플릿 리터럴의 구문

기본적인 템플릿 리터럴의 구문은 다음과 같습니다.

`string text`
`string text line 1
 string text line 2`
`string text ${expression} string text`
tagFunction`string text ${expression} string text`

여기서 `string text`는 템플릿 리터럴의 일부가 되는 문자열 텍스트이며, `expression`은 현재 위치에 삽입될 표현식입니다. `tagFunction`은 선택적으로 지정할 수 있으며, 템플릿 문자열 배열과 대체 표현식을 인수로 받아 템플릿 리터럴의 값이 되는 반환값을 생성합니다.

템플릿 리터럴을 사용하지 않고 코드를 작성하면 아래와 같다.

// 예전 방식
let name = 'John';
let greeting = 'Hello, ' + name + '!'; // "Hello, John!"

이를 템플릿 리터럴을 사용한 예시를 작성한다면,

// 템플릿 리터럴
let name = 'John';
let greeting = `Hello, ${name}!`;  // "Hello, John!"

이렇게 사용할 수 있다.
이 예시만 봐도 코드의 가독성을 대폭 향상시켜준 다는 것을 알 수 있다.
Python에도 똑같은 기능을 가진 f-string(Formatted String Literals)가 있다.

# Python f-string
name = 'John'
greeting = f'Hello, {name}!' # Hello, John!

템플릿 리터럴의 특징

템플릿 리터럴은 백틱(`) 문자로 둘러싸입니다. 이는 일반적인 문자열에서 사용하는 큰따옴표(")나 작은따옴표(')와는 다릅니다.

템플릿 리터럴 내부에는 `${expression}` 형태의 플레이스홀더를 포함할 수 있습니다.
이 플레이스홀더는 문자열과 함께 함수에 전달되며, 이 함수는 기본적으로 문자열 보간을 수행하여 플레이스홀더를 대체하고 부분을 하나의 문자열로 연결합니다.

템플릿 리터럴 앞에 함수 이름을 붙여 사용하면, 이를 태그된 템플릿(Tagged templates)이라고 합니다.
이 경우, 템플릿 리터럴은 태그 함수에 전달되며, 여기서 템플릿 리터럴의 다른 부분에 대해 원하는 작업을 수행할 수 있습니다.

Tagged templates

태그된 템플릿은 템플릿 리터럴 앞에 함수를 붙여 사용하는 형태입니다.
이 함수는 템플릿 문자열 배열과 대체 표현식을 인수로 받아, 이를 기반으로 원하는 작업을 수행하고 결과를 반환합니다.

태그 함수는 문자열을 반환할 필요는 없으며, 필요에 따라 다른 형태의 값을 반환할 수도 있습니다.

아래는 Tagged templates의 샘플 예시이다.

// 태그 함수 정의
function tagFunction(strings, ...values) {
    let result = '';
    strings.forEach((string, index) => {
        result += string + (values[index] || '');
    });
    return result;
}

// 태그된 템플릿 사용
let person = '홍길동';
let age = 30;
let message = tagFunction`안녕하세요, 제 이름은 ${person}이고, 나이는 ${age}세입니다.`;

console.log(message);
// 출력: "안녕하세요, 제 이름은 홍길동이고, 나이는 30세입니다."

원시 문자열(Raw strings)

태그 함수의 첫 번째 인수에는 원시 속성(raw)이 있습니다.
이를 통해 이스케이프 시퀀스를 처리하지 않고 입력된 그대로의 문자열을 얻을 수 있습니다.
이는 String.raw() 메서드를 사용하여 원시 문자열을 생성할 때와 동일합니다.

Raw strings는 이스케이프 시퀀스를 처리하지 않고 문자열을 그대로 사용하는 것을 의미한다.
간단히 말해서 원본 상태의 문자열을 출력한다.

let normalString = "줄바꿈\n탭\t이스케이프 시퀀스";
console.log(normalString);
// 출력: "줄바꿈
//       탭    이스케이프 시퀀스"

let rawString = String.raw`줄바꿈\n탭\t이스케이프 시퀀스`;
console.log(rawString);
// 출력: "줄바꿈\\n탭\\t이스케이프 시퀀스"

주의할 점

템플릿 리터럴 내에서 백틱을 이스케이프하려면 백슬래시(\)를 백틱 앞에 두어야 합니다.

`\`` === "`"; // true

달러 기호도 이스케이프하여 보간을 방지할 수 있습니다.

`\${1}` === "${1}"; // true

브라우저 호환성

템플릿 리터럴은 대부분의 최신 브라우저에서 지원됩니다.
그러나 일부 브라우저에서는 이 기능을 명시적으로 활성화해야 할 수도 있습니다.

ChatGPT Plugin WebPilot을 사용해서 템플릿 리터럴에 대해서 공부해 보는 시간을 가져 보았다.
사실 이름만 몰랐고 기능 자체는 알고 있었으나 ChatGPT로 디테일하게 알아보았다.
공부하기 정말 좋은 시대인 것 같다.

문서 링크만 줘도 내용을 아주 잘 요약해 줘서 큰 시간 소요 없이 빠르게 알아볼 수 있었다.
ChatGPT가 백틱(`)을 작성하는 부분에서 약간 잘못 출력해 주는 경우가 있었는데 이런 부분만 조심하면 될 것 같다.
샘플 코드도 ChatGPT에게 요청해서 답변 받은 건데 이해하는 데 도움이 많이 되었다.
ChatGPT로 공부하는 게 생각보다 도움이 많이 되는 것 같다.
굳이 프로그래밍 공부뿐만이 아닌 다른 분야를 공부하기에도, 영어든 다른 언어를 공부하기에도 너무 좋은 것 같다. (물론 나의 의지가 문제겠지만...)

아무튼 템플릿 리터럴에 대해서 자세히 알게 되어 좋았으며, 포스트 작성도 즐겁게 작성할 수 있었던 좋은 시간이었다.