[Error] JSP/JavaScript 에러 :: 템플릿 리터럴(템플릿 스트링) 표현식 안나올 때

❓ Problem: jsp 파일의 <script> 내에 작성한 템플릿 리터럴(템플릿 스트링)내의 표현식이 나오지 않는다.

날짜 관련 유효성 검사를 하던 도중 확인을 위해 console.log로 아래와 같이 찍어봤는데 이리 애를쓰고 저리 애를써도 사진과 같이 빈 값만 출력되었다.

 

기존 코드(jsp 파일 하단 Script 부분)

const now = new Date();
	
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();

console.log(`${year}-${month}-${date}`);

 

이거 뭔데여

내 year, month, date 다 어디갔는데여

 

❗ Solution

생각해보니 수업때도 template literal(template string)을 사용할 때 ${}(dollar sign) 앞에 이스케이프(\) 처리를 했던 것이 생각났다. 

 

JavaScript에서 Template Literal(Template String)을 사용 시, 표현식 삽입은 ${ }을 사용하는게 맞다.

하지만 나는 현재 jsp 파일의 <script> 부분에서 작업중이었고!!!!! jsp의 EL 표현식을 escape 처리 해야 표현식을 출력할 수 있다는 것을 망각하고있었다.

 

아래와 같이 코드를 수정하자 정상적으로 템플릿 리터럴 내의 표현식을 확인할 수 있었다.

 

수정한 코드

const now = new Date();

const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();

console.log(`\${year}-\${month}-\${date}`);

 

★오늘의 결론★ 

jsp 파일의 어디서든(템플릿 스트링 내부 포함) ${} 달러사인(dollar sign)을 사용 할 경우,

1. EL 표현식 값을 출력하며(→ 따라서 서버에서 보낸 값이 없을 경우 빈칸으로 출력되기 때문에 위에서 '--'만 나왔던 것)

2. '\'로 escape 처리를 해야만 템플릿 리터럴의 표현식으로 사용이 가능하다!!

 

 

 

후 오늘도 한 모질이 했군