[그랩마켓] axios로 네트워크 통신하기

이제 그랩 마켓 코드에 axios를 적용해서 네트워크 통신을 해보자

1. head에 axios 적용하기

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. axios.get(url/products)

script 초반에 axios.get을 해주고 안에 postman에서 얻은 url을 넣어준다.

<script>
  axios
  .get("https://3f6669f1-6442-4619-a31c-1eaf2738a496.mock.pstmn.io/products"
  ).then(function(result){
  console.log("통신 결과: ", result);
const products = result.data.products;

3. productsHtml

이전에 for문으로 모든 상품 정보를 빈 Html에 이어붙인 것을 다시 활용

productsHtml = "";
        for (var i = 0; i < products.length; i++) {
          let product = products[i];
          productsHtml =
            productsHtml +
            '<div class="product-card">' +
            "<div>" +
            '<img class="product-img" src="' +
            product.imageUrl +
            '" />' +
            "</div>" +
            '<div class="product-contents">' +
            '<span class="product-name">' +
            product.name +
            "</span>" +
            '<span class="product-price">' +
            product.price +
            "</span>" +
            '<div class="product-seller">' +
            '<img class="avatar" src="images/icons/avatar.png" />' +
            "<span>" +
            product.seller +
            "</span>" +
            "</div>" +
            "</div>" +
            "</div>";
        }
  document.querySelector("#product-list").innerHTML = productsHtml;
 .catch(function (error) {
 console.log("에러 발생: ", error);
 });

이제 그랩마켓에 가면 통신 결과를 얻을 수 있다!