JS #1 :: 템플릿 문자열(Template Literals)에 관하여

해다·2022년 3월 15일
0

JavaScript & TypeScript

목록 보기
1/10
post-thumbnail

🙊 잘못 기재한 부분이 있다면 댓글로 남겨주세요!


구구절절 또 알아보는 버릇이 도져서 찾아봤다. Template은 느낌적으로 알겠는데 여기서의 Literal이 대체 어떤 의미로 쓰였는지 궁금했다. 자바스크립트에서의 '리터럴(literal')이란 프로그램 안에서 개발자가 직접 제공한 값이며, 값을 만드는 방법이다. 자바스크립트는 개발자가 제공한 리터럴의 값을 받아 데이터를 만든다고 한다.

그 수많은 값 중 텍스트 데이터, 즉 문자열을 받는 리터럴(방법)으로 작은 따옴표(' '), 큰 따옴표(" "), 그리고 백틱(`)을 사용하는 것이다.

개발 공부를 하기 전에는 단언컨대 백틱이란 문장부호를 사용한 적이 없다. 한글에는 용례가 없는 문장부호이기 때문에 백틱을 번역한 단어가 없나? 그렇다고 하기엔 영어에서 백틱을 사용하는 것도 본 적이 없다. 보통 apostrophe를 쓰지...

하여튼 개발 공부, 그것도 자바스크립트-ES6-에서 볼 수 있는 문자열의 리터럴이다.(참고: Es6이전 ES2015의 사양 명세서에서는 템플릿 문자열(template strings)라고 쓰였다고 한다.) 어디서 본 듯 안 본 듯한 리터럴인데, 하여간 처음 봤다.
보통 변수를 사용해서 표현하지 않나? 그걸 하나하나 입력하는게 귀찮았던 개발자들의 피 땀 눈물로 만들어진 모양이다.

ES6 이전에는 변수나 상수를 문자열로 쓰는 방법은 특별히 외부 라이브러리를 사용하지 않는 한 문자열 병합 뿐이었다. 그러나 템플릿 문자열이 도입되고 이를 이용해 내장된 표현식을 삽입하거나 여러 줄의 문자열 삽입, 문자열 형식화, 문자열 태깅 등의 다양한 기능을 사용할 수 있게 되었다.

템플릿 리터럴은 그중에서도 플레이스홀더를 이용한 표현식에서 ${expression} 형태로 자주 쓰이는 것 같다. 근데 아직은 번거롭고 복잡해도 따옴표에 가두는 방식이 손에 익고 알아보기 편해서 큰일이다. 곧 나아지겠지...


💡참고

리터럴(literal): 프로그램에서 직접 지정하는 값, 식별자(identifier)와 구별됨
profile
잘하는 건 아닌데 포기하진 않을거야

0개의 댓글