[Vue.js]서버 데이터바인딩(미완)

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

실제 프로젝트에서 모든 데이터를 서버로부터 가져오게 되고, 사용자의 인터랙션을 통해 발생한 데이터는 서버로 보내서 데이터베이스에 저장해야 한다.

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

Axios란?

Axios는 서버와 데이터를 송수신 할 수 있는 HTTP 비동기 통신 라이브러리며, Promisw 객체 형태로 값을 return한다. js 내장 함수인 Fetch와 달리 구형 브라우저도 지원하고, 응답 시간 설정을 통해 네트워크에 에러가 발생했을 때 정해진 응답 시간을 초과 하면 해당 요청을 종료시킬 수 있다는 장점이 있다.

Axios 설치

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

npm install axios --save

Axios 사용법

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

• axios.request(config)
• axios.option(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을 통해 공통 함수를 구현해서 사용할 수 있다.

우선 src 폴더 밑에 간단하게 믹스인 파일을 만들자

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 { 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')

서버 데이터 랜더링

위에서 만든 Mock 서버를 호출해서 받아온 데이터를 통해 바인딩 처리하자.

먼저 테스트로 사용할 데이터를 Mock 서버에 등록.

Mock 서버에 API 등록하기

PostMan를 실행하고 좌측 패널의 Collections 탭에서 Mock 서버의 우측 …을 클릭하여 add Request 클릭

Request명 list로 만들고 add example 클릭하여 쌤플 데이터 배열 등록 후 save

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

api 준비가 됐으니 Vue 컴포넌트에서 Mock 서버로 API 호출해서 데이터 받아오기 및 리스트 랜더링 처리 해보자.

///////////////////////////////// 이부분은 추후 다시.

databindinglist 2, 3

/////////////////////////////////