728x90
일단 Http통신이 무엇인지 알아야 합니다.
간략하게 말씀드리면
HTTP(Hypertext Transfer Protocol)는 인터넷 통신 프로토콜입니다. www(World Wide Web)에서 사용되는 기본 프로토콜이며 웹 브라우저와 웹 서버가 통신하기 위해 사용됩니다.
대표적으로 ajax(jQuery)가 흔히 사용되고 있습니다.
Vue에서도 ajax를 지원하기 위한 라이브러리로 Vue Resource와 axios가 있는데
Vue Resource는 더 이상 사용되지 않습니다.
그래서 axios를 사용하겠습니다.
axios는 promise기반의 API 형식이 제공되어 곧 바로 사용하기 편합니다.
Promise기반의 API란 실행 흐름에서 비동기 처리를 유연하게 처리하기 위한 API입니다.
axios를 사용하려면 아래의 구분을 script에 추가해야합니다.
<script src="https://cdn.jsdelivr.net/npm/axios@1.3.6/dist/axios.js"></script>예제 코드를 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>axios</title>
</head>
<body>
<div id="app">
<button v-on:click="getCurrentDate">get Date</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.3.6/dist/axios.js"></script>
<script>
new Vue({
el: '#app',
methods: {
getCurrentDate: function() {
axios.get("http://worldtimeapi.org/api/timezone/Asia/Seoul")
.then(function(response){
alert(response.data['datetime']);
});
},
},
});
</script>
</body>
</html>코드 양이 많지 않아 그냥 설명 드리겠습니다.
일단 Vue 인스턴스의 merthods속성에 axios를 통해 가져올 데이터 링크를 적어 줍니다.
저는 한국의 현재 시간을 가져오겠습니다.
그리고 성공하면 then으로 들어갑니다. 그리고 가져온 데이터는 response에 들어오고 해당 json의 데이터에서 제가 필요한 datetime만 가져와 알림창으로 출력하겠습니다.
아래는 클릭 결과입니다.
다음에는 템플릿에 대해 공부하겠습니다.
'Vue.Js' 카테고리의 다른 글
| [Vue.Js] 14. Vue.Js template (2 디렉티브 속성) (0) | 2023.04.30 |
|---|---|
| [Vue.Js] 13. Vue.Js template (1 데이터 바인딩) (0) | 2023.04.29 |
| [Vue.Js] 11. Vue.Js 네스티드 라우터 & 네임드 뷰 (2) (0) | 2023.04.27 |
| [Vue.Js] 10. Vue.Js 네스티드 라우터 & 네임드 뷰 (1) (0) | 2023.04.26 |
| [Vue.Js] 9. Vue.Js 화면 구성 요소 변경 (Router) (0) | 2023.04.25 |
