JS - 약간 복잡한 Array & Object 데이터바인딩

조금 더 복잡한 자료 다뤄보기

<div class="container mt-3">
  <div class="card p-3">
    <span class="car-title">상품명</span>
    <span>가격</span>
  </div>
</div> 

<script>
  let car2 = { name : '소나타', price : [50000, 3000, 4000] } 
  document.querySelector('.car-title').innerHTML = car2.name;
</script>

조금 바뀐 car2가 가능한 이유는 object 안에 array/object를 넣을 수 있기 때문이다!
array 안에 array/object 넣어도 상관 없다

Q. car2에 있는 50000 이라는 데이터를 뽑아서 html 가격표시 부분에 꽂아넣어보기

$(".card span:last").html(car2.price[1]);

-> 처음엔 자료 뽑는게 어렵기 때문에 콘솔창에 일단 출력해서 확인해보기

복잡한 데이터에서 자료를 꺼내려면?

콘솔창에선 복잡한 자료도 어떻게 생겼는지 쉽게 축약해서 알려준다
우리는 시작기호 를 잘 보면 된다

시작기호가 { 이거면 90%의 확률로 object 자료형이다
그렇다면 object 자료에서 자료꺼내는 문법으로 작성하기

시작기호가 [ 이거면 90%의 확률로 array 자료형이다
array 자료에서 자료꺼내는 문법으로 작성하기

이렇게 데이터를 하나하나 뽑아가면 아무리 어려운 것도 잘 뽑을 수 있다

Q. 이걸 배우는 이유?
그냥 html에 50000 하드코딩 한다면 실제 사이트는 html이 매일 바뀌어야한다.

실제 웹서비스 개발할 때의 2가지 방식

누군가 내 사이트로 접속하면 html을 예쁘게 만들어서 보내는 걸 웹 서비스라고 한다
html을 누가 완성하는지에 따라 개발방식에 차이가 있음

1. 서버에서 html을 미리 완성해서 고객에게 보내줌 (server-side rendering)

2. 서버가 비어있는 html과 데이터만 보내줌 (client-side rendering)

요즘은 2번이 유행이라 데어터를 서버에서 가져와 데이터바인딩 하는 방법을 배우는 것이다!
근데 데이터바인딩하는 문법이 너무 길고 복잡하기 때문에 작은 사이트에서는 JS로 커버 가능하지만 큰 사이트를 만들 땐 사람들이 라이브러리를 설치해서 쓴다
ex) jQuery, React, Vue 이런걸 사용하면 코드가 짧아짐

더 최근엔 2번이 질려서 다시 1번으로 돌아가는 움직임이 있으니 둘 다 알아두는게 최고!

---

오늘의 숙제

: list.html에 JS를 짜서 3개의 상품, 제목, 가격을 html 에 전부 꽂아넣어오기

<div class="card-group container">
  <div class="card">
    <img src="https://via.placeholder.com/600">
    <div class="card-body">
      <h5>Card title</h5>
      <p>가격 : 70000</p>
      <button class="btn btn-danger">주문하기</button>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/600">
    <div class="card-body">
      <h5>Card title</h5>
      <p>가격 : 70000</p>
      <button class="btn btn-danger">주문하기</button>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/600">
    <div class="card-body">
      <h5>Card title</h5>
      <p>가격 : 70000</p>
      <button class="btn btn-danger">주문하기</button>
    </div>
  </div>
</div>

<script>
  var products = [
    { id : 0, price : 70000, title : 'Blossom Dress' },
    { id : 1, price : 50000, title : 'Springfield Shirt' },
    { id : 2, price : 60000, title : 'Black Monastery' }
  ];
</script>