Vue - 엑시오스(axios) — EVOLUTION COMPLETE!

사용자가 이용하는 홈페이지가 하나 있다고 가정했을 때 사용자가 어떠한 신호를 보냈을 때 그에 맞는 데이터가 잘 전달되어야하고 전달된 데이터는 화면에 적절하게 표시되어야 합니다.

저같은 경우는 MVC모델에 익숙해있기 때문에 사용자가 원하는 페이지에 접근을 시도하게되면 컨트롤러, 모델, DB 등을 이용해서 사용자 화면에 적절하게 데이터를 출력해주었습니다.

물론 Jquery에 ajax라는 아주 훌륭한 기능이 있기 때문에 이 역시 지금도 아주 유용하게 사용하고 있습니다.

그런데 Vue에서는 HTTP 통신 라이브러리를 axios라는 라이브러리를 사용한다고 합니다.

다음은 Vue 공식문서에 aixos에 관한 간략한 설명입니다.

Axios는 Promise기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있는 API이다.

그래서 이번에는 axios 라이브러리에 정말 정말 간단하게 확인해보고 넘어 가겠습니다.

axios.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="getData">get user</button>
        <div>
            {{ users }}
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                users: []
            },
            methods: {
                getData: function() {
                    axios.get('https://jsonplaceholder.typicode.com/users/')
                    .then(function(response) {
                        console.log(response);
                        this.users = response.data;
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
                }
            }

        })
    </script>
    
</body>
</html>

전체적인 소스를 우선 추가하였지만 여기서 몇가지 확인해야할 부분이 있습니다.

<div id="app">
    <button v-on:click="getData">get user</button>
    <div>
        {{ users }}
    </div>
</div>

위 HTML코드에서 button을 클릭 했을 때 getData 함수가 실행되도록 설정했습니다.

그럼 아래의 methods 영역에서 getData는 실행되는데요 axios를 설정하고 있습니다.

참고: axios에 관한 설명은 axios github에서 직접 여러가지 옵션들을 확인해보시는걸 권장드리겠습니다. 여기서는 제가 공부한 내용에서 가장 간단하고 이해하기 쉬운 영역들만 다루고 있으니 자세한 설명은 꼭 github을 보시길 바라겠습니다.

axios github: https://github.com/axios/axios

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

methods: {
    getData: function() {
        axios.get('https://jsonplaceholder.typicode.com/users/')
        .then(function(response) {
            console.log(response);
            this.users = response.data;
        })
        .catch(function(error) {
            console.log(error);
        });
    }
}

getData 함수 내부 첫줄에는 axios.get('url')이 입력되어 있습니다. 해당 url에 접근하여 데이터를 전달받아 오겠다는 뜻인데요.

위에 실제 코드에 적혀진 url은 실제 비동기처리하기 위해 테스트로 존재하는 실제 url입니다.

해당 url에 접근해보도록 하겠습니다.

이런 내용들이 보이시죠??

이제 우리는 저 데이터들을 엑시오스를 이용해서 가지고 와야 합니다.

위 getData 함수에 입력된 그대로 결과를 받아와서

console.log(response); 를 먼저 해보겠습니다.

콘솔창에 여러줄의 데이터가 보입니다. config, data, headers, request, status 등등 이런 생김새들은 axios의 모습이니 그렇게만 알아두고 자세한 내용은 먼훗날 자세하게 공부를 해보는게 좋을것같습니다.

자 그렇다면 우리가 실제로 사용해야할 데이터는 어디있냐. 바로 data라는 항목에 존재합니다.

그래서 우리는 getData 함수에서 console.log(response) 이 부분을 console.log(response.data)로 수정해줄거구요.

받아온 데이터를 화면에 표시해주기 위해서 Vue 인스턴스에 data를 추가해주고 그안 users를 배열로 하나 선언해주도록 하겠습니다.

(위 소스를 보신 분들은 그냥 가만히 두셔도 됩니다. 따로 추가하실 필요 없어요 ㅎㅎ)

data: {
    users: []
},

그럼 이제 이 users에 우리가 axios를 이용해서 전달받은 데이터를 설정해줘야 합니다.

axios.get('https://jsonplaceholder.typicode.com/users/')
.then(function(response) {
    console.log(response.data);
    this.users = response.data;
})
.catch(function(error) {
    console.log(error);
});

위에 보이는 소스코드는 axios 부분만 가지고 왔습니다.

우리가 원하는 결과는 response.data에 들어있으니 우리는 data에 설정한 users 배열에 response.data를 대입시키기 위해서

this.user = response.data를 사용해야하지만 그렇게 설정하면 정상적으로 작동하지 않게 됩니다.

axios에 진입하게 되면 this는 우리가 이전에 알던것처럼 생성한 Vue인스턴스를 가르키지 않게됩니다.

자세한 내용은 나중에 ES6의 화살표 함수등을 좀 제대로 숙지하고 설명하거나 이해하는게 좋을것같아서 여기서는 안된다라고만 생각하고 넘어가도록 하겠습니다.

그렇다면 이제 axios 부분의 소스를 다음과 같이 수정해주어야 합니다.

getData: function() {
    var vm = this;
    axios.get('https://jsonplaceholder.typicode.com/users/')
    .then(function(response) {
        console.log(response);
        //axios가 실행되었을 때 this와 그전에 실행한 this는 차이가 있다.
        vm.users = response.data;
    })
    .catch(function(error) {
        console.log(error);
    });
}

axios에 진입하기전 vue 인스턴스를 가르키는 this를 vm이라는 변수에 할당하고 실제 axios가 가동되고 users에 값을 세팅하기 위해서

vm.users = response.data; 이렇게 해주면 서버로부터 전달받은 데이터들을 users에 할당할 수 있습니다.

<div id="app">
    <button v-on:click="getData">get user</button>
    <div>
        {{ users }}
    </div>
</div>

그럼 이제 버튼을 누르게 되면 vm.users에 response.data의 데이터가 할당되고 vm.users의 값은 위 코드에서 {{ users }}부분에 값을전달받은 데이터를 표시하게 됩니다.

자 이렇게 제가 공부한 aixos에 대한 설명을 마치도록 하겠습니다.

공부하면서 필요한 부분만 작성하다보니 누락된 부분이 있을 수 있는데 언제든지 댓글남겨주시면 최대한 성의있는 피드백을 드리도록 노력하겠습니다 ^^

저작자표시

'Dev > Vue' 카테고리의 다른 글

Vue - computed로 클래스 조작 (0)	2022.05.31
Vue - watch (0)	2022.05.31
Vue - v-on (0)	2022.05.13
Vue - 라우터 링크[router-link] (0)	2022.04.13

'Dev > Vue' 카테고리의 다른 글

티스토리툴바