이번 포스트에서는 jsp에서 el과 함께 js의 backtick 사용시 주의점에 대해서 살펴보자.
${}은 JSP의 el인가.. JS backtick의 변수인가?
JSP에서의 el
jsp에서는 el 표현식을 사용할 때 ${variable}을 사용한다. el은 html 영역 뿐 아니라 javascript영역에서도 사용할 수 있다.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<body>
<c:set var="some" value="123"></c:set>
${some }
</body>
<script>
console.log(`some의 값은 ${some}`)
</script>
</html>
ecma 6에 추가된 ``은 내부에서 ${var}의 형태로 javascript의 변수를 사용할 수 있다. 그런데 여기서는 some이라는 변수를 선언한 적이 없다. 그럼 위 코드는 잘못된 것인가?
물론 아니다. 여기서는 JSP와 JS의 동작 순서에 대해서 생각할 필요가 있다.
먼저 서버에서 dynamic 하게 html이 생성되서 결과로 전달된 js가 브라우저에서 실행되게 된다. 따라서 위의 코드는 $(some)이 먼저 서버에서 치환된다. 즉 el이 동작해서 ${some}에 123이라는 값으로 변경해서 클라이언트로 내려보낸다.
전달된 코드는 아래와 같다. 즉 js의 backtick은 동작한 적이 없다.
console.log(`some의 값은 123`)
그럼 js의 backtick을 동작시키려면?
그럼 backtick이 필요한 경우는 어떻게 해야할까? 아래의 경우처럼 name이라는 변수를 선언하고 backtick 내부에서 이를 참조하려 한다.
let name="홍길동";
console.log(`name: ${name}`)
console.log(`name: \${name}`)
첫 번째 출력문의 경우는 일단 서버에서 el에 의해 평가를 받는다. 따라서 name을 page>request>session>application에서 찾아본 후 값이 없기 때문에 그냥 공백으로 대체해서 클라이언트에 내려보내 버린다. backtick이 개입될 여지가 없다.
이런 경우 두 번째 출력문 처럼 $를 escape 해주면 된다. 그럼 서버에서는 el로 인식하지 않고 ${name}을 그대로 클라이언트로 내려보내게 되고 드디어 backtick이 동작할 수 있게 된다.
다음은 클라이언트로 전달된 html 코드이다.
let name="홍길동";
console.log(`name: `)
console.log(`name: ${name}`)