반응형
vue skeleton 로딩
-
[vue] vue skeleton 사용하기프론트엔드/Vuejs 2020. 7. 13. 22:34
프론트에서 개발하다보면 api 중에 시간소요가 1초 이상 소요되어 화면에 랜더링 되기 전에 어떤 구성된 화면이 나왔으면 하는 순간이 있습니다. 왜냐하면 api 로 데이터를 받아올 때 까지 로딩되는 화면에는 아무런 리스트 화면도 보여주지 않으면, 사용자 입장에서 어색한 느낌이 있습니다. 이럴때 쓰는 로딩 방식보고 skeleton 로딩이라고 합니다. vue 에 라이브러리가 있나 찾아보았는데, 라이브러리 보다 css 만으로도 처리가 가능한 리소스를 찾아 내용 정리합니다. 1. vue skeletonBox 소스 2. 사용예시 import SkeletonBox from '@/components/common/SkeletonBox' export default { name: 'ModalAttribute', compon..