Spring MVC - [ EL표현식 + JS Template Literal ]

우선 JS Template Literal은 내장된 표현식을 허용하는 문자열 리터럴로, 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다. 

템플릿 리터럴은 작은따옴표나 큰따옴표 대신 백틱(`)(grave accent)으로 감싸주며,  ${}를 사용하여 표현식을 표기한다.

 

아래와 같은 코드를 보자. jsp파일 내의 js코드이다.

여기에 백틱(`)으로 감싼 템플릿 리터럴이 있다. 이 안에 msg 변수를 넣기 위해 ${msg}와 같이 사용했는데,  실행 시 서버 단->브라우저 단 순서로 실행되므로, ${msg}부분을 서버가 EL표현식으로 해석해서 원하는 msg변수의 값이 나타나지 않는다..

function setMessage(msg, element){
    document.getElementById("msg").innerHTML = `<i class="fa fa-exclamation-circle"> ${msg}</i>`;
}

 

따라서 아래와 같이 ${'${msg}'} 로 수정해주어야 한다. 이렇게 수정하면 서버단에서 겉의 ${ .. }를 EL표현식으로 해석하고, 내부의 ${msg}만 남게 되어 원하는 msg변수의 값을 출력할 수 있게 된다!

function setMessage(msg, element){
    document.getElementById("msg").innerHTML = `<i class="fa fa-exclamation-circle"> ${'${msg}'}</i>`;

    if(element) {
        element.select();
    }
}

 

 

---

참조

https://eblee-repo.tistory.com/38

[JavaScript] ES6 템플릿 리터럴에 대해 알아보자!!

https://fastcampus.co.kr/dev_academy_nks

스프링의 정석 : 남궁성과 끝까지 간다 | 패스트캠퍼스