마지막 api안되서 인터넷으로 찾아서 해봤는데 안되네요 이게 코드... - 인프런

JavaScript 베이스캠프

Final Project

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

작성

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

제주코딩베이스캠프

지식공유자

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

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 주소는 더 이상 사용되지 않으니, 새로운 주소로 변경해서 사용해주세요!

불편을 드려 죄송합니다😭

인프런 AI 인턴

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

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

오타 문제:
- re.json() 부분은 res.json()으로 수정해야 합니다. res는 fetch 요청의 응답 객체입니다.
API 호출 문제:
- 로컬 JSON 데이터가 아닌 실제 API를 호출하는 부분에서 오류가 발생할 수 있습니다. 코드상 ‘https://test.api.weniv.co.kr/mall’라는 경로가 사용되었으나 이 경로가 올바른지 다시 한 번 확인해 주세요.
반환 값 문제:
- getData 함수에서 fetch 요청 이후에 productData를 반환하고 있는데, 그 값을 사용하려면 비동기 작업이 끝난 후에 값을 받아와야 합니다.
보완된 코드:

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 호출 시 발생할 수 있는 오류를 처리하는 부분에 주의를 기울이시기 바랍니다. 그리고 데이터가 올바르게 전달되는지 항상 확인하시고, 로그를 통해 디버그하세요.

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

인프런 커뮤니티 질문&답변

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