[JavaScript] `${}` 의 사용법 (연결 대신 템플릿 문자열 사용 - Use template strings instead of concatenation)

Question

테스트 하던 중 JSP와 HTML 이 다르게 구동되어 질문을 드립니다. 소스는 간단합니다. function test(msg) { alert(&#96;${msg}&#96;); alert(msg);} test(&#34;123&#34;); HTML 에서는 두 개의 alert 전부 넘겨준 파라미터가 뜨는데 jsp에서는 첫 번째 alert &#96;${msg}&#96;가 공백으로 뜨고 있습니다.왜 이런 걸까요?

yeori · Accepted Answer

많은 언어가 text interpolation 을 지원하는데 jsp의 EL 표현식과 자바스크립트의 문법이 우연히 똑같아서 발생합니다.var today &#61; '2018-08-15'; var msg &#61; &#96;오늘은 ${today} 입니다&#96;;위와같은 코드가 jsp 엔진을 거치지 않으면 기대한대로 출력됩니다&#34;오늘은 2018-08-15 입니다&#34;그런데 jsp 엔진을 거치면 ${today}는 다음과 같이 처리됩니다.1. page, request, session, context 에서 &#34;today&#34;라는 이름표가 붙은 값을 찾음2. null이면 아무것도 출력하지 않고 interpolation 부분을 지워버림3. null 이 아니면 toString() 값을 끼워넣음서버쪽 request 객체에 today에 대응하는 값을 SUNDAY로 넣으면 자바스크립트릉 품고 있는 위 코드는 아래와 같이 번역됩니다.// 서버에서 이렇게 넣으면 request.setAtteinute(&#34;today&#34;, &#34;SUNDAY&#34;); // 클라이언트는 아래와같은 html을 받게 됨 var today &#61; '2018-08-15'; var msg &#61; &#96;오늘은 SUNDAY 입니다&#96;; 해결책text interpolation이 충돌하는 경우 아래와 같이..var today &#61; '2018-08-15'; var msg &#61; &#96;오늘은 ${ '${today}' } 입니다&#96;;바깥쪽 ${...} 안에 자바스크립트에서 해석할 코드를 집어넣습니다.바깥쪽은 서버에서 처리하고, 안쪽 ${...}는 자바스크립트가 처리하게 됩니다.

isNotEmpty · Answer

${msg}는 jstl입니다.jquery가 아니에요. ${msg}는 컨트롤러에서 jsp에 넘겨준 값입니다.

DPJ · Answer

위에분 말씀에 첨언을 조금 더 하자면 EL표기법입니다. jsp는 다시 자바로 변경이 한번됩니다. 연관은 없지만 그리고 아실수도 있지만 서버사이드 렌더링에 대해 공부하시면 좋을거에요

리제네아 · Answer

isNotEmptyJavaScript 의 '연결 대신 템플릿 문자열 사용 - Use template strings instead of concatenation'에 대해 문의를 드렸습니다.jQuery 라고 작성한 건 분명 오류가 있네요. 수정하겠습니다. 생각해보니 JSTL 과 충돌이 있을지도 모르겠네요. 참고 블로그 : https://www.vobour.com/%EA%B5%AC%EA%B8%80%EC%9D%80-%EC%9E%90%EB%B0%94-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%83%80%EC%9D%BC-%EA%B0%80%EC%9D%B4%EB%93%9C%EB%A5%BC-%EB%B0%9C%ED%96%89-%ED%95%A9%EB%8B%88%EB%8B%A4-%EB%8B%A4%EC%9D%8C%EC%9D%80-%EB%AA%87-%EA%B0%80%EC%A7%80-%ED%95%B5%EC%8B%AC

리제네아 · Answer

DPJ음.. 자바로 변경되면서 다르게 인식이 되는걸가요..현재로썬 그렇게 추측이 되겠네요 감사합니다.

DPJ · Answer

템플릿 리터럴은 es6에서 사용되는거니 버전체크를 해보시는것과위에 분께서 설명하신대로 jsp의 el은 java단에서 넣어준 데이터를 출력하기 때문에 공백이 나오는게 맞는거같네요if(${msg} eq null) { console.log(&#34;null&#34;); }등으로 로그 찍어보시거나 디버깅해보시겠어요?

리제네아 · Answer

감사합니다. 많은 도움이 되었습니다.yeori 님의 소스로 테스트를 해보니 잘 되네요. 일단 목적은 jQuery 의 식별자를 동적으로 해보려는 것에서 시작을 했으나그것은 또 별개의 문제인가봅니다. (HTML 에서는 잘 되던데..)또 이것에 대해 조사해봐야겠네요 감사합니다.!!

[JavaScript] `${}` 의 사용법 (연결 대신 템플릿 문자열 사용 - Use template strings instead of concatenation)

7개의 답변

Q&A 목록