Vue.js 로 유연한 스켈레톤 스크린 구축하기

소개

이 프로젝트에서는 Vue.js 를 사용하여 유연한 스켈레톤 스크린 컴포넌트를 만드는 방법을 배우게 됩니다. 스켈레톤 스크린은 실제 콘텐츠가 로드되기 전에 사용자 인터페이스의 단순화된 버전을 표시하는 UI 패턴으로, 기존 로딩 표시기보다 더 나은 사용자 경험을 제공합니다.

👀 미리보기

Skeleton screen animation preview

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다:

Vue.js 를 사용하여 재사용 가능한 스켈레톤 스크린 컴포넌트를 만드는 방법
제공된 데이터를 기반으로 스켈레톤 스크린의 구조를 구현하는 방법
스켈레톤 스크린 요소에 플래싱 애니메이션을 적용하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

Vue.js 를 사용하여 유연한 스켈레톤 스크린 컴포넌트를 생성할 수 있습니다.
스켈레톤 스크린 요소에 동적 스타일과 클래스를 적용할 수 있습니다.
스켈레톤 스크린에 플래싱 애니메이션 효과를 구현할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── components
│   ├── List
│   │   ├── content.js
│   │   └── index.js
│   └── Skeleton
│       ├── index.js
│       └── item.js
├── css
│   └── style.css
├── index.html
└── lib
    └── vue.min.js

그 중:

index.html은 메인 페이지입니다.
components/list는 제공된 목록 컴포넌트입니다.
components/Skeleton은 스켈레톤 스크린 컴포넌트입니다.
lib는 프로젝트 종속성을 저장하는 폴더입니다.
css는 프로젝트 스타일을 저장하는 폴더입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

Initial Effect

스켈레톤 스크린 컴포넌트 생성

이 단계에서는 index.html에서 전달된 데이터 paragraph를 사용하고 Vue 재귀 컴포넌트에 대한 지식을 결합하여 스켈레톤 스크린 컴포넌트 작성을 완료하는 방법을 배우게 됩니다.

components/Skeleton/item.js 파일을 엽니다.
ItemTemplate 변수에 다음 코드를 추가합니다:

let ItemTemplate = ``;
// TODO
ItemTemplate += `
<div :class="'ske-'+paragraph.type+'-container'">
  <div v-for="item in arrIs(paragraph)" :class="classIs(item)" :style="styleIs(item)" >
    <item :paragraph="item" :active="active"></item>
  </div>
</div>
`;

이 코드는 paragraph 데이터를 기반으로 스켈레톤 스크린의 구조를 생성합니다.

Vue.component("item", {...}) 섹션에서 다음 메서드를 구현합니다:

data() {
  return {
    typeList: ["rect", "circle"],
    classPrefix: "ske ske-",
    activeClass: " ske-ani"
  };
},
methods: {
  arrIs(obj) {
    if (obj?.rows) return obj.rows;
    else if (obj?.cols) return obj.cols;
    else return [];
  },
  classIs(obj) {
    if (this.typeList.includes(obj.type)) {
      return (
        this.classPrefix + obj.type + (this.active ? this.activeClass : "")
      );
    } else {
      return this.classPrefix + obj.type;
    }
  },
  styleIs(obj) {
    if (obj?.style && obj?.rowStyle) return { ...obj.style, ...obj.rowStyle };
    else if (obj?.style) return obj.style;
    else if (obj?.rowStyle) return obj.rowStyle;
    else if (obj?.colStyle) return obj.colStyle;
    else return {};
  }
}

arrIs 메서드는 중첩된 컴포넌트를 렌더링하기 위해 paragraph 객체의 rows 또는 cols 속성을 사용할지 여부를 결정합니다. classIs 메서드는 type 속성을 기반으로 스켈레톤 스크린 요소에 적용할 CSS 클래스를 결정합니다. styleIs 메서드는 style, rowStyle, 및 colStyle 속성을 기반으로 스켈레톤 스크린 요소에 적용할 스타일을 결정합니다.

item.js 파일을 저장합니다.

완료 후 효과는 다음과 같습니다:

Image description

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.