jsp에서 ``(템플릿 리터럴) 정상 사용 법

아래의 예시와 같이 ``(템플릿 리터럴)이 정상 작동되지 않아 지저 분하고 긴 코드가 될 뻔했지만.

구글 검색을 통해서 jsp에서 ``(템플릿 리터럴)이 사용되지 않는 이유와 해결법을 찾았습니다.

 

jsp를 사용할 경우, jsp의 EL 표현식과 JavaScript의 템플릿 문자열이 겹치게 되기 때문에 정상 작동이 되지 않은 것 같습니다.

 

그래서 아래와 같이 코드를 작성하면 정상 작동되는 걸 확인할 수 있었습니다.  

paintFilmDataList.forEach((filmData) => {
  const filmBox = document.querySelector('.' + filmData.position);

  // if (filmBox) {
  //     filmBox.innerHTML =
  //         '<div class="paintFilmShame">' + filmData.maxThicknessMeasurement.toString() + '</div>' +
  //         '<span class="paintFilmShameBar">'+ '|' +'</span>' +
  //         '<div class="paintFilmShame">' + filmData.minThicknessMeasurement.toString() + '</div>' +
  //         '<span class="paintFilmShameBar">'+ '|' +'</span>' +
  //         '<div class="paintFilmShame">' + filmData.averageThicknessMeasurement.toString() + '</div>';
  // }

  // jsp 파일에서 ``(템플릿 리터럴)을 사용하기 위해서는 아래와 같이 적용시켜야 함
  // 이렇게 하면 바깥쪽 ${...}은 서버에서 처리하고, 안쪽 ${...}은 자바스크립트가 처리합니다.

  if (filmBox) {
    filmBox.innerHTML = `<div class="paintFilmShame">${'${filmData.maxThicknessMeasurement.toString()}'}</div>
                            <span class="paintFilmShameBar">|</span>
                            <div class="paintFilmShame">${'${filmData.minThicknessMeasurement.toString()}'}</div>
                            <span class="paintFilmShameBar">|</span>
                            <div class="paintFilmShame">${'${filmData.averageThicknessMeasurement.toString()}'}</div>
                            `;
  }
});