mokwak

<p>해결했습니ㄷ. 감사합니다</p>

length error

<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #808080; background-color: #fbeeb8;">여기서 어디쪽의 문제인지 잘 모르겠습니다</span></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">html</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">head</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">title</span><span style="color: #808080;">></span>그랩마켓<span style="color: #808080;"></</span><span style="color: #569cd6;">title</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">link</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"index.css"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"text/css"</span> <span style="color: #9cdcfe;">rel</span>=<span style="color: #ce9178;">"stylesheet"</span> <span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">script</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"</span><span style="color: #808080;">></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">head</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">body</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"header"</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"header-area"</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"images/icons/logo.png"</span> <span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"body"</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"banner"</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"images/banners/banner1.png"</span> <span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">h1</span><span style="color: #808080;">></span>판매되는 상품들<span style="color: #808080;"></</span><span style="color: #569cd6;">h1</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"product-list"</span><span style="color: #808080;">></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"footer"</span><span style="color: #808080;">></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">body</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div>
<div><span style="color: #9cdcfe;">axios</span></div>
<div>.<span style="color: #dcdcaa;">get</span>(</div>
<div><span style="color: #ce9178;">"https://f858de03-8615-4980-9d75-55e70df4ab1d.mock.pstmn.io/products"</span></div>
<div>)</div>
<div>.<span style="color: #dcdcaa;">then</span>(<span style="color: #569cd6;">function</span> (<span style="color: #9cdcfe;">result</span>) {</div>
<div><span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">"통신결과 : "</span>, <span style="color: #9cdcfe;">result</span>);</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">products</span> = <span style="color: #9cdcfe;">result</span>.<span style="color: #9cdcfe;">data</span>.<span style="color: #9cdcfe;">products</span>;</div>
<br />
<div><span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">productsHtml</span> = <span style="color: #ce9178;">" "</span>;</div>
<div><span style="color: #c586c0;">for</span> (<span style="color: #569cd6;">var</span> <span style="color: #9cdcfe;">i</span> = <span style="color: #b5cea8;">0</span>; <span style="color: #9cdcfe;">i</span> < <span style="color: #4fc1ff;">products</span>.<span style="color: #9cdcfe;">length</span>; <span style="color: #9cdcfe;">i</span>++) {</div>
<div><span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">product</span> = <span style="color: #4fc1ff;">products</span>[<span style="color: #9cdcfe;">i</span>];</div>
<div><span style="color: #9cdcfe;">productsHtml</span> =</div>
<div><span style="color: #9cdcfe;">productsHtml</span> +</div>
<div><span style="color: #ce9178;">'<div class="product-card">'</span> +</div>
<div><span style="color: #ce9178;">"<div>"</span> +</div>
<div><span style="color: #ce9178;">'<img class="product-img" src="'</span> +</div>
<div><span style="color: #9cdcfe;">product</span>.<span style="color: #9cdcfe;">imageUrl</span> +</div>
<div><span style="color: #ce9178;">'" />'</span> +</div>
<div><span style="color: #ce9178;">"</div>"</span> +</div>
<div><span style="color: #ce9178;">'<div class="product-contents">'</span> +</div>
<div><span style="color: #ce9178;">'<span class="product-name">'</span> +</div>
<div><span style="color: #9cdcfe;">product</span>.<span style="color: #9cdcfe;">name</span> +</div>
<div><span style="color: #ce9178;">"</span>"</span> +</div>
<div><span style="color: #ce9178;">'<span class="product-price">'</span> +</div>
<div><span style="color: #9cdcfe;">product</span>.<span style="color: #9cdcfe;">price</span> +</div>
<div><span style="color: #ce9178;">"</span>"</span> +</div>
<div><span style="color: #ce9178;">'<div class="product-seller">'</span> +</div>
<div><span style="color: #ce9178;">'<img class="product-avatar" src="images/icons/avatar.png" />'</span> +</div>
<div><span style="color: #ce9178;">"<span>"</span> +</div>
<div><span style="color: #9cdcfe;">product</span>.<span style="color: #9cdcfe;">seller</span> +</div>
<div><span style="color: #ce9178;">" </span>"</span> +</div>
<div><span style="color: #ce9178;">"</div>"</span> +</div>
<div><span style="color: #ce9178;">"</div>"</span> +</div>
<div><span style="color: #ce9178;">"</div>"</span>;</div>
<div>}</div>
<div><span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">"#product-list"</span>).<span style="color: #9cdcfe;">innerHTML</span> = <span style="color: #9cdcfe;">productsHtml</span>;</div>
<div>})</div>
<div>.<span style="color: #dcdcaa;">catch</span>(<span style="color: #569cd6;">function</span> (<span style="color: #9cdcfe;">error</span>) {</div>
<div><span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">"error 발생 : "</span>, <span style="color: #9cdcfe;">error</span>);</div>
<div>});</div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">html</span><span style="color: #808080;">></span></div>
</div>

mokwak

Bài viết