[JS] JSP에서 템플릿 리터럴, 백틱(`) 사용하기

jsp페이지에서 이렇게 너무나도 편한 템플릿 리터럴을 쓰고 싶었는데,
계속 빈 값만 나와서 결국 일반 문자열로 사용하다가 이번에 원인을 알았다.

 

템플릿 리터럴?

ES6부터 자바스크립트에서 백틱(`)을 이용한 새로운 문자열 표기법이 도입되었다.

멀티라인 문자열

일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않는데, 템플릿 리터럴을 이용한 경우는 가능하다.

const str = 'Hello
world'; // SyntaxError 발생

일반 문자열에서 줄바꿈 등의 공백을 표현하려면 백슬래시()로 시작하는 이스케이프 시퀀스를 사용해야 한다.

const str = 'Hello\nworld'; 

const multiLineStr = `Hello
world
`;

표현식 삽입

문자열은 문자열 연산자 +를 사용해 연결할 수 있다.
+연산자는 피연산자중에 하나 이상 문자열인 경우 문자열 연산자로 작동한다.

const first = '길동';
const last = ' 홍';

console.log('My name is ' + first + last); // My name is 길동 홍

const first = '길동';
const last = ' 홍';

console.log(`My name is ${first} ${last}`); // My name is 길동 홍

 

표현식을 삽입하려면 ${}(템플릿 리터럴) 내에서 사용해야 한다. ${}외의 일반 문자열 내에서는 문자열로 취급된다.

console.log(`1+2 = ${1+2}`); // 1+2 = 3

console.log('1+2 = ${1+2}'); // 1+2 = ${1+2}

 

JSP에서 템플릿 리터럴을 이용한 표현식 사용하기

 

내가 놓친 부분이 이 부분이었다. JSP와 Javascript의 동작 순서를 알아야한다.

 

JSP는 서버 사이드 템플릿 엔진이다.
웹클라이언트에서 JSP 파일을 요청하면, 웹서버는 사용자의 요청을 JSP 컨테이너로 넘기고,
JSP 파일에 대해 서블릿 객체가 메모리에 존재하지 않으면 JSP파일을 파싱하고,
JSP파일을 자바파일로 변경 후 자바 코드를 서블릿 클래스로 컴파일 한 후,
컴파일 된 서블릿 파일을 클라이언트에 응답한다.
클라이언트에 응답된 파일 내 자바스크립트 코드는 브라우저에서 실행된다.

JSP에서 문자열 리터럴 사용하는 방법

자바스크립트 내에서 변수를 선언하고 $를 이스케이프 처리한다.

// test.jsp

<c:set var="test" value="hello!"></c:set>


<script>
	const test = "안녕!"; 
	console.log(`${test}`); // hello!
	console.log(`\${test}`); // 안녕!
</script>

 

${test}는 EL(Expression Language)로 평가된다.
\${test}은 서버에서 EL로 인식하지 않기 때문에 그대로 클라이언트로 전달하게 되어 자바스크립트에서 백틱으로 동작하게 된다.

 

 

[참고]

모던자바스크립트 딥다이브(이웅모 지음)
https://goodteacher.tistory.com/571