Netflix 클론코딩 기록 남기기 (6) - 백틱과 작은 따옴표

로그인 기능이 들어가는 auth 페이지와 profile 페이지의 완성도를 올리고 있다. 요 며칠 공부하면서 가장 많이 집중해서 보는 부분은 group/item 이였다. tailwind CSS에는 참 신기한 기능이 많은 거 같다. 그것과 별개로 오늘은 내가 코딩하면서 나에게 어려움을 줬었던 백틱과 작은따옴표에 대하여 다루려고 한다.

 

JavaScript에서 작은 따옴표(')와 백틱(`)의 차이?!

작은따옴표(') : 작은 다옴표로 둘러싼 문자열은 일반적으로 문자열 내에 큰 따옴표를 포함할 수 있다.

const singleQuotedString = 'This is a "single" quoted string';

이렇게 하면 문자열 안에 큰 따옴표가 포함된 문자열을 만들 수 있다. 이 외의 다른 특수기호들도 물론이다.

 

백틱(`) : 백틱은 ES6부터 도입된 템플릿 리터럴 문자열을 정의하는 데 사용된다. 백틱으로 둘러싼 문자열은 템플릿 리터럴로 취급되며 문자열 내에 변수나 표현식을 포함할 수 있다.

const name = 'John';
const templateString = `Hello, ${name}!`;

백틱 문자열 내에서 `${}`로 변수나 표현식을 감싸면 해당 변수 또는 표현식의 값을 문자열에 삽입할 수 있다.

 

이런 식으로 문자열 내에 변수 또는 동적 내용을 삽입하려면 백틱을 사용하고, 작은따옴표 혹은 큰 따옴표를 사용하여 정적 문자열을 정의할 수 있다. 템플릿 리터럴은 특히 문자열 내에 동적인 데이터를 포함할 때 유용하다.