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

gogo님의 프로필 이미지
gogo

작성한 질문수

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

데이터 통신 - 동기 / 비동기

노션과제에 대한 질문있습니다

해결된 질문

작성

·

414

2

 혹시 과제 풀이를 볼수 있는곳이 있을까요?

답변 1

0

gogo님의 프로필 이미지
gogo
질문자

frontend menu.js

// 커피 목록 조회 API를 요청해주세요.
const getCoffee = () => {
  console.log('index.js 파일의 openMenu 함수 안에서 getCoffee가 실행 됨')
  // 1. 백엔드 서버로 /starbucks API 요청해 커피 데이터를 받는다.
  getList()

  // 2. 받은 데이터로 createMenuCard 함수를 이용해 메뉴 카드를 모두 만들어주세요.
  // createMenuCard({ name: '아메리카노', kcal: 5 })
}

 

frontend index.html

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="index.js"></script>
    <script src="menu.js"></script>
    <script>
      function getList() {
        axios.get("http://localhost:3000/starbucks").then((res) => {
            console.log(res.data)
            for(let data of res.data) {
              createMenuCard(data)
            }
        })
      }
    </script>

이렇게 구현을 했는데 html에서는 코드를 구현안하고 menu.js 에서 axios를 사용하고싶은데 어떻게 해야할지 모르겠어서요..

안녕하세요. 김동욱님

캡쳐해 주신 이미지 확인 결과, html 파일에 axios가 실행될 수 있도록 코드를 추가해주셨네요.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

아래 부분 script 태그 안에 해당 코드들의 로직을 잘 만들어 주셨는데, 이를 menu.js 파일의 getCoffee 함수에 적용해 주시면 됩니다. 화살표 함수에 로직을 적용해 주시고, 해당 데이터를 잘 받아온 후에 데이터가 뿌려질 수 있도록 async-await도 적용해 보세요. 감사합니다.

gogo님의 프로필 이미지
gogo

작성한 질문수

질문하기