[JavaScript] Template literals(`백틱) 그리고 JSP

■ Template literals

• 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.
• 이중 따옴표나 작은 따옴표 대신 백틱(` `)(grave accent)을 이용한다.
• 플레이스 홀더를 이용하여 표현식에 넣을 수 있다.

( $ {expression} )

 

■ Syntax

    `string text`

    `string text line 1
     string text line 2`

    `string text ${expression} string text`

    tag `string text ${expression} string text`

 

■ Expression interpolation(표현식 삽입법)

• 표현식(expression)을 일반 문자열(normal strings)에 삽입하기 위해서 다음의 문법을 사용할 수 있다.

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

template literals을 이용하면, 이를 더욱 읽기 쉽도록 다음과 같은 문법 설탕(syntactic sugar) 을 활용할 수 있다.

 

 

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

 

---

하지만 spring boot를 사용하면서 jsp로 UI를 구성하고있을 때의 일이다...

 

평소 React를 사용하면서 불편없이 백틱을 애용했는데 jsp에서는 먹히지 않는 것이다....

hMainFormList += `<li class="sel_item item_read"><span id="txt_date">${o.repair_date}</span></li>`

${}안의 데이터가 나오지 않는다..

 

 

 

찾아보니 이를 해결하기 위해서는 ${}의 앞에 \(백슬러시)를 붙이면 정상적으로 동작한다!!!

 

hMainFormList += `<li class="sel_item item_read"><span id="txt_date">\${o.repair_date}</span></li>`

 

👆 JSP 환경에서는 ${} 앞에 항상 \(백슬러시)를 붙여줘야 한다

 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Template literals (Template strings) - JavaScript | MDN