axios를 입력하면 브라우저에서 products개체가 안보입니다

Question

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며<html>

    <head>
        <title>그랩마켓</title>
        <link href="index.css" type="text/css" rel="stylesheet" />
        <script src="https: //cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="header">
            <div id="header-area">
                <img src="images/icons/logo.png" />
            </div>
        </div>
        <div id="body">
            <div id="banner">
                <img src="images/banners/banner1.png" />
            </div>
            <h1>판매되는 상품들</h1>
            <div id="product-list">
               
            </div>
        </div>
        <div id="footer"></div>
    </body>
    <script>
      axios
        .get("https://e3f2bd1c-cf0f-4c5f-9d8d-ec27a55f4785.mock.pstmn.io/products")
        .then(function (result) {
           console.log("통신 결과 : ", result);
        })
        .catch(function (error) {
           console.error("error 발생: ", error);
        });
        var products = [{
            name : '농구공',
            price : 100000,
            seller : '조던',
            imageUrl : 'images/products/basketball1.jpeg'},{
            name : '축구공',
            price : 50000,
         seller : '메시',
            imageUrl : 'images/products/soccerball1.jpg'
            },{
            name : '키보드',
            price : 10000,
            seller : '그랩',
             imageUrl : 'images/products/keyboard1.jpg'
            }];
            let 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="product-avatar" src="images/icons/avatar.png" />'+
                        ' <span>'+product.seller+'</span>'+
                    '</div>'+
                 ' </div>'+
            '</div>'

            }
            document.querySelector("#product-list").innerHTML = productsHtml;
        </script>
</html>

존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

' + '

' + '' + product . name + '' + '' + product . price + '원' + '' + '

' + '

' + ' ' + product . seller + '' + '

' + '

' } document . querySelector ( "#product-list" ). innerHTML = productsHtml ; 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

그랩 · Answer

브라우저 Console에서 어떤 에러가 보이는지, 그리고 HTML 창에서 Inspect로 html 태그가 어떻게 구성되고 있는지 확인해주세요~