API 통신: Vue에서 RESTful API와 통신하는 방법과 Axios 라이브러리 소개 #6

by

Vue.js로 웹 애플리케이션을 개발할 때, 다양한 데이터 소스와의 통신은 필수적입니다. 이러한 통신을 효과적으로 관리하고 처리하기 위해 RESTful API와 Axios 라이브러리를 사용할 수 있습니다. 이번 포스팅에서는 Vue에서 RESTful API와 통신하는 방법과 Axios 라이브러리를 소개하고, 실제 예제를 통해 어떻게 데이터를 가져오고 보내는지 알아보겠습니다.

RESTful API

RESTful API란 무엇인가요?

RESTful API는 Representational State Transfer의 약자로, 웹 서비스의 자원을 URL을 통해 표현하고, HTTP 메서드를 사용하여 해당 자원을 조작하는 웹 서비스 아키텍처입니다. RESTful API는 간단하고 확장 가능하며, 다양한 플랫폼 간에 데이터를 교환하는 데 사용됩니다.

RESTful API의 주요 특징:

  • 자원 (Resource): 모든 자원은 고유한 식별자(URI)를 가지며, 이를 통해 자원을 식별합니다. 예를 들어, /users는 사용자 자원을 식별합니다.
  • 행위 (Verb): HTTP 메서드(GET, POST, PUT, DELETE)를 사용하여 자원을 조작합니다. 예를 들어, GET 메서드는 자원을 조회하고, POST 메서드는 자원을 생성합니다.
  • 표현 (Representation): 자원의 상태를 표현하는 데이터 형식은 다양할 수 있으며, 주로 JSON 또는 XML 형식을 사용합니다.


Axios 라이브러리 소개

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 웹 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. Axios는 HTTP 요청을 간단하게 만들고 처리할 수 있도록 도와주며, RESTful API와의 통신을 용이하게 합니다. Vue.js와 함께 사용하기에 특히 적합합니다.

Axios의 주요 특징:

  • 간단한 API: HTTP 요청을 생성하고 응답을 처리하는 API는 직관적이며 사용하기 쉽습니다.
  • 자동 JSON 변환: Axios는 자동으로 JSON 데이터를 파싱하고 JavaScript 객체로 변환합니다.
  • Promise 기반: 비동기 요청을 처리하기 위해 Promise를 사용하므로 비동기 코드를 보다 간결하게 작성할 수 있습니다.

Axios 설치

Vue 프로젝트에 Axios를 설치하려면 다음 명령어를 실행합니다.

npm install axios
# 또는
yarn add axios

Axios를 설치한 후, Vue 애플리케이션에서 사용할 수 있도록 전역으로 설정합니다.

// main.js
import Vue from 'vue';
import axios from 'axios';

Vue.prototype.$axios = axios;

이제 Axios를 Vue 인스턴스에서 $axios로 사용할 수 있습니다.

Axios를 사용한 GET 요청 예제

Axios를 사용하여 RESTful API로 GET 요청을 보내는 간단한 예제를 살펴보겠습니다. 이 예제에서는 JSONPlaceholder라는 더미 API를 사용합니다.

<template>
  <div>
    <h1>게시물 목록</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
    };
  },
  created() {
    this.$axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        this.posts = response.data;
      })
      .catch((error) => {
        console.error(error);
      });
  },
};
</script>

위 예제에서는 Axios를 사용하여 JSONPlaceholder API로 GET 요청을 보내 게시물 목록을 가져옵니다. this.$axios.get() 메서드를 사용하여 GET 요청을 보내고, 응답을 받으면 데이터를 컴포넌트의 posts 데이터에 저장합니다.



Axios를 사용한 POST 요청 예제

Axios를 사용하여 RESTful API로 POST 요청을 보내는 예제를 살펴보겠습니다. 이번에는 JSONPlaceholder의 더미 API를 사용하여 새로운 게시물을 생성합니다.

<template>
  <div>
    <h1>새로운 게시물 생성</h1>
    <form @submit.prevent="createPost">
      <div>
        <label for="title">제목</label>
        <input type="text" id="title" v-model="newPost.title" />
      </div>
      <div>
        <label for="body">내용</label>
        <textarea id="body" v-model="newPost.body"></textarea>
      </div>
      <button type="submit">게시물 생성</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newPost: {
        title: '',
        body: '',
      },
    };
  },
  methods: {
    createPost() {
      this.$axios
        .post('https://jsonplaceholder.typicode.com/posts', this.newPost)
        .then((response) => {
          console.log('새로운 게시물이 생성되었습니다.', response.data);
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

위 예제에서는 Axios를 사용하여 JSONPlaceholder API로 POST 요청을 보내 새로운 게시물을 생성합니다. this.$axios.post() 메서드를 사용하여 POST 요청을 보내고, 새로운 게시물이 생성되면 응답 데이터를 콘솔에 출력합니다.




결론

Vue.js 애플리케이션에서 RESTful API와 통신하기 위해 Axios를 사용하는 방법을 알아보았습니다. Axios를 활용하면 간편하게 HTTP 요청을 보내고 응답을 처리할 수 있으며, RESTful API를 효과적으로 활용하여 데이터를 가져오거나 보낼 수 있습니다.

이번 포스팅에서는 Axios를 사용한 GET 및 POST 요청의 예제를 통해 Axios의 기본 사용법을 설명했습니다. RESTful API와의 통신은 Vue.js 애플리케이션 개발에서 핵심적인 부분이므로, Axios를 활용하여 데이터를 관리하고 애플리케이션을 업그레이드하세요!



Leave a Comment