.png)
Vue + Axios
Vue에서 axios를 사용하기 위해서는 vue와 axios 둘다 CDN을 통해 가지고 와야합니다.
CDN을 통해 axios 가져오기
복사 후 붙여넣기를 통해 axios를 사용할 수 있습니다.
axios가 잘 사용되는지 확인하기 위해서는 json 파일을 받아와 테스트를 해보는게 좋습니다.
따라서, 저는 json 파일들을 제공해주는 웹사이트에서 크롤링을 할 예정입니다.
JSON 파일 제공
<!-- body만 작성 -->
<body>
<!-- html 영역 -->
<div id="app">
<button v-on:click = "getTodos">todo 가져오기</button>
<ul>
<div v-for = "todo in todos" v-bind:key = "todo.id">
<li>{{ todo.title }}</li>
</div>
</ul>
</div>
<!-- vue & axios -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
<!-- JS 영역 -->
<script>
const app = new Vue({
el: "#app",
data:{
// 해당 객체로 웹페이지에서 긁어온 data 채워넣기
todos : [],
},
methods: {
async getTodos(){
try{
// 비동기이므로 데이터를 받는걸 기다리기 위해 async/await 사용
const response = await axios.get("https://koreanjson.com/todos");
this.todos = response.data;
}catch(error){
console.log(error);
}
}
}
});
</script>
</body>이 코드는 버튼을 클릭하게 되면, 해당 웹사이트에서 제공하는 JSON 파일 중 조건에 맞는 것들만 가져오겠다는 코드이다. 조건을 따로 지정해주지 않았기 때문에, data 중 title을 모두 가져올 것입니다.
| 초기 실행 | 버튼 클릭 시 |
|---|---|
 |  |
여러 방향으로 접근하는 개발자