const Title = styled.h1 ` font-size: 1.5em; text-align: center; color: palevioletred; ` 혹시 이러한 코드를 본 적이 있는가? 뭐 물론 styled-component를 사용해 본 사람이라면, 이런 코드를 본 적이 많을 것이다. 하지만, 처음본 사람의 입장에서는 저런 문법이 자바스크립트에 있었나? 이 생각만 있을 것 같다. 뭐 물론, 나도 처음 저런 코드를 보았을 때, 왜 오류가 안나지? 이 생각 뿐이었으니까, 말이다. 일단 대부분이 Template literal(String template)은 많이 들어보았을 것이다. 일단 간단하게 소개 해주자면, const a = 1 const b = 2 const text = 'a: ' + a + ' \n ' + 'b: ' + b + ' \n ' + ' 합 : ' + ( a + b ) const template = `a: ${ a } b: ${ b } 합 : ${ a + b } ` console . log ( text ) console . log ( template ) 위처럼 문자열을 여러줄로 표현하거나, 중간에 삽입해야 하는 값을 편하게 만들어주는 기능을 갖는다. 보면 알겠지만, ', "대신 `을 이용 하고 있다. Template literal에서 편의성을 더 제공한 것이, tagged literal이다. 간단한 사용 예제를 보여주자면, const name = 'sejiwork' const email = 'sejinjja@gmail.com' console . log ( ` 이름 : ${ name } email: ${ email } ` ) 위의 정보에서 이메일 정보는 노출하고 싶지 않을 때가 있지 않나? 그러면 이러한 함수를 만들 수도 있을 것이다. const name = 'sejiwork' cons