Vue.js와 TypeScript를 함께 사용하는 경우, API를 호출하고 응답을 처리하는 방법에 대해 배우고 싶으시겠죠? 이번 블로그에서는 Vue.js 애플리케이션에서 타입스크립트를 사용하여 API를 호출하고 데이터를 다루는 방법에 대해 알아보겠습니다.

1. Axios 라이브러리 설치

API를 호출하기 위해서는 Axios 라이브러리가 필요합니다. Axios는 간편하게 API 호출을 처리할 수 있는 라이브러리로, 타입스크립트와도 호환성이 높아 많은 Vue.js 프로젝트에서 사용됩니다. Axios를 설치하려면 다음 명령어를 실행하세요.

npm install axios

2. API 호출 및 응답 처리

Vue.js 컴포넌트에서 API를 호출하고 응답을 처리하는 방법을 살펴보겠습니다. 먼저, Axios를 이용하여 API를 호출하고 응답을 받습니다. 그리고 받은 데이터를 타입스크립트로 정의하여 다루는 것이 중요합니다.

import axios from 'axios';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const data = ref<any>(null);

    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        data.value = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();

    return {
      data
    };
  }
});

위 코드에서 ref<any>(null)은 응답 데이터의 타입을 any로 정의한 것입니다. 만약 더 엄격하게 타입을 정의하고 싶다면, 받아온 데이터의 인터페이스를 정의하여 사용할 수 있습니다.

3. 데이터를 화면에 표시

마지막으로 받아온 데이터를 Vue.js 컴포넌트에서 화면에 표시하는 방법을 살펴봅시다.

<template>
  <div>
    <ul v-if="data">
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-else>Loading data...</p>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

위의 코드에서는 v-if와 v-else 디렉티브를 사용하여 데이터가 로딩 중인지, 아니면 받아온 데이터를 표시해야 하는지를 확인합니다.

위와 같이 Vue.js 애플리케이션에서 타입스크립트를 사용하여 API를 호출하고 데이터를 다룰 수 있습니다. 이제 여러분의 Vue.js 프로젝트에서 안전하게 API를 호출하고 데이터를 관리해보세요!