JS - 데이터바인딩숙제 & 문자중간에 변수 넣기

나
<script>
 $(".card:nth-child(1) h5").html(products[0].title);
 $(".card:nth-child(1) span").html(products[0].price);
 $(".card:nth-child(2) h5").html(products[1].title);
 $(".card:nth-child(2) span").html(products[1].price);
 $(".card:nth-child(3) h5").html(products[2].title);
 $(".card:nth-child(3) span").html(products[2].price);

강의방법

document.querySelectorAll('.card-body h5')[0].innerHTML = products[0].title;
document.querySelectorAll('.card-body p')[0].innerHTML = '가격 : ' + products[0].price

document.querySelectorAll('.card-body h5')[1].innerHTML = products[1].title;
document.querySelectorAll('.card-body p')[1].innerHTML = '가격 : ' + products[1].price;

document.querySelectorAll('.card-body h5')[2].innerHTML = products[2].title;
document.querySelectorAll('.card-body p')[2].innerHTML = '가격 : ' + products[2].price;
</script>

문자 중간에 변수 쉽게 넣기

console.log(1 + '2'); 

JS에서는 덧셈기호를 사용하면 문자이어붙이기가 쉽게 가능하다!
숫자 + 숫자 -> 숫자덧셈
문자 + 숫자 -> 적어도 1개가 문자면 문자덧셈
문자 덧셈이란 ?
문자 2개를 이어붙여줌

let a = '안녕';
console.log('문자' + a + '문자');  // '문자안녕문자'출력

let a = '안녕';
console.log(`문자 ${a} 문자`);  // '문자안녕문자'출력됨

• 기호 뿐만 아니라 물결기호 밑에있는 백틱기호로도 사용 가능
  문자 안에 변수를 넣어주는 간단한 문법!