3단계 지연 시간에 대한 스피너 UI 구현

프론트엔드 애플리케이션에서 API 호출 시 지연이 발생하면 사용자 경험이 저하될 수 있기 때문에 로딩 중임을 알려주는 스피너(Spinner) UI를 추가하여 사용자에게 명확한 피드백을 제공함.

3초 이상의 지연이 있을 경우 스피너 UI를 구현해 다음과 같이 작업을 수행:

1. 스피너 컴포넌트 생성
   • Spinner.vue 컴포넌트로 스피너 UI를 만듦. 간단한 CSS 애니메이션으로 스피너를 구성.

<!-- src/components/Spinner.vue -->
<template>
  <div class="spinner"></div>
</template>

<style scoped>
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>

2. App 컴포넌트에서 스피너 표시 상태 관리

• App.vue에 로딩 상태 변수를 추가하여 데이터 요청 중에 스피너를 표시.
• 데이터 로딩이 완료되면 스피너를 숨기고 데이터를 화면에 표시하도록 설정.

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

const todos = ref([]);
const isLoading = ref(false); // 로딩 상태 변수

const fetchTodos = async () => {
  isLoading.value = true; // 로딩 시작
  try {
    const response = await apiClient.get('/todos'); // API 요청
    todos.value = response.data;
  } catch (error) {
    console.error('Failed to fetch todos:', error);
  } finally {
    isLoading.value = false; // 로딩 완료
  }
};

onMounted(fetchTodos);
</script>

<template>
  <div>
    <h1>Todo List</h1>
    <div v-if="isLoading">
      <Spinner /> <!-- 스피너 표시 -->
    </div>
    <ul v-else>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

3초 지연 시간 처리

• 만약 API 응답이 3초 이상 걸리는 경우 스피너가 표시된 상태에서 대기하여 로딩 중임을 명확히 전달.
• 예를 들어 setTimeout을 활용하여 3초 이상 지연되었을 때만 스피너를 표시할 수 있음.

스피너 UI를 통해 사용자에게 응답 지연을 인지하게 하고, 데이터 로딩이 완료되면 스피너를 숨겨 자연스러운 사용자 경험을 제공.