[Vue.js] 템플릿 문자열

자바스크립트 템플릿 문자열 활용한 다음 코드가 있습니다.

<img :src="`${movie.imgUrl}`" :alt="movie.title">

✅ 구성 분석

✅ 하나씩 설명

🔹 1. :src="..."

• Vue에서 HTML 속성에 자바스크립트 표현식을 바인딩할 때 사용하는 문법

• v-bind:src="..." 와 동일함

• 즉, img의 src 속성 값을 동적으로 설정한다는 의미

🔹 2. `${movie.imgUrl}`

• 이건 자바스크립트의 템플릿 문자열(백틱)

• 예를 들어 movie.imgUrl이 "./assets/room1.jpg"라면,
→ `${movie.imgUrl}` 은 "./assets/room1.jpg"로 평가됨

• 단순히 movie.imgUrl을 직접 써도 똑같이 동작합니다

<img :src="`${movie.imgUrl}`" :alt="movie.title">
<img :src="movie.imgUrl" :alt="movie.title">