Vue.js / 기초 / 11. 서버 데이터 바인딩 하기 (w/postman Mock Server)

1. Mock 서버 만들기

 

목적

Postman을 이용해서 Mock 서버를 만든다. 실무에서는 백엔드가 만들어놓은 서버 API에 프론트가 요청을 보내서 데이터를 받아오는데, 서버가 없으니 가짜로 서버를 만들어놓고 프론트엔드 테스트를 하는 것이다. 실제로, 기획이나 디자인 쪽에서 엑셀로 데이터를 만들어놓고, 이것을 JSON 데이터로 바꾼 뒤, Mock 서버를 만들어서 백엔드에서 개발을 하는 동안 프론트 엔드도 병렬적으로 업무를 진행할 수 있도록 한다고 한다.

 

Mock 서버 만들기

1) new-> mock server를 선택한다.

2) GET, test URL로 API를 만들고, next 클릭, Server name을 설정하여 Mock 서버 생성을 완료한다.

 

3) Mock Server - 서버 이름 - view Collections Docs에 들어간다. Request나 Response의 데이터 형태를 저장해놓는 곳이 Collections라고 보면 된다. 

4)  서버의 정보가 요약된 것을 확인할 수 있다. 서버 생성 시 만든 GET, {{url}}/test API가 생성되어있고, 아래에 Request, Response 영역이 정의되어 있다. Request에는 postman에서 만들어준 서버 주소가 있다. 나중에 이곳으로 요청을 보내면 Response가 오게된다. Response 부분은 비어있는데, 이제 서버로 요청이 오면 응답할 데이터를 작성하자.

5) Collections -> test API의 Default -> 아래 부분(Response)에 Body로 응답 데이터를 JSON 형태로 작성한다. 사진에는 안나왔으나.. 상단에 save 버튼을 누르면 Default 이름을 가진 Collections의 Response-body 정보를 설정하게 된 것이다.

 

6) 다시 Mock 서버에서 가려진 주소 링크를 누르면, 두번째 사진에 있듯이, 요청을 보낼 수 있게 된다. Response가 잘 오는지 확인하자. URL 끝에 /test라고 붙이는 것 잊지 말자!

---

 

 

---

 

2. 서버데이터 바인딩

 

Axios 사용

서버와 데이터를 주고 받을 때, 데이터를 처리해주는 패키지로 Axios를 사용한다. Axios는 HTTP 비동기 통신 라이브러리이다. Promise 객체 형태로 값을 return 한다. 

(Promise 에 대한 정리 글 : https://whitepro.tistory.com/149)

 

Axios 설치는 CLI 명령어로 가능하다.

npm install axios --save

mixins(믹스인) 사용

다음으로 mixins.js을 작성한다. mixins는 여러 컴포넌트에서 공통적으로 자주 쓰는 함수를 공통 함수화 하는 부분이다. axios를 통해서 서버의 API를 호출하는 함수는 컴포넌트마다 거의 동일한 형태로 사용하기 때문에 공통화를 한다. 이런 중복되는 함수를 여러 컴포넌트에 작성했는데 에러가 생긴다면, 모든 컴포넌트에서 수정이 필요할 것이다. 그래서 유지보수 관점에서 공통화를 하는 것이 유리하다.

 

공통 함수인 mixins의 $api 함수를 다음과 같이 작성한다. 함수명 앞에 $ 구분자를 붙이는 것은, 혹시라도 다른 부분에서 같은 이름의 함수가 있어서 함수가 오버라이딩 될 수 있기 때문이다.

 

$api 함수는 url, method, data를 받아와서 async ... await 구문을 이용하여 비동기적으로 데이터를 처리한다. 그리고 .catch 구문을 통해 에러 발생 시 에러를 콘솔에 출력한다.

 

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;
        }
    }
}

 

서버 데이터 만들기

위 1. Mock 서버 만들기에서 했던대로 서버의 api와 데이터를 만든다. 다만 여기서는 {{url}}/list, GET 주소로 만들고, 데이터도 여러 객체를 배열로 갖도록 만들어본다.

 

Collections에 들어가서 기존 Mock sever와 연결된 list Collection에 ... 버튼(녹색 체크 표시, 안보이지만 마우스를 갖다대면 나타난다.)을 눌러서 Add Request를 클릭하면 새로운 API를 만들 수 있다. 그리고 빨간 체크 표시로 된 ... 버튼을 눌러서 Add example을하여 새로운 url 및 response body 데이터를 작성한다. Response body 데이터는 JSON 형태로, 아래 표기하였다.

 

-Response의 Body 데이터

 

JSON 형태로 문자열은 "", 숫자는 그대로 써주는 등 작성 규칙을 잘 지켜야한다. 부호가 하나라도 틀리면 데이터가 망가지고 이상한 결과가 나올 수 있다.

 

[
    {
    "name" : "charlie",
    "age" : 1000,
    "city" : "Seoul"
    },
    {
    "name" : "biden",
    "age" : 500,
    "city" : "Washington D.C."
    },
    {
    "name" : "Johnson",
    "age" : 30,
    "city" : "London"
    }
]

 

 

테이블로 표현될, 서버 데이터를 받는 Vue 컴포넌트 만들기

 

서버 데이터를 받아서 표현하는 컴포넌트를 작성해보자.

 

• 테이블 요소를 삽입하였다. 여기에 v-for를 이용하여 받아오는 배열을 peopleList 라고 정의하고, 각 객체를 person이라고 정의하여 반복적으로 테이블 요소에 데이터가 들어가도록 했다. v-for 구문이므로 요소를 구분하기 위해서 반드시 key값을 바인딩 해주어야 한다. 원래는 index 값이 key값으로 바인딩되면 안되지만, 여기서는 특정 데이터가 삭제되거나 변경될 여지가 없는 단순 예제이므로 이렇게 처리하였다.
• mixins를 넣어주었다. export default 아래에 mixins 객체를 배열로 받는다. import 해오는 이름인 mixins가 배열에 들어가는 이름과 같도록 작성해야한다. 이것은 mixins 내부의 $api 메서드를 이용하기 위함이다.
• peopleList라는 빈 배열을 data로 정의하고, created() 라이프사이클에서 getList() 함수를 호출하여 컴포넌트 표시 전서버에서 미리 데이터를 받아오도록 한다. 그리고 methods에서 getList() 함수를 async...await 비동기 구문으로 호출하여 빈 배열인 peopleList에 서버에서 $api로 불러온 데이터들이 삽입되도록 해준다.
• 마지막으로 이 DataBindingList 컴포넌트가 Home 컴포넌트에서 불려오도록 해준다(아래 코드).

DataBindingList 컴포넌트

<template>
<div>
  <table>
    <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>도시</th>
    </tr>
    </thead>
    <tbody>
    <tr :key="index" v-for="(person, index) in peopleList">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
      <td>{{person.city}}</td>
    </tr>
    </tbody>
  </table>
</div>
</template>
 
<script>
import mixins from "@/mixins";
export default {
  mixins: [mixins],
  data() {
    return {
      peopleList : []
    };
  },
  created() {
    this.getList();
  },
  methods : {
    async getList() {
      this.peopleList = await this.$api("https://..{각 postman서버 고유값}.mock.pstmn.io/list", "get");
      console.log(this.peopleList); //확인용
    }
  }
}
</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>

 

 

Home 컴포넌트

<template>
<div>
  <h1>Welcome to Home</h1>
  <DataBindingList></DataBindingList>
</div>
</template>
 
<script>
import DataBindingList from "@/components/layout/DataBindingList.vue";
 
export default {
  name: "Home",
  components: {DataBindingList}
}
</script>
 
<style scoped>
 
</style>

 

결과화면

서버로부터 데이터를 받아와서 화면이 잘 출력된 것을 확인할 수 있다.

 

 

---

참조

1) [도서] Vue.js 프로젝트 투입 일주일 전 - 고승원 지음