Vue.js는 단일 페이지 애플리케이션을 구축할 때 많이 사용되는 프레임워크 중 하나입니다. 이 프레임워크는 TypeScript로 작성된 앱에서도 잘 작동하며, 타입 안정성을 제공하여 코드의 안정성을 높일 수 있습니다.
Axios를 사용한 비동기 데이터 통신
Vue.js 애플리케이션에서 비동기 데이터 통신을 수행하기 위해 axios를 사용하는 것이 일반적입니다. axios는 HTTP 클라이언트 라이브러리로, Promise 기반의 API를 제공하여 간단하게 HTTP 요청을 수행할 수 있습니다.
import axios from 'axios';
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
return response.data;
} catch (error) {
console.error('Error fetching data:', error);
throw error;
}
}
위의 예제에서는 axios를 사용하여 외부 API에서 데이터를 가져오는 fetchData 함수를 정의했습니다. 이 함수는 async 키워드로 비동기 함수로 선언되었으며, axios.get 메서드를 사용하여 데이터를 요청합니다. 데이터를 성공적으로 가져오면 응답의 데이터를 반환하고, 에러가 발생하면 콘솔에 로깅한 후 에러를 다시 throw합니다.
Vue 컴포넌트에서 데이터 통신
Vue 컴포넌트에서 fetchData 함수를 사용하여 데이터를 가져오고 화면에 표시할 수 있습니다. 아래는 Vue 컴포넌트에서 fetchData 함수를 활용하는 예제입니다.
<template>
<div>
<button @click="fetchAndDisplayData">Fetch Data</button>
<div v-if="data">{{ data }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { fetchData } from './api';
export default defineComponent({
setup() {
const data = ref(null);
const fetchAndDisplayData = async () => {
data.value = await fetchData();
};
return {
data,
fetchAndDisplayData,
};
},
});
</script>
위의 예제에서는 Vue 컴포넌트에서 ref를 사용하여 데이터를 저장하고, fetchAndDisplayData 메서드를 정의하여 fetchData 함수를 호출하고 반환된 데이터를 화면에 표시합니다.
결론
Vue.js 애플리케이션에서 TypeScript와 axios를 사용하여 비동기 데이터 통신을 쉽게 수행할 수 있습니다. 이를 통해 코드의 안정성을 높이고, 개발자 경험을 향상시킬 수 있습니다.