inflearn logo
강의

Course

Instructor

A real introductory all-in-one development boot camp for non-majors

[그랩마켓] Web Development with React - 2

상품들은 안보이고 다른건 잘 보입니다. 상품들은 왜 안나오는걸까요?? 이전 수업까진 다 나왔었습니다.

213

hosiz3352

5 asked

1

npm start 해서 터미널로 보면 아래와 같이 뜨고 코드도 맨 아래에 있습니다. 

Compiled with warnings.

src\main\index.js

  Line 24:11:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

  Line 29:11:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

  Line 37:19:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

  Line 43:21:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

Search for the keywords to learn more about each warning.

To ignore, add // eslint-disable-next-line to the line before.

코드는 아래와 같이 작성하였습니다.

import "./index.css";
import axios from "axios";
import React from "react";

function MainPage() {
  const [products, setProducts] = React.useState([]);
  React.useEffect(function () {
    axios
      .get(
        "https://f3cda4ca-2283-4a63-82c0-4a22dc3dac04.mock.pstmn.io/products"
      )
      .then(function (result) {
        const products = result.data.products;
        setProducts(products);
      })
      .catch(function (error) {
        console.error("에러 발생 : ", error);
      });
  }, []);
  return (
    <div>
      <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">
          {products.map(function (product, index) {
            return (
              <div className="product-card">
                <div>
                  <img className="product-img" src={product.imageUrl} />
                </div>
                <div className="product-contents">
                  <span className="product-name">{product.name}</span>
                  <span className="product-price">{product.price}</span>
                  <div className="product-seller">
                    <img
                      className="product-avatar"
                      src="images/icons/avatar.png"
                    />
                    <span>{product.seller}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div id="footer"></div>
    </div>
  );
}

export default MainPage;

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

Answer 1

0

grab

안녕하세요! 현재 에러 내용을 확인해보니 포스트맨 Mock 서버에서 Status Code로 429인 에러를 보내고 있습니다.

포스트맨 Mock 서버는 무료 기능이나, 1분당 최대 60회라는 Call 제한이 있습니다. 이를 넘어서면 해당 에러를 내게 됩니다. 

이 문제는 시간이 지나면 다시 사용이 가능할 거예요!

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

0

160

2

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

0

141

2

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

0

123

2

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

0

140

2

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

0

97

2

Ngrok 설치 후 forwarding Url 에러

0

133

2

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

0

217

2

Ngrok 설치 후 forwarding Url로 연결 불가

0

135

1

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

0

65

1

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

0

149

1

6강/7강 수업

0

50

1

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

0

98

2

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

0

134

2

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

0

88

1

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

0

127

2

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

0

90

2

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

0

193

1

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

0

119

1

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

0

236

1

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

0

419

1

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

0

354

2

포스트맨 질문

0

99

1

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

0

260

2

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

0

473

2