[Vue.js] 서버 데이터 바인딩 실습_ch.7

 

목차

• 서버와의 데이터 통신을 위한 API 호출 메소드 만들기
• 서버 데이터 렌더링

 

 

 

 

Mock 서버에 API를 생성하고 테스트 데이터를 등록하는 방법과 Vue 컴포넌트에서 Mock 서버에 등록한 API를 호출하여 서버 데이터를 바인딩 하는 방법에 대해 알아보겠다. 

 

 

 

 

서버와의 데이터 통신을 위한 API 호출 메소드 만들기

모든 데이터를 서버로부터 가져오고 사용자 인터렉션을 통해 발생한 데이터는 서버로 보내서 데이터베이스에 저장해야 한다.

 

서버 통신을 위해 가장 많이 사용하는 패키지 중 하나인 Axios를 이용해 API 호출 메서드를 개발해서 앞으로 구현하는 모든 Vue 컴포넌트에서 사용할 수 있도록 전역 메소드로 등록 하겠다. 

 

♣ Axios란 ? 

Axios는 서버와 데이터를 송수신할 수 있는 HTTP 비동기 통신 라이브러리이다.

Vue.js 개발 시 서버와 통신을 위해 가장 많이 사용되고 있는 라이브러리이며, Promise 객체 형태로 값을 return 한다. 

자바스크립트 내장 함수인 Fetch와 달리 구형 브라우저도 지원하고, 응답 시간 설정을 통해 네트워크에 에러 발생 시 정해진 응답 시간을 초과하면 해당 요청을 종료시킬 수 있다. 

 

♣ Axios 설치

터미널에서 다음 명령어를 통해 설치한다. 

npm install axios --save

 

♣ Axios 사용법

Axios에서 제공하는 request methods는 다음과 같다. 서버와 http 통신 시 현재 통신하는 목적이 무엇인지 명확하게 전달하기 위해 제공한다. 

• axios.request(config)
• axios.options(url[, config])
• axios.get(url[, config])
• axios.post(url[, data[, config]])
• axios.delete(url[, config])
• axios.put(url[, data[, config]])
• axios.head(url[, config])
• axios.patch(url[, data[, config]])

 

♣ 믹스인(Mixins) 파일 생성

Vue.js 에서 mixins을 통해 공통 함수를 구현해서 사용할 수 있다. 공통함수를 만드는 이유는 공통 함수를 구현해서 각각의 컴포넌트에서 호출해서 사용하는 방식이 효율적이기 때문이다. 비즈니스로직 변경 혹은 에러 수정 같은 변경사항 발생 시 각각의 컴포넌트 내 정의된 함수 전체를 찾아서 바꾸어야 하는 위험성이 없기 때문이다. 

 

앞서 만든 Mock 서버의 API를 호출하는 함수를 구현해서 mixins에 등록해 보겠다. 데이터 조회/수정/삭제/생성은 프로젝트 전반에 걸쳐 대다수의 컴포넌트에서 사용하는 공통 함수이므로 mixins에 등록해서 사용해야 한다. 

 

src/minxins.js 파일을 생성한다.

import axios from "axios";

export default {
    methods: {
        async $api(url, method, data) {
            return (await axios({
                method: method,
                url,
                data
            }).catch(e => {
                console.log(e);
            })).data;
        }
    }
}

생성된 mixins 파일을 Vue 컴포넌트에서 사용하기 위해서는 main.js에 등록해 주어야 한다.

import Vue from 'vue'
import mixins from './mixins'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
Vue.mixin(mixins)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

 

서버 데이터 렌더링

앞서 만든 Mock 서버를 호출해서, 받아온 데이터를 통해 바인딩 처리하겠다. 먼저 테스트로 사용할 데이터를 Mock 서버에 등록한다.

 

 

♣ Mock 서버에 API 등록하기

Postman에서 좌측 Collections 탭에서 Mock 서버에 마우스를 올리면 더보기 버튼이 보인다. 더보기 버튼을 클릭한 다음 Add Request를 클릭한다. 

Mock Server01 하위에 'list' 라는 이름으로 API Example를 추가한다. 

GET을 선택하고, path에는 '{{url}}/list'를 입력한다. body example response에 JSON을 선택하고 아래와 같이 데이터 배열을 등록한 후 save 한다. 

Run Mock Server 01 버튼을 클릭하면 Mock 서버가 실행되고, 아래와 같이 test, list 2개의 API가 초록색으로 활성화된 것을 확인할 수 있다. 

 

 

♣ 서버 데이터 호출 및 리스트 렌더링

Vue 컴포넌트에서 Mock 서버로 API를 호출해서 데이터를 받아와 리스트 렌더링 처리를 하겠다. 

 

src/views/DataBindingList2.vue를 추가한다. 

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>제품명</th>
                    <th>가격</th>
                    <th>카테고리</th>
                    <th>배송료</th>
                </tr>
            </thead>
            <tbody>
                <tr :key="i" v-for="(product, i) in productList">
                    <td>{{product.product_name}}</td>
                    <td>{{product.price}}</td>
                    <td>{{product.category}}</td>
                    <td>{{product.delivery_price}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                productList: []
            };
        },
        created() {
            this.getList();
        },
        methods: {
            async getList() {
                this.productList = await this.$api("https://89cfbfd6-2d87-40e0-809a-cc393453fb83.mock.pstmn.io/list", "get");
            }
        }
    }
</script>
<style scoped>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
</style>

 

Vue 라이프사이클 훅에 의해 컴포넌트가 생성 된 후 created 함수가 실행된다. created 함수에서 getList()를 호출하여 mock 서버로부터 미리 정의해놓은 데이터를 받아와서 data 함수의 productList에 할당하고 v-for 디렉티브를 통해 화면에 테이블 목록을 렌더링하게 된다. 

 

렌더링 결과 화면

 

 

 

 

 

 

 

 

 

 

※ 출처 고승원, 『Vue.js 프로젝트 투입 일주일 전』, 비제이퍼블릭, p140-149.