API 등록 및 서버 데이터 바인딩

Mock 서버에 등록된 API 사용

Mock 서버에 등록된 API 데이터를 이용한 실제 서버 데이터를 호출해서 리스트를 렌더링하는 프로그램을 구현해보자.

axios 모듈 설치

서버 데이터를 호출할 때 axios 오픈소스를 많이 이용한다.

• 설치링크
  https://github.com/axios/axios
• using npm
  $ npm install axios
• import
  <script> 태그 안에 import 해주면 axios를 사용할 수 있다.

<script>
	import axios from "axios";
</script>

axios 이용한 서버 데이터 통신

전체코드

ServerData.vue 파일을 만들고 링크를 연결해준다.

// index.js
const routes = [
  ..., // serverdata 추가
	{
    	path: "/serverdata",
    	name: "ServerData",
    	component: () =>
      	import(/* webpackChunkName: "about" */ 	"../views/ServerData.vue"),
  	},
]

먼저 ServerData.vue의 전체 코드를 보자.

// ServerData.vue
<template>
  <div>
    <button type="button" @click="getProductList">조회</button>
    <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>
import axios from "axios";

export default {
  components: {},
  data() {
    return {
      productList: [],
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    async getProductList() {
      this.productList = await this.api(
        "https://a1e284c5-db6b-4726-a0be-a72a59f81862.mock.pstmn.io/productList",
        "get",
        {}
      );
      console.log(this.productList);
    },
    async api(url, method, data) {
      return (
        await axios({
          method: method,
          url: url,
          data: data,
        }).catch((e) => {
          console.log(e);
        })
      ).data;
    },
  },
};
</script>

<style scoped></style>

api 함수

서버로 data를 던지고 서버와 통신 후에 response를 받아오는api라는 비동기 함수를 만들어준다. 파라미터는 Postman에서 만든 서버 url, 호출하는 방식을 의미하는 method(get이냐 put이냐 delete냐 등등), 서버로 data를 던져줘야 하는 일이 있다면 던져주는 data 이렇게 3가지로 구성한다.
서버에서 response 해오는 data는 .data로 받아올 수 있다.

• 비동기 통신
  javascript에서 서버로 특정한 요청을 보낼 때 그 결과를 기다리지 않고 바로 다음 코드를 실행하게 된다. 그런데 결과를 받아와야 다음 코드를 실행할 수 있는 경우가 있다. 그럴 때 async await을 쓰는 것이다. 결과를 받아올 때까지 기다리겠다는 것이다.

axios는 우리가 import한 axios 기능이다. 우리가 method, url, data 정보를 주면 이것들을 갖고 서버에서 처리를 한 다음 결과를 response 해주는데 그것을 .data를 통해 다시 받아올 수 있다.

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

getProductList 함수

우리가 정의한 api 함수를 호출해서 가져온 데이터를 productList에 저장해주는 getProductList라는 비동기 함수를 정의하자. url은 우리가 postman에서 만든 mock server url을 넣으면 되고 get 방식을 사용한다. 그리고 data는 던져줄 게 없으니 일단 비워둔다. 잘 받아오는지 확인하기 위해 콘솔창에 출력해본다.

async getProductList() {
      this.productList = await this.api(
        "https://a1e284c5-db6b-4726-a0be-a72a59f81862.mock.pstmn.io/productList",
        "get",
        {}
      );
      console.log(this.productList);
    }

나머지는 우리가 앞에서 계속 해봤던 v-for를 사용해서 리스트를 렌더링하는 것이기 때문에 설명을 생략한다.

조회 버튼을 누르면 서버에서 가져온 리스트가 렌더링되는 것을 확인할 수 있다.

왜 Mock Server를 사용할까?

지금은 이렇게 Mock Server를 사용하지만 실제 server를 사용할 때도 이러한 방식으로 서버에 접근한다. url이 실제 server로 바뀔 뿐이다. 그래서 실제 프론트엔드 개발을 할 때 Mock server로 일단 개발을 진행하고 나중에 실제 server에 연결하는 경우가 많다.

다음 강의에서는...

server와 통신이 필요한 모든 화면에는api 함수가 필요한데 이런 방식으로 만들면 필요한 곳마다 이 함수를 계속 복사해서 붙여넣기 해야한다. 그래서 모든 컴포넌트에서 이것을 사용할 수 있게 등록하는 것을 배울 것이다.