07 서버 데이터 바인딩 실습

vencott·2022년 2월 17일

vue.js

Vue.js 프로젝트 투입 일주일 전

목록 보기

7/12

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

실제 프로젝트에선 모든 데이터를 서버로부터 가져오고, 사용자로부터 생성된 데이터는 서버에 보내 DB에 저장해야 한다

Vue에서 서버 통신을 위해 가장 많이 사용하는 Axios를 이용해서 API 호출 메소드를 만들고 앞으로 구현하는 모든 Vue 컴포넌트에서 사용할 수 있도록 전역 메소드로 등록한다

7.1.1 Axios란?

서버와 데이터를 송수신 할 수 있는 HTTP 비동기 통신 라이브러리이자 Vue.js 개발 시 가장 많이 사용되고 있다

Promise 객체 형태로 값을 return한다

fetch와 달리 구형 브라우저도 지원하고, 응답 시간 설정을 통해 네트워크에 에러가 발생했을 때 정해진 응답 시간을 초과하면 해당 요청을 종료시킬 수 있다

7.1.2 Axios 설치

npm install axios --save

7.1.3 Axios 사용법

Axios에서 제공하는 request methods는 다음과 같다

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

서버와 통신 시, 현재 통신하는 목적이 무엇인지 명확하게 전달하기 위해서 request methods를 여러 가지로 제공한다

7.1.4 믹스인(Mixins) 파일 생성

다수의 컴포넌트에서 공통으로 사용하는 함수를 구현할 때, Vue.js에선 mixins를 사용한다

Mock 서버의 API를 호출하는 함수를 구현해서 mixins에 등록한다

src/mixins.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 파일을 사용하기 위해선 main.js에 등록해주어야 한다

src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import mixins from "./mixins";

const app = createApp(App);
app.use(router);
app.mixin(mixins);
app.mount("#app");

7.2 서버 데이터 랜더링

7.2.1 Mock 서버에 API 등록하기

Mock 서버에 /list 라는 api를 생성하고 다음과 같이 example을 추가한다

[{"product_name":"기계식키보드","price":25000,"category":"노트북/태블릿","delivery_price":5000,},{"product_name":"무선마우스","price":12000,"category":"노트북/태블릿","delivery_price":5000,},{"product_name":"아이패드","price":725000,"category":"노트북/태블릿","delivery_price":5000,},{"product_name":"태블릿거치대","price":32000,"category":"노트북/태블릿","delivery_price":5000,},{"product_name":"무선충전기","price":42000,"category":"노트북/태블릿","delivery_price":5000,}]

7.2.2. 서버 데이터 호출 및 리스트 랜더링

앞서 개발한 DataBindingList.vue에 api로부터 받아온 데이터를 바인딩한다

src/views/DataBindingList2.vue

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>제품명</th>
          <th>가격</th>
          <th>카테고리</th>
          <th>배송료</th>
        </tr>
      </thead>
      <tbody>
        <tr v-bind: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://3d5348c0-4158-4724-ad6f-352e7ef79ceb.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>