학습목표
- axios통신 모듈을 컴포저블 함수로 구현

<BoardItem>을 가져올 때, 실패 >> Error / 딜레이 >> Loading… 표시하기

UI 만들기

• component/app/AppError.vue

  <template>
    <div class="text-danger text-center py-4">
      {{ msg }}
    </div>
  </template>
  
  <script setup>
  defineProps({
    msg: String,
  })
  </script>
  
  <style scoped></style>
  

• AppLoading.vue

  Spinners

  <template>
    <div class="d-flex justify-content-center">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
  </template>
  

조건 정의

반응형 상태로 UI를 적용한다

v-else는 나중에 하기 #

🔸 우선 로딩

로딩을 테스트하기 위해서는, api서버에서 조회하는 시간에 딜레이를 걸어야 합니다. ( 너무 빠름 )

package.json에서 (또는 json서버 실행할 때) --delay 2000를 작성합니다. *2초 딜레이

위 png를 보면 조금 이상한데, v-else로 페이징까지 같이 래핑해줘야겠다