Miracle Morning, LHWN

5. 뷰 HTTP 통신 본문

IT 기술/[Vue] 기본

5. 뷰 HTTP 통신

Lee Hye Won 2021. 6. 2. 14:36

# 웹 어플리케이션의 HTTP (HyperText Tronsfer Protocol) 통신 방법

→ 근래에는 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해야 한다.

​

# HTTP : 브라우저 <> 서버 간에 데이터를 주고 받는 통신 프로토콜이다.

→ 브라우저에서 데이터를 보내달라고 요청 (request) 을 보내면,

서버에서는 응답 (response) 으로 해당 데이터를 보내주는 방식으로 동작한다.

→ 가장 대표적인 예 : jQuery, ajax

​

# ajax : 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다.

# axios : 뷰에서 ajax 를 지원하기 위한 라이브러리

 

뷰 리소스 (resource): 서버로부터 데이터를 받아올 수 있는 라이브러리

 

# this.$http.get() : 뷰 리소스에서 제공하는 API. HTTP GET 요청을 서버에 보낸다.

# then() 에서 응답받은 데이터를 처리한다.

# JSON.parse() : 문자열을 자바스크립트 객체 형태로 변환한다.

 

<!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></title>
</head>
<body>
    <div id="app">
        <button v-on:click>프레임워크 목록 가져오기</button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="hhttps://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>

    <script>
        new Vue({
            el: '#app',
            methods: {
                getData: function() {
                    // 해당 URL 로 HTTP GET 요청을 서버에 보냄
                    this.$http.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
                .then(function(response) {
                    // 요청을 보내고 나면 then() 에서 응답받은 데이터 response 를 출력
                    console.log(response);
                    console.log(JSON.parse(response.data));
                });
                }
            }
        });
    </script>
</body>
</html>

 

엑시오스 (Axios) : 가장 많이 사용되는 HTTP 통신 라이브러리

 

※ 오픈 소스의 라이브러리의 장래성은 github Repository 가 얼마나 활성화되어 있으냐로 판단할 수 있다.

​

# 엑시오스 : Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API 만으로도 간편하게 구현할 수 있따.

​

※ Promise 기반의 API ?

Promise 란 서버에서 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체이다.

자바스크립트는 단일 스레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려주지 않는다.

따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 Promise 를 활용한다.

그리고 데이터를 받아왔을 때 Promise 로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정 로직을 수행한다.

 

API 유형 처리 결과
axios.get('URL 주소').then().catch() 해당 URL 에 대해 HTTP GET 요청을 보낸다.
서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고,
데이터를 받아올 때 오류가 발생하면 catch() 에 정의한 로직이 수행된다.
axios.post('URL 주소').then().catch() 해당 URL 에 대해 HTTP POST 요청을 보내며, then(), catch() 의 기능은 위와 동일하다.
axios({ 옵션 속성 }) HTTP 요청에 대한 자세한 속성을 직접 정의할 수 있다. 데이터 요청을 보낼 URL, HTTP 요청방식, 보내는 데이터의 유형, 기타 등

 

// HTTP 요청에 대한 옵션 속성 정의
axios({
  method: 'get',
  url: 'URL 주소',
  ...
})
<!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></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>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                getData: function() {
                    axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
                    .then(function(response) {
                        console.log(response);
                    });
                }
            }
        });
    </script>
</body>
</html>

 

이때 뷰 리소스와 차이점은 axios 는 response 객체가 문자열이 아닌 객체 형태이기 때문에

JSON.parse() 를 이용해서 별도 객체로 변환할 필요가 없다. 이것이 뷰 axios 가 뷰 리소스보다 사용성이 좋다는 것이다.

저작자표시

'IT 기술 > [Vue] 기본' 카테고리의 다른 글

7. 뷰 프로젝트 구성  (0) 2021.06.02
6. 뷰 템플릿 (Template)  (0) 2021.06.02
4. 네스티드 라우터와 네임드 뷰  (0) 2021.06.02
3. 상용 웹 앱을 개발하기 위한 필수 기술들, 라우터 & HTTP 통신  (0) 2021.06.01
2. 뷰 컴포넌트 통신  (0) 2021.06.01
'IT 기술/[Vue] 기본' Related Articles more
Comments