inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

[그랩마켓] Javascript 적용하기 - 2

안녕하세요 질문드립니다

283

임동규

작성한 질문수 2

1

<html>
  <head>
    <title>그랩마켓</title>
    <link href="index.css" type="text/css" rel="stylesheet" />
  </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>
    var products = [
      {
        name: "농구공",
        price: 10000,
        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++) {
      var products = products[i];
      productsHtml =
        productsHtml +
        '<div class="product-card">' +
        "<div>" +
        '<img class="product-img" src="' +
        products.imageUrl +
        '"/>' +
        "</div>" +
        ' <div class="product-contents">' +
        '<span class="product-name">+"' +
        products.name +
        '" </span>' +
        '<span class="product-price"> "' +
        products.price +
        '" </span>' +
        '<div class="product-seller">' +
        '<img class="product-avatar" src="images/icons/avatar.png" />' +
        "<span>" +
        products.seller +
        "</span>" +
        "</div>" +
        "</div>" +
        "</div>";
    }

 

    document.querySelector("#product-list").innerHTML = productsHtml;
  </script>
</html>
 
 
 
 
5분 51초 농구공 3개 나열한 구간까지는
잘 따라왔는데 다음 구간 강의 듣고 해보니 이렇게 되었습니다 뭐가 잘못된 걸까요???
 

javascript express tensorflow 머신러닝 배워볼래요? nodejs react-native HTML/CSS react

답변 2

0

그랩

해결하신 방법을 다시 복기해보면, 

var products = products[i] 이 코드는, 이미 선언되어 있는 products (배열)의 요소를 products라는 변수로 새로 넣어두겠다는 뜻입니다. 즉 그렇게 되면 반복문의 다음 순서에 있는 코드가 동작할 때는 products를 사용할 때 값이 변경되어 있고 원하는 결과를 반환하지 않을 거에요

그래서 각 반복문마다 var product = products[i] 라고 해서 상품 순서대로 작업을 할 수 있도록 코드를 수정해주셔야 합니다.

정리 : products -> product로 바꾸고 product.name 이런 식으로 바꾸면 된다.

0

임동규

선생님 

let productsHtml = "";
    for (var i = 0; i < products.length; i++) {
      var products = products[i];
제가 이 부분에서 
var products = products[i]; 여기를
var product = products[i]; 로 바꾸고
 
products.xxx 이코드들을 바꿔줬더니 해결 되었습니다
왜 products를 쓰면 안되는 건가요???

0

mooowu

지나가다 아는 내용이라 댓글 달아봐요! 이건 호이스팅이란 개념이랑 관련있을 것 같습니당. `var products의 products`랑 `i < products.length의 products`는 다른 변수여야 하는데, 지금 이름이 같아서 꼬이게 되는 것 같아요!

좀 더 자세한 내용은 호이스팅 개념을 찾아보시면 이해하기 더 좋을 것 같습니당~~

[해결]그랩님 답변 주세요.

0

194

2

그랩님의 답변을 기다립니다/102강 전반적인 에러

0

167

2

[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.

0

140

2

[재질문][그랩님 답변 부탁드립니다]101강

0

164

2

[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문

0

121

2

Ngrok 설치 후 forwarding Url 에러

0

152

2

[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.

0

259

2

Ngrok 설치 후 forwarding Url로 연결 불가

0

159

1

그랩님,[꼭] 답변 부탁드립니다.

0

78

1

[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.

0

163

1

6강/7강 수업

0

57

1

그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.

0

106

2

그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.

0

150

2

[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

96

1

Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

136

2

일반적인 css 꾸미기에서 width와 height의 값?

0

99

2

Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법

0

205

1

그랩마켓 웹화면 구현하기 -2 질문입니다.

0

127

1

react에 반영이 되지 않습니다.

0

254

1

터미널 npm install -g create-react-app 작성 후 오류

0

430

1

create-react-app my app 실행 시 에러

0

358

2

포스트맨 질문

0

105

1

<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.

0

271

2

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

0

499

2