devfrontendVue.js

[Vue.js 3.x]Vue 서버 데이터 바인딩

Related POST

Vue 서버 데이터 바인딩

1. API 호출 메서드 만들기

팀 프로젝트라면 API 호출 메서드는 팀 개발 리더가 작성할 활율이 높다
프론트 개발리더가 보통 공통 메서드를 구현해서 팀원들이 사용하게끔 제공한다

Axios

Axios란?

  • 서버와 데이터 송수신할 수 있는 HTTP 비동기 통신 라이브러리
  • vue.js 개발시 서버와의 통신을 위해 가장 많이 사용되는 라이브러리
  • Promise 객체 형태로 값을 리턴하게 됨
  • 자바스크립트 내장 함수인 Fetch와 달리 구형 브라우저도 지원
  • 응답 시간 초과시 해당 요청 종료도 가능

Axios 설치

1
npm install axios --save

Axios 제공 메서드 Aliases

  • 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]])

믹스인 파일 생성

Vue는 mixins를 통해 공통함수를 구현해서 사용가능

  • 각 컴포넌트에서 함수 별도 구현시 비지로직 변경이나 에러수정시 각각 컴포넌트내에 정의된 함수를 전체를 찾아서 바꿔야함

서버 데이터 렌더링

mOCK서버에 api 등록

  • /list
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    [
        {
            "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
        }
    ]

Mock서버 api 호출 , 데이터 렌더링

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>제품명</th>
          <th>가격</th>
          <th>카테고리</th>
          <th>배송료</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(product, i) in productList" :key="i">
          <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 {
  name: "DataBindingList2",
  components: {},
  data() {
    return {
      productList: []
    };
  },
  setup() {}, //컴포지션 API
  created() {
    this.getList();
  },
  mounted() {}, //template에 정의된 html 코드 렌더링 후 실행됨
  unmounted() {}, //unmount 완료 후 실행됨
  methods: {
    async getList() {
      //mock서버에서 호출  
      this.productList = await this.$api(
          "https://874001e4-d76c-453b-973d-361e018aa35d.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>

Related POST

공유하기