[javascript] Vue.js와 REST API 연동하기

01 Dec 2023

javascript

Vue.js는 사용자 인터페이스를 개발하기 위한 프로그레시브 프레임워크입니다. REST API는 웹 애플리케이션과 서버간의 통신을 위한 표준 방법입니다. 이번 포스트에서는 Vue.js와 REST API를 연동하는 방법에 대해 알아보겠습니다.

1. axios를 이용한 REST API 호출

REST API를 호출하기 위해서는 서버로의 요청을 보내고 응답을 받아야 합니다. axios는 이를 쉽게 처리해주는 자바스크립트 라이브러리입니다. 우선, axios를 설치해줍니다.

npm install axios

이제 Vue.js 컴포넌트에서 axios를 사용하여 REST API를 호출해보겠습니다.

import axios from 'axios';

export default {
  mounted() {
    axios.get('https://api.example.com/users')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }
}

axios.get() 메서드를 사용하여 GET 요청을 보내고, 응답을 받은 후에는 .then() 메서드와 .catch() 메서드로 응답 처리를 할 수 있습니다.

2. API 결과를 Vue 컴포넌트에 바인딩하기

REST API로부터 받은 데이터를 Vue 컴포넌트에 바인딩하여 표시해보겠습니다.

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    axios.get('https://api.example.com/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}
</script>

위의 예제에서는 {{ user.name }}으로 API 결과를 바인딩하여 사용자 이름을 표시하고 있습니다.

3. CRUD 기능 구현하기

REST API를 사용하면 CRUD(Create, Read, Update, Delete) 기능을 쉽게 구현할 수 있습니다. 예를 들어, 사용자를 생성하는 메서드를 추가해보겠습니다.

<template>
  <div>
    <input v-model="newUserName" type="text" placeholder="이름 입력" />
    <button @click="createUser">사용자 생성</button>

    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      newUserName: ''
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('https://api.example.com/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    createUser() {
      axios.post('https://api.example.com/users', {
          name: this.newUserName
        })
        .then(response => {
          this.newUserName = '';
          this.fetchUsers();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

위의 예제에서는 사용자를 생성하기 위해 axios.post() 메서드를 사용하고, 생성 완료 후에는 fetchUsers() 메서드를 호출하여 사용자 리스트를 갱신합니다.

이렇게 Vue.js와 REST API를 연동하여 웹 애플리케이션을 개발할 수 있습니다. 추가적인 CRUD 기능은 비슷한 방법으로 구현할 수 있습니다.

참고자료:

Vue.js 공식 문서

axios 공식 문서

마무리

이번 포스트에서는 Vue.js와 REST API를 연동하는 방법에 대해 알아보았습니다. Vue.js와 REST API를 활용하여 데이터 통신을 간편하게 처리할 수 있는 장점을 가지고 있습니다. 마지막으로, Vue.js 공식 문서와 axios 공식 문서를 참고하여 더 자세한 내용을 학습하시기를 권장합니다.