2단계 axios 적용

App 컴포넌트 변경

 

App.vue 컴포넌트를 변경하여 백엔드 API와의 통신을 수행하도록 업데이트함. 이때, axios와 같은 라이브러리를 통해 API와 통신하며, 상태 관리 라이브러리를 사용하여 API 응답을 관리함.

1. Axios 설정: 백엔드 API와 통신하기 위해 Axios를 설정.
   • 예시: src/services/api.js 파일에 API 요청 설정을 분리.

// src/services/api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/api', // 프록시 설정된 기본 경로
  headers: {
    'Content-Type': 'application/json'
  }
});

export default apiClient;

2. App 컴포넌트에서 데이터 불러오기: App.vue 컴포넌트에서 onMounted를 사용해 초기 데이터를 백엔드에서 불러옴.

<script setup>
import { ref, onMounted } from 'vue';
import apiClient from '@/services/api';

const todos = ref([]);

const fetchTodos = async () => {
  try {
    const response = await apiClient.get('/todos'); // 예제 API 엔드포인트
    todos.value = response.data;
  } catch (error) {
    console.error('Failed to fetch todos:', error);
  }
};

onMounted(fetchTodos);
</script>

<template>
  <div>
    <h1>Todo List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

App.vue 컴포넌트에서 데이터가 성공적으로 로드되면 템플릿에 데이터를 표시하고, fetchTodos 함수를 통해 API에서 할 일 목록을 받아와 화면에 렌더링함.