자바스크립트 ES6 ${}(템플릿 리터럴)문법 jsp에서 사용하기

ES6 템플릿 리터럴 문법이란

`(백틱) 사이에 내용을 넣는 방식이다.

1
2
3
4
5
6
var ex1 = "더 이상 이런 식으로"  
var ex2 = "연결할 필요가 없다." 
var ex3 = "변수"
console.log(ex1+"내용을 플러스로"+ex2); 
console.log(`더 이상 이런 식으로 내용을 플러스로 연결할 필요가 없다. `); 
console.log(`$(ex3)는 이런식으로 내용 안에 넣어서 사용할 수 있다`); //변수 

jsp에서 템플릿 리터럴을 썼는데 변수가 안 들어가요

내가 뭘 잘못 알아서 안 되는 줄 알았는데 알고 보니 덜 알아서 안 되는 거였다.
JSP환경에서 백틱 사이에 변수를 넣으려면 \${} 처럼 역슬래시\를 붙여서 표기해주어야 한다.
테스트 결과 정상적으로 변수가 들어왔다.

IE 브라우저에는… 쓰지 말자

IE가 올 해 여름 완전히 서비스를 종료 할 거라고는 하지만 현재 내가 담당하고 있는 고객사의 내부망은 여러가지 이유로 계속 IE를 사용 할 모양이다.
크롬이나 엣지 등 타 브라우저에서는 정상 작동하길래 안심하고 IE로 들어갔다사 스크립트가 동작하지 않는 걸 보고 Babel을 써서 호환성을 맞춰보려 했지만 jsp는 또 Babel 지원이 안 된다고 한다. 이렇게 특수한 환경이 아니라면 대부분은 IE 종료와 함께 고민도 사라지긴 할 거다.
나는 아쉽게도 한동안 + 연산자를 병행해서 사용하게 될 것 같다.