Angular Pipe Async + RxJs Observable + Skeleton Loading으로 페이지 구현

RxJ로 페이지를 구현했는데 콘텐츠가 사용자에게 부드럽지 않은 방식으로 표시되는 경우!? 또는 일부 웹사이트를 탐색할 때 콘텐츠가 로드되고 가 점프할 때!?

예!? 오늘은 강력한 Angular Pipe Async, RxJ 및 아름다운 스켈레톤 로딩 기능을 사용하여 페이지를 구현하는 방법을 보여드리고자 합니다!

자, 시작해 봅시다!

제품 인터페이스 만들기

먼저 Observable 및 API 응답을 입력하기 위한 간단한Product 인터페이스를 생성합니다.
요소를 입력하면 강력한 자동 완성과 같은 좋은 기능을 많이 얻을 수 있습니다.

명령은 다음과 같습니다. ng generate interface models/product

export interface Product {
  name: string;
}

제품 목록을 얻기 위해 서비스 만들기

이제 API와 통신하고 API 제품 데이터를 가져오는 get 메서드를 구현하는 Angular 서비스를 만들어 보겠습니다. (무료 모의 Rest API를 사용하고 있습니다. mockapi.io )

명령은 다음과 같습니다. ng generate service service/product

constructor(
      private _httpClient: HttpClient,
  ) { }

  getProductsList(): Observable<Product[]> {

    return this._httpClient.get<Product[]>(
        `${ environment.urlApi }/products`,
    );
  }

이제 우리는 getProductsList() 방법으로 서비스를 제공합니다! 이 메서드는 API와 통신하고 제품 배열 Observable을 반환합니다.

API getProucts() 메서드로 통신 구현!

먼저 Product Observable을 생성해야 합니다. 따라서 component.ts 파일에서 아래와 같이 생성합니다.

export class MarketListComponent implements OnInit {

  productsList$: Observable<Product[]>; 

  constructor() { }

  ngOnInit(): void {
  }
}

The $ is a convention to identify an Observable variable, so if you to see a variable and the last character is a $ probably that's an Observable.

일부 메서드에서 내 TypeScript 코드를 분리하는 것을 좋아합니다. 즉, 내 코드를 내 ngOnInit() 수명 주기 후크에 직접 작성하는 것을 좋아하지 않습니다. 따라서 격리하고 호출하는 간단한 방법을 만들겠습니다ngOnInit()! 그러나 ngOnInit() 안에 직접 코드를 작성할 수 있습니다.

export class MarketListComponent implements OnInit {

  productsList$: Observable<Product[]>; 

  constructor(
      private _moviesService: ProductsService
  ) { }

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts(): void {

    this.productsList$ = this._moviesService.getProucts();
  }
}

우리가 무슨 짓을 한거야!? 생성자에서 Products Service를 선언합니다. 이제 ObservableproductsList$이 getMovies()를 수신하고 API에서 데이터를 가져옵니다. 이제 html에 표시해야 합니다!

Angular Pipe Async로 템플릿 구현

Observable이 있을 때 구독을 수행해야 하고 Observable의 구독 취소도 수행해야 합니다! 따라서 강력한 비동기 파이프가 우리를 위해 해냅니다! 완벽하죠!?

In few words, the async pipe subscribes to an Observable and when the component is destroyed, it automatically unsubscribes!

이제 html 파일에서 async 파이프를 구현해 보겠습니다.

<main>
  <ng-container *ngIf="(productsList$ | async) as productsList; else statusAPITemplate">
    <ng-container *ngFor="let product of productsList">
      <div class="card-product">
        <h1>
         {{ product.name }}
        </h1> 
      </div>
    </ng-container>
  </ng-container>
  <ng-template #statusAPITemplate>
    <span>
     Loading data...
    </span>
  </ng-template>
</main>

구조의 이해!

먼저, 우리는 productList$가 있는 ng-container와 async 파이프가 있고 productList를 변수로 선언합니다. 그게 우리가 해야 할 전부입니다! 각도 때문에async 파이프는 구독 및 구독 취소를 처리합니다. 그리고 마지막 값이 방출되지 않으면 각도는 Loading data span과 함께 <ng-template #statusAPITemplate>를 보여줍니다!
두 번째<ng-container *ngFor="let product of productsList">는 제품 목록이 있으므로 반복해야 하기 때문입니다!

그리고 그 결과입니다!



로딩 템플릿이 있고 몇 초 후에 제품 목록 콘텐츠가 있지만 복구하면 콘텐츠가 갑자기 사용자에게 표시되어 좋지 않은 경험을 유발하고 모바일에 있는 경우 화면이 점프할 수 있습니다. 더 나쁜.

짜잔, 우리는 이 문제를 해결하고 더 나은 사용자 경험을 제공하고 페이지와 코드에 가치를 더할 수 있습니다. 강력한 스켈레톤 로딩으로 해봅시다!

스켈레톤 로딩이란!?

In a nutshell, skeleton loading it's an interface representation of your component is getting the data, so you simulate the space with the animated element and avoid screen-jumping, lighthouse content shift problems and get a good user experience. So, let's start!

내 Angular 프로젝트에서 나는 NGX Skeleton loader 라이브러리를 사용하는 것을 좋아하는데, 그것은 나에게 매우 잘 작동합니다!

따라서 명령npm i ngx-skeleton-loader을 실행하고 구성 요소 모듈로 가져옵니다.

이제 Loading 데이터 범위를 새 구성 요소인 ngx-skeleton-loader 로 변경해야 합니다. 그래서 우리의 코드는 아래와 같을 것입니다:

<main>
  <ng-container *ngIf="(productsList$ | async) as productsList; else statusAPITemplate">
    <ng-container *ngFor="let product of productsList">
      <div class="card-product">
        <h1>
         {{ product.name }}
        </h1> 
      </div>
    </ng-container>
  </ng-container>
  <ng-template #statusAPITemplate>
    <!--<span>
     Loading data...
    </span>-->
      <ngx-skeleton-loader [theme]="{width: '100%', height: '95px', marginBottom: '14px', borderRadius: '1.5rem'}"
                           [count]="7">
      </ngx-skeleton-loader>
  </ng-template>
</main>

구조의 이해!

theme 입력에서 CSS 속성을 전달하여 ngx-skeleton-loader 를 사용자 정의할 수 있습니다. 그런 다음 카드 제품처럼 보이도록 몇 가지 속성을 전달했습니다. 그리고 count 입력에서 우리가 원하는 ngx-skeleton-loader 요소의 양을 전달합니다.

그리고 이제 마지막으로 더 나은 사용자 경험을 갖게 되었고 등대와 관련된 일부 문제를 예방하고 코드와 페이지를 개선했습니다! 구경하다!



저는 제 프로젝트에서 스켈레톤 로딩을 사용하는 것을 정말 좋아합니다. 강력합니다!

글이 즐거우셨기를 바라며 도움이 되셨다면 댓글을 달아주세요! 그리고 질문이 있으시면 댓글도 남겨주시면 즐거운 대화가 될 것입니다!

곧 만나요!