JSP에서 JavaScript와의 백틱(`) 문제

현상

const fileName = "부엉이";
alert(`파일 ${fileName}는 이미 존재하는 파일입니다.`);

// 경고창이 파일 는 이미 존재하는 파일입니다. 로 출력됨

 

JSP에서 <script> 태그 안에 백틱(`${}`)을 사용하여 코드를 적용시켰는데 데이터가 출력되지 않음

 

원인

JSP와 JavaScript 둘 다 같은 문법을 사용하고 있어 JSP에서 <script>에 JavaScript 코드로 ${}을 EL 표현식으로 착각하여 먼저 해석하여 JavaScript의 템플릿 리터럴이 제대로 동작하지 않기 때문

 

해결 방법

${}을 $('${}')으로 감싸서 입력

const fileName = "부엉이";
alert(`파일 ${'${fileName}'}는 이미 존재하는 파일입니다.`);

// 경고창이 파일 부엉이는 이미 존재하는 파일입니다. 로 출력됨