JSP javascript 백틱 ${} 사용 안 됨 → \${} 사용하기

𝚆𝚎𝚋

JSP javascript 백틱 ${} 사용 안 됨 → \${} 사용하기

해버니 2024. 7. 17. 22:35

jsp를 이용해서 프론트를 구현하고 있던 와중에 script 부분에서 백틱을 사용했는데 백틱 출력이 잘 되지 않았다.

let name = '홍길동';
let greeting = `안녕하세요, ${name}님!`;
console.log(greeting);

이렇게 입력을 하면

// 안녕하세요, 님!

까지만 출력이 되는 현상이 있었다. (변수에 있는 값이 출력이 안 됐다🥹)

jsp를 사용하는 프로젝트는 전자정부 프레임워크를 이용하는데, 여기서 백틱 사용을 막았나? 하는 생각을 했었다.

왜냐면 이 방법 저 방법 다 해봤는데 백틱에서 변수값 출력이 안됐기 때문에 T.T 저런 생각까지 했다고 한다..(부끄)

그래서 불편함을 감수하고 백틱 사용을 하지 않고 '' 작은 따옴표나 "" 을 이용하여 문자열을 입력하고, 변수를 넣을 때는 + 로 이어서 연결을 해줬다.

~~이렇게 쓰려면 눈알 안 빠지게 조심해야 한다.. 오타 잘못 들어가면...😮~~

그렇게 몇 주를 위처럼 사용을 하다가, '아니.. 설마 백틱.. 사용을 못하게 했을까? 다른 방법이 있지 않을까?'해서 찾아봤더니 해결책을 찾았다.

(→ GPT한테도 열심히 물어봤었는데 원하는 답을 얻지 못했었는데)

찾아보니 JSP(Java Server Pages)와 JavaScript가 같은 문법을 사용하기 때문에 백틱에 있는 변수명이 먹히지 않았던 것이었다.

JSP도 자바스크립트처럼 ${...} 문법을 사용하여 EL(Expression Language) 표현식을 작성한다.
이 표현식은 서버에서 페이지를 생성할 때 값을 동적으로 삽입하는 데 사용이 된다.

JSP EL 표현식 예시 코드!

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>EL 예제</title>
</head>
<body>
    <h2>EL 예제</h2>

    <!-- 자바빈즈의 프로퍼티를 EL로 출력 -->
    <p>사용자 이름: ${user.name}</p>
    <p>사용자 나이: ${user.age}</p>

    <!-- JSTL과 함께 사용 -->
    <c:if test="${not empty user.name}">
        <p>사용자 이름은 비어있지 않습니다.</p>
    </c:if>
</body>
</html>

이런식으로 JSP 페이지에서 EL 표현식을 사용한다.

그런데, JSP 페이지에서 JavaScript 코드를 작성할 때, JSP가 ${...} 부분을 자신의 EL 표현식으로 오해하고 먼저 해석하려고 한다. 그 결과 JavaScript의 템플릿 리터럴이 제대로 동작하지 않게 된다.

이 문제를 해결하기 위해 ${...} 부분을 문자열로 감싸주면 된다. 이렇게 하면 JSP는 이 부분을 일반 문자열로 인식하고 무시하게 된다. 그런 다음 JavaScript가 실행될 때 이 문자열이 템플릿 리터럴로 해석되고, ${name} 부분이 name 변수의 값으로 치환되는 것이다.

코드로 보자면

let name = '홍길동';
let greeting = `안녕하세요 ${'${name}'}님! "하이요 ${'${name}'}"`;
console.log(greeting);
// 안녕하세요 홍길동님! "하이요"

이런 식으로 ${} 안에 '${변수명이름}' 을 넣어줬더니 잘 출력이 되었다.

+ 추가

어떤 분이 댓글로 더 쉬운 방법을 알려주셨다!

${'${}'} 이 방법도 되지만 \${} 이런식으로 앞에 역슬래시를 붙여도 된다

const name = '커피';
console.log(`name : \{name}`);

아주 잘 된다!

위 방법이 더 깔끔하다고 생각해서 \${}로 바꿨다