[자바스크립트는 처음이지?] backtick(`)과 single quoto(') 차이로 삽질해본 적 있는 사람?

JavaScript 처음 공부해보고 있는데요.
따옴표 비슷하게 생겼는데 쫌 다르게... 기울어지게 생긴 게 있거든요.
이게 뭐죠? 분명 코드 똑같이 따라쳤는데 작동이 안돼요ㅠㅠㅠ

네, 사실 질문자도 저도 이 글을 쓰면서 답변하는 사람도 저입니다.
비록 짧은 삽질이긴 했지만 짧은 빡침 끝에 허무했달까요. 그래서 씁니다.

자바스크립트를 처음 공부하다보면, 따옴표 처럼 생겼는데 조금 기울어진 기호를 보고 이게 뭔가 싶은 경험이 있을 겁니다. 이 기호를 잘못치면 책이나 강의에 나오는 코드를 똑같이 따라 쳐도 작동이 안돼요.
본 적이 없는 게 당연하죠. 사전에서도 프로그래머들이 사용하는 기호라고 나오거든요.
HTML과 CSS를 공부할 때도 사용할 일이 없었을 겁니다.

심지어 검색어로도 안 나와요ㅋㅋㅋ
검색엔진에 이 기호를 그대로 입력하면 검색에서 제외되거든요.
검색어로 찾을 수도 없으니 원인을 모르는 채 삽질하기 딱 좋습니다.

이름이 뭐예요?

거참, 명칭을 알아보면 grave accent입니다.(무덤...왕초보가 빠지기 딱 좋은 무덤...)
backtick, backquoto 등의 이름으로도 불립니다.
한국어로는 억음부호 라고 합니다.

키보드 어디에 있나요?

이게 키보드에서 어디에 있냐하면,
숫자 1번 키 왼쪽, Tab키 위에 있는 키입니다.(Shift를 누르고 쓰면 물결(~)기호가 뜨는 자리입니다.)
!HERE! 1 2 3 4 5 6 7 8 9 10 - =
tab___
caps lock

(키보드마다 위치가 다를 수 있습니다. 이제 명칭을 아셨으니 검색해보시면 됩니다.)

TMI1.
애초에 한국어 사용자는 한국어 표기 시 사용할 일이 없는 기호입니다.
보통 특정 발음기호를 가진 알파벳을 나타낼 때 씁니다. 주로 말을 생략하거나 소유격을 쓸 때 사용하는 아포스트로피나 주로 인용 문구를 담을 때 쓰는 따옴표와는 다릅니다.

TMI2.
벨로그를 포함해 마크다운(markdown)언어에서 1개 ~ 3개 기호 개수에 따라 inline 속성 또는 block 속성으로 코드블록을 입력할 때 쓰이기도 합니다.

TMI3.
참고로, Ruby, PHP 등 언어에서 명령 대체 문법으로 사용되기도 한다고 합니다.

자바스크립트 코드로 작은 따옴표와 백틱 코드 비교해보기

const count = 17; // integer
const size = 17.1; // decimal number
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);

(위의 코드를 시각적 효과를 통해 직관적으로 살펴보기 위해, 에디터 화면으로 살펴보겠습니다.)

백틱(backtick)

위의 코드를 백틱(backtick) 기호를 제대로 사용해 입력하면 아래와 같은 모습으로 나타납니다.

작은 따옴표('')

작은 따옴표로 쓰면 이렇게 뜹니다.

백틱(backtick)과 작은 따옴표의 차이

백틱(backtick)으로 열고 작은 따옴표로 닫는 표시를 해보면 아래와 같은 모습이 나타납니다.

처음 "value" 앞 백틱 기호부터 그 다음에 "value" 앞에 오는 백틱 기호까지 전체가 백틱이 적용되는 범위가 된 것을 볼 수 있습니다.
아래 이미지에서 볼 수 있듯, backtick은 작은 따옴표와 다르게 새로운 백틱 기호가 등장하기 전까지 전체를 백틱 기호가 적용되는 범위로 간주합니다. 작은 따옴표는 코드의 동일한 줄까지만 적용이 되지만, backtick은 줄구분과 관련 없이 적용됩니다. 이러한 특성으로 인해 backtick을 사용한 문자열에서는 별도의 코드를 입력하지 않아도 자체적으로 줄바꿈(개행)이 가능하다는 것을 확인할 수 있습니다.

네, 뭔지는 알겠어요. 근데 이거 어디에 왜 쓰는 거죠? : 템플릿 리터럴(Template literals) 보고 가시죠.

자바스트립트 ES6 부터는 백틱 기호를 사용한 문자열을 템플릿 리터럴이라고 부릅니다.
쉽게 말해, 템플릿 리터럴은 새로운 문자연결 표기방식이라고 보시면 됩니다.

console.log(language + "처음이죠?" + "Hello World" + language + "참 쉽죠?");

문자열을 연결하고 출력하려면 따옴표와 더하기(+) 기호를 사용해 위와 같이 사용해야 했습니다.
템플릿 문자열에서는 ${}(플레이스 홀더place holder라고 부릅니다)를 사용해 변수를 넣고, 아래와 같이 따옴표와 더하기 기호를 빼고 쓸 수 있습니다.
익숙해진다면, 같은 문자열이어도 더 간단하게 표현하는 것이 가능해지는 것이죠.
좀 더 어렵게 표현하자면, 내장된 표현식을 사용하는 것을 허용하며 여러 줄로 이루어진 문자열과 문자를 연결해 줄바꿈 기호 없이 쓸 수 있습니다.

console.log(`${language} 처음이죠? Hello World ${language} 참 쉽죠?`);

더 자세한 내용이 궁금하다면, MDN의 템플릿 리터럴 문서를 참고하세요.(1)

나아가 언어와 부호에 관하여

(짝짝짝) 어휴, 본 적 없는 백틱(backtick) 부호의 명칭과 사용법을 학습하시느라 고생이 많으셨습니다.(짝짝짝)
세상에, 비슷하게 생긴 부호가 이렇게나 많습니다!!! (참고3)

부호는 글쓴이의 의도와 의미를 명확하게 전달하기 위해서 사용됩니다. 글쓴이와 독자 사이에서 각 부호가 내포하고 있는 언어 정보가 공유되기 때문이죠. 출판사에서 일하거나 논문이나 책을 쓰는 사람들은 부호들에 대해 까다로워지지만, 보통 일상 생활에서는 부호를 엄밀하게 사용할 일은 잘 없죠. 유사한 부호를 사용해도 문맥상 적당히 뜻이 통하니까요. 특히 쓰기·읽기 속도가 빠른 웹·모바일 환경에서는 그런 경향이 가속화 된다고 합니다.(참고2)

개발 언어를 공부를 하면서, 부호의 의미 하나하나를 엄밀하게 살펴보게 됩니다. 제대로 작동하며 잘 읽히는 코드를 쓰고 싶습니다.

참고자료

1. MDN Web Docs-Template literals
2. 대체부호의 문제점과 해결 방안 = 기본 아포스트로피와 기본 따옴표를 중심으로
3. Bringhurst, R. (1992). The elements of typographic style. Point Roberts, WA: Hartley & Marks.
4. Cook, V.J.,(2013). Standard punctuation and the punctuation of the street. Springer International Publishing.