inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

JavaScript 베이스캠프

Final Project

마지막 api안되서 인터넷으로 찾아서 해봤는데 안되네요 이게 코드가 뭐가 문제일까요?

110

khjoo1203

작성한 질문수 9

0

async function getData() {
        const jsonData = [
          {
            id: 1,
            productName:
              '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링',
            price: 12500,
            stokeCount: 100,
            thumbnailImg: 'assets/img1.jpeg',
          },
          {
            id: 2,
            productName:
              '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링',
            price: 12500,
            stokeCount: 100,
            thumbnailImg: 'assets/img2.jpeg',
          },
          {
            id: 3,
            productName:
              '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링',
            price: 12500,
            stokeCount: 100,
            thumbnailImg: 'assets/img3.jpeg',
          },
          {
            id: 4,
            productName:
              '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링',
            price: 12500,
            stokeCount: 100,
            thumbnailImg: 'assets/img4.jpeg',
          },
          {
            id: 4,
            productName:
              '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링',
            price: 12500,
            stokeCount: 100,
            thumbnailImg: 'assets/img4.jpeg',
          },
          {
            id: 5,
            productName:
              '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링',
            price: 12500,
            stokeCount: 100,
            thumbnailImg: 'assets/img5.jpeg',
          },
          {
            id: 6,
            productName:
              '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링',
            price: 12500,
            stokeCount: 100,
            thumbnailImg: 'assets/img6.jpeg',
          },
        ];

        const response = new Response(JSON.stringify(jsonData), {
          status: 200,
          statusText: 'OK',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        fetch('https://test.api.weniv.co.kr/mall')
          .then((res) => {
            if (!res.ok) {
              throw new Error(`HTTP error! status: ${res.status}`);
            }
            return re.json(); //응답을 json으로 파싱
          })
          .then((data) => console.log(data))
          .catch((error) => console.log('Error:', error));
        const productData = await response.json();
        return productData;
      }
      function createProductCard(product) {
        const card = document.createElement('section');
        card.classList.add('card');
        card.innerText = 'hello world';

        return card;
      }
      function render(product) {
        const container = document.querySelector('.container');
        container.innerHTML = '';

        products.forEach((product) => {
          const card = createProductCard(product);
          container.appendChild(card);
        });
      }
      async function main() {
        const productData = await getData();
        render(productData);
      }

javascript

답변 2

0

제주코딩베이스캠프

안녕하세요, 제주코딩베이스캠프입니다!

API 요청 주소가 이전되어 안내드립니다.

변경된 주소

https://dev.wenivops.co.kr/services/js-basecamp

주요 엔드포인트:

  • 전체 상품 조회: https://dev.wenivops.co.kr/services/js-basecamp/mall

  • 상품 상세 조회: https://dev.wenivops.co.kr/services/js-basecamp/mall/{id}

  • API 문서: https://dev.wenivops.co.kr/services/js-basecamp/docs

기존 https://test.api.weniv.co.kr/mall 주소는 더 이상 사용되지 않으니, 새로운 주소로 변경해서 사용해주세요!

불편을 드려 죄송합니다😭

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. khjoo1203님.

작성하신 코드를 살펴보니 문제를 유발할 수 있는 몇 가지 부분이 보입니다. 코드에서 몇 가지 수정 및 설명을 드리겠습니다.

  1. 오타 문제:

    • re.json() 부분은 res.json()으로 수정해야 합니다. res는 fetch 요청의 응답 객체입니다.
  2. API 호출 문제:

    • 로컬 JSON 데이터가 아닌 실제 API를 호출하는 부분에서 오류가 발생할 수 있습니다. 코드상 ‘https://test.api.weniv.co.kr/mall’라는 경로가 사용되었으나 이 경로가 올바른지 다시 한 번 확인해 주세요.
  3. 반환 값 문제:

    • getData 함수에서 fetch 요청 이후에 productData를 반환하고 있는데, 그 값을 사용하려면 비동기 작업이 끝난 후에 값을 받아와야 합니다.
  4. 보완된 코드:

async function getData() {
    const jsonData = [
        { id: 1, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img1.jpeg', },
        // 추가 상품 데이터 생략...
    ];

    const response = new Response(JSON.stringify(jsonData), {
        status: 200,
        statusText: 'OK',
        headers: { 'Content-Type': 'application/json', },
    });

    try {
        const res = await fetch('https://test.api.weniv.co.kr/mall');
        if (!res.ok) {
            throw new Error(`HTTP error! status: ${res.status}`);
        }
        const data = await res.json(); // 응답을 JSON으로 파싱
        console.log(data);
    } catch (error) {
        console.log('Error:', error);
    }

    const productData = await response.json();
    return productData;
}

function createProductCard(product) {
    const card = document.createElement('section');
    card.classList.add('card');
    card.innerText = product.productName;  // 실제 제품명을 출력

    return card;
}

function render(products) {
    const container = document.querySelector('.container');
    container.innerHTML = '';

    products.forEach((product) => {
        const card = createProductCard(product);
        container.appendChild(card);
    });
}

async function main() {
    const productData = await getData();
    render(productData);
}

main();

이렇게 수정하시면 보다 명확하게 코드가 동작할 것입니다. 특히 fetch 호출 시 발생할 수 있는 오류를 처리하는 부분에 주의를 기울이시기 바랍니다. 그리고 데이터가 올바르게 전달되는지 항상 확인하시고, 로그를 통해 디버그하세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

프론트엔드 학습 수준 문의

0

11

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

34

2

최근 코테, 과제 테스트 트렌드

0

48

2

lucide react 아이콘 설치

0

34

2

17강 zustand store 서버에서 생성

1

29

1

문의관련 문의

0

36

2

next.js 를 2대이상 실행하는 경우 제공하는 cache 기능들은 어떻게 되나요?

0

46

2

76. 전문성 더하기: 놓치면 아쉬운 관련 기술들 수업 자료가 없어요.

0

40

2

ai 도구 질문

0

27

1

저는 왜 콘솔에서 props가 한 줄만 찍히나요?

0

43

1

렌더링 차단 리소스 javascript 실행에 관련해서 질문 있습니다.

0

41

2

데이터 로딩중 화면만 계속 나와요!!

0

47

2

퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요

0

71

2

02-04 layout.tsx 구조가 달라요

0

53

2

불변성을 지키며 수정 삭제를 할때도 Map이 유리한가요?

0

47

1

개인 프로젝트로 앱 개발해서 다운로드 1300 달성했는데 어느 정도 의미가 있을까요? (안드로이드 개발자)

0

64

1

22강 강의 영상 문의 드립니다.

0

45

2

20강 마무리작업에서

0

35

2

아래 위치에 동영상이 보이지 않습니다.

0

51

1

변경된 API 주소 CORS 오류

0

127

3

마지막 과제 api 접속이 안되서 fetch.json만들어서 했는데 안되네요ㅜ 어떻게 해야하죠?

0

65

2

마지막 과제 API 접속이 안 됩니다.

0

119

2

'변수' 부분 강의

0

191

2

강의자료 notion 페이지는 공유 안해 주시는 건가요?

0

362

2