제리코드르렁

프론트엔드 애플리케이션에서 API 호출 시 지연이 발생하면 사용자 경험이 저하될 수 있기 때문에 로딩 중임을 알려주는 스피너(Spinner) UI를 추가하여 사용자에게 명확한 피드백을 제공함.3초 이상의 지연이 있을 경우 스피너 UI를 구현해 다음과 같이 작업을 수행:스피너 컴포넌트 생성Spinner.vue 컴포넌트로 스피너 UI를 만듦. 간단한 CSS 애니메이션으로 스피너를 구성. 2. App 컴포넌트에서 스피너 표시 상태 관리App.vue에 로딩 상태 변수를 추가하여 데이터 요청 중에 스피너를 표시.데이터 로딩이 완료되면 스피너를 숨기고 데이터를 화면에 표시하도록 설정. Todo List {{ todo.text }} 3초 지연 시간 처리만..

App 컴포넌트 변경 App.vue 컴포넌트를 변경하여 백엔드 API와의 통신을 수행하도록 업데이트함. 이때, axios와 같은 라이브러리를 통해 API와 통신하며, 상태 관리 라이브러리를 사용하여 API 응답을 관리함.Axios 설정: 백엔드 API와 통신하기 위해 Axios를 설정.예시: src/services/api.js 파일에 API 요청 설정을 분리.// src/services/api.jsimport axios from 'axios';const apiClient = axios.create({ baseURL: '/api', // 프록시 설정된 기본 경로 headers: { 'Content-Type': 'application/json' }});export default apiClient;..