[VUE] 로딩화면(로딩 스피너) 만들기 feat. Quasar

사용자 경험을 위해서 화면 렌더링이 완료되기 전까지 스피너를 띄워 유저를 지루하지 않게 한다.

 

예시

구현하는 것은 어렵지 않다. 말 그대로 로딩이 시작되는 시점에서 스피너를 보여주고, 끝나는 시점에 스피너를 가리면 된다. 

Vue에서는 v-if를 활용하면 돼서 정말 간단하다.

 

<템플릿 부분>

<template>
    <div class="spinner-div" v-if="isLoading">
      <q-spinner-cube
      color="primary"
      size="5em"
      />
    </div>
// ... 기타 코드
</template>

 

마찬가지로 API를 호출할 경우, 호출 시작 부분에 isLoading을 true로, response가 성공적으로 완료될 때 false로 전환시키면 된다.

 

만약 일반 자바스크립트로 개발 중이라면, 해당 스피너 요소의 display css를 none으로 하거나, 제이쿼리를 활용한다면 $('#해당요소id').hide() 하면 된다.

 

위의 예제 코드에는 <q-spinner-cube/> 라는 컴포넌트가 있는데, 이는 현재 본인이 쓰고 있는 퀘이사(Quasar) 프레임워크에서 제공하는 스피너 컴포넌트이다.

퀘이사에서 제공하는 spinner

 

퀘이사를 활용하고 있다면 여기서 제공하는 스피너들을 골라서 사용하면 된다.

quasar.dev/vue-components/spinners#example--other-spinners

Spinners | Quasar Framework

 

현재 작업해야 할 것들이 너무 많아 스피너 고도화가 계속 밀리고 있는데, 스피너를 최상위 컴포넌트(App.vue)에 선언 후 하위 컴포넌트에서 제어. 그리고 vuex를 활용한 spinner 상태 제어 등은 나중에 공부하고 적어보는 것으로..