• 카테고리

    질문 & 답변
  • 세부 분야

    백엔드

  • 해결 여부

    해결됨

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

23.02.05 12:28 작성 조회수 351

2

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

답변 2

·

답변을 작성해보세요.

0

gogo님의 프로필

gogo

질문자

2023.02.07

아...;; 바보같이 이상한 생각을 해서 머리속에서 꼬였었네요 ㅎ;;;

0

gogo님의 프로필

gogo

질문자

2023.02.05

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를 사용하고싶은데 어떻게 해야할지 모르겠어서요..

angie님의 프로필

angie

2023.02.06

안녕하세요. 김동욱님

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

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

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