HTTP(HyperText Transfer Protocol)
브라우저와 서버 간에 데이터를 주고 받는 통신 프로토콜(Protocol:컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙)
HTTP 통신
브라우저에 특정 데이터를 보내달라고 요청(request)을 보내면, 응답(response)으로 해당 데이터를 보내주는 방식으로 동작. (HTTP 요청을 보냄 = 데이터를 보내달라는 요청이라고 보면 됨. 요즘 웹 앱에서 서버에 데이터를 요청하는 HTTP 통신은 필수로 구현해야 하는 기능.)
=> 대표적인 사례로는 jQuery의 ajax가 있음.
ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고 화면의 일부분만 변경할 수 있게 하는 자바 스크립트 기법이다. 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시한다.
뷰 리소스
뷰 리소스 설치 및 사용 방법
https://github.com/pagekit/vue-resource#installation
GitHub - pagekit/vue-resource: The HTTP client for Vue.js
The HTTP client for Vue.js. Contribute to pagekit/vue-resource development by creating an account on GitHub.
github.com
1. NPM 이용
node.js를 설치했다면 cmd 창에서 npm install vue-resource를 실행한다.
2. CDN 이용
<!-- Vue Resource CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.3"></script>
# 예시 1
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button v-on:click="getData">포레임워크 목록 가져오기</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<!-- 뷰 리소스 CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script>
new Vue({
el: '#app',
methods: {
getData: function() {
// 뷰 리소스에서 제공하는 API인 this.$http.get()을 사용하여 해당 URL에서 제공하는 데이터를 받아옴
// this.$http.get() : HTTP GET 요청을 서버에 보내고 특정 데이터를 받아오는 API
// then() 안에 데이터를 응답 받은 뒤의 동작을 구현한다.
this.$http.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response) {
console.log(response);
console.log(JSON.parse(response.data));
});
}
}
});
</script>
</body>
</html>실행결과
주의. CDN을 1.3.5 이상의 버전을 넣으면 JSON 오류가 나는 것을 확인했다.
VM845:1
Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at Vue$3.<anonymous>
Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse 오류는 json 형식의 문자열이 아닐 때 나는 오류다.
=> 오류 해결 방법은 데이터를 로그에 찍을 때, JSON.parse() 로 묶지 않고 사용하면 된다.
console.log(JSON.parse(response.data)); // 1.3.4 이전 버전
console.log(response.data); // 1.3.5 이후 버전
+ JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성하는 함수이다. 해당 오류는 뷰 리소스의 버전이 업그레이드되면서 액시오스처럼 JSON.parse() 따로 사용하지 않아도 되게끔 뷰 리소스 코드 내부에 json 데이터를 JavaScript 값이나 객체로 변환하는 특정 코드가 추가되지 않았을까 싶다.
또한 503 오류가 나는 경우도 있는데, 대부분 일시적인 오류로, 새로고침을 하면 해결되는 경우가 있다.
참고 HTTP/응답 503 코드
참고 URL
503 Service Unavailable - HTTP | MDN
하이퍼텍스트 전송 프로토콜 (HTTP) 503 Service Unavailable 서버 에러 응답(response) 코드는 서버가 요청(request)을 처리할 준비가 되지 않은 것을 나타낸다.
developer.mozilla.org
액시오스(axios)
뷰에서 지원하는 Promise 기반의 HTTP 통신 라이브러리.
Promise 기반의 API 형식
=> 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체.
자바스크립트는 단일 스레드(thread)로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려주지 않음.
따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타나는 로직을 실행해야 할 때 주로 Promise를 활용.
데이터를 받아왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행.
데이터 통신과 관련한 여러 라이브러리 대부분에서 Promise를 활용하고 있음.
Promise에 대해 참고할만한 URL
https://programmingsummaries.tistory.com/325
액시오스 설치 및 사용 방법
https://github.com/axios/axios#installing
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js
github.com
1. NPM 이용
node.js를 설치했다면 cmd 창에서 npm install axios를 실행한다.
2. CDN 이용
<!-- Axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>API 형식
| API 유형 | 처리 결과 |
| // HTTP GET 요청 axios.get('URL 주소').then().catch() |
해당 URL 주소에 대해 HTTP GET 요청을 보냄. → 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직 실행. → 오류가 발생하면 catch()에 정의한 로직 실행. |
| // HTTP POST 요청 axios.post('URL 주소').then().catch() |
해당 URL 주소에 대해 HTTP POST 요청을 보냄. → 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직 실행. → 오류가 발생하면 catch()에 정의한 로직 실행. |
| axios({ // 옵션 속성 method: 'get', url: 'URL 주소', .... }) |
HTTP 요청에 대한 자세한 속성들은 직접 정의하여 보낼 수 있음. 데이터 요청을 보낼 URL, HTTP 요청 방식, 보내는 데이터 유형 등등.. |
더 많은 Axios API
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js
github.com
# 예시 2
<div id="app">
<button v-on:click="getData">프레임워크 목록 가져오기</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<!-- Axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
getData: function() {
// 액시오스 GET 요청 API
axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response) {
console.log(response);
console.log(response.data);
});
}
}
});
</script>실행결과
'JavaScript > Vue.js' 카테고리의 다른 글
| [Do it! Vue.js 입문] 07. 뷰 라우터 (네스티드 라우터, 네임드 뷰) (0) | 2021.09.01 |
|---|---|
| [Do it! Vue.js 입문] 06. 이벤트 버스 (0) | 2021.08.12 |
| [Do it! Vue.js 입문] 05. 뷰 상위-하위 컴포넌트 간의 통신 (0) | 2021.08.10 |
| 이클립스 Spring 프로젝트에서 Vue.js 사용하기 (0) | 2021.08.06 |
| [Do it! Vue.js 입문] 04. 뷰 컴포넌트 (0) | 2021.08.02 |
| [Do it! Vue.js 입문] 03. 뷰 인스턴스 (0) | 2021.08.02 |
| [Do it! Vue.js 입문] 02. Vue.js 시작하기 (0) | 2021.07.30 |
