해결된 질문
작성
·
414
답변 1
0
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 태그 안에 해당 코드들의 로직을 잘 만들어 주셨는데, 이를 menu.js 파일의 getCoffee 함수에 적용해 주시면 됩니다. 화살표 함수에 로직을 적용해 주시고, 해당 데이터를 잘 받아온 후에 데이터가 뿌려질 수 있도록 async-await도 적용해 보세요. 감사합니다.