JSTL과 템플릿리터럴, text interpolation 충돌

 

text interpolation이 충돌하는 경우

• jsp의 EL 표현식(${ ... }) 과 자바스크립트의 템플릿리터럴 문법(${ ... })이 우연히 똑같아서 발생하는 문제

 

해결방법

서버 컨트롤러에서 jsp에 넘겨준 값인 JSTL를,

자바스크립트 ES6부터 쓰이는 템플릿리터럴(``백틱)과 같이 사용하려면 

바깥쪽 ${...} 안에 자바스크립트에서 해석할 코드를 집어넣어야한다.

 

${ ${...} }

 

바깥쪽 ${...} 은 서버에서 처리하고,

안쪽 ${...}는 자바스크립트가 처리하게 된다.

 

 

 

배운점

 

JSTL

• jsp 엔진은 java단에서 넣어준 데이터를 출력한다
• jsp의 EL 처리과정
  
  1. page, request, session, context 에서 "변수명"이 붙은 값을 찾음
  2. null이면 아무것도 출력하지 않고 interpolation 부분을 지워버림
  3. null 이 아니면 toString() 값을 끼워넣음
  4. 서버쪽 request 객체에 "변수명"에 대응하는 값을 넣으면 자바스크립트는 변수명에 값을 넣어 문자열로 번역한다.

 

ES6 템플릿 리터럴

• 내장된 표현식을 허용하는 문자열 리터럴로, 런타임 시점에 일반 자바스크립트 문자열로 처리/변환한다.
• Expression interpolation (표현식 삽입법)
  • ES6 이전엔 표현식을 다음과 같이 + 연산자로 문자열을 연결하여 일반 문자열 안에 집어넣었다
    

    let slackMsg2 = "";
    slackMsg2 += "📢 "+ ntcMenu + " 게재알림\n";
    slackMsg2 += "구분 : "+ ntcCtgryNm +" ("+ adptDt +")"+ popDt + emgnc +"\n";
    slackMsg2 += "수신 : "+ expsrTrgt + prodTrgt +"\n";
    slackMsg2 += "제목 : "+ ntcTitle;

    
    
    
  • 템플릿 리터럴에서는 아래와 같이 ${}를 사용하여 표현식을 표기할 수 있습니다.
    

    var slackMsg1 = 
        `📣${'${ntcMenu}'} 게재알림
        구분 : ${'${ntcCtgryNm}'} (${'${adptDt}'}) ${'${popDt}'} ${'${emgnc}'}
        수신 : ${'${expsrTrgt}'} ${'${prodTrgt}'}
        제목 : ${'${ntcTitle}'}`;

    
    

 

---

Ref.

OKKY - [JavaScript] `${}` 의 사용법 (연결 대신 템플릿 문자열 사용 - Use template strings instead of concatenatio

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