[JavaScript] `(백틱) 을 이용한 Template literals ${} 데이터 추출

홈페이지를 만드는데 HTML에서는 잘 돌아가던 코드가 JSP에서는 안돌아가서

무슨 문제지 하다가 해결해서 나중에 까먹지 않기 위해 정리한다.

 

먼저 ` 이렇게 생긴 친구들을 백틱이라 부르는데 키보드에서 Tab 위에 위에 있는 숫자 자판 1 옆에 있는 친구이다. 

 

자바스트립트 ES6 부터는 백틱 기호를 사용한 문자열을 템플릿 리터럴이라고 부른다.
쉽게 말해, 템플릿 리터럴은 새로운 문자연결 표기방식이라고 보시면 된다.

 

console.log(language + "처음이죠?" + "Hello World" + language + "참 쉽죠?");

문자열을 연결하고 출력하려면 따옴표와 더하기(+) 기호를 사용해 위와 같이 사용해야 했다.

템플릿 문자열에서는 ${}(플레이스 홀더place holder라고 부릅니다)를 사용해 변수를 넣고, 아래와 같이 따옴표와 더하기 기호를 빼고 쓸 수 있다.
익숙해진다면, 같은 문자열이어도 더 간단하게 표현하는 것이 가능해지는 것이다.
좀 더 어렵게 표현하자면, 내장된 표현식을 사용하는 것을 허용하며 여러 줄로 이루어진 문자열과 문자를 연결해 줄바꿈 기호 없이 쓸 수 있다.

console.log(`${language} 처음이죠? Hello World ${language} 참 쉽죠?`);

 

백틱은 이렇게 문자열을 간단하고 가독성이 좋게 표현하는것이 가능해진 방법이다.

출처 : https://velog.io/@sunaaank/js-backtick

 

근데 문제는 console.log(`${language} 처음이죠? Hello World ${language} 참 쉽죠?`); 이 문장이 HTML에서는

잘 돌아가고 JSP에서는 (처음이요? Hello World 참 쉽죠?) 이렇게 ${} 템플릿 리터럴 데이터를 제외하고 찍힌다는 점이다.

 

이를 해결하기 위해서는 정말 간단하다. ${} 앞에 백슬러시인 \를 앞에 붙이면 된다. \${} 이런식으로 말이다.

그러면 데이터가 화면에 잘 띄워지는것을 볼 수 있다.

 

let str = `
	<tr class="${colorArr[index%3]}"></tr>
	<td>\${vo.aptCode}</td>
	<td>\${vo.aptName}</td>
	<td>\${vo.sidoName} \${vo.gugunName} \${vo.dongName} \${vo.jibun}</td>
	<td>\${vo.buildYear}</td>
	<td>\${vo.recentPrice}</td>
`;

JSP환경에서는 위와같이 \를 붙여줘야한다.

 

앞으로는 Vue를 배우면 JSP를 사용하는 일이 없어진다고 하지만 언제 다시 쓸지 모르니 미리 기록해둔다.