Angular 애플리케이션을 개발할 때 캐싱은 중요한 성능 최적화 기법 중 하나입니다. 캐싱은 반복적으로 필요한 데이터나 결과를 저장해두고, 나중에 동일한 요청이 있을 때 다시 계산하거나 가져오는 대신에 저장된 결과를 제공함으로써 응답 속도를 향상시킵니다.

1. 메모리 캐싱

앵귤러 애플리케이션에서 메모리 캐싱은 서비스나 컴포넌트에서 데이터를 메모리에 저장하는 기술입니다. 이를 통해 동일한 데이터를 다시 서버에서 가져오는 데 소요되는 네트워크 비용을 절약할 수 있습니다.

메모리 캐싱은 RxJS의 BehaviorSubject나 ReplaySubject와 같은 옵저버블을 사용하여 구현할 수 있습니다.

import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private cachedData$ = new BehaviorSubject<any>(null);

  getData(): Observable<any> {
    if (this.cachedData$.value) {
      return this.cachedData$;
    } else {
      return this.http.get<any>('/api/data').pipe(
        tap(data => this.cachedData$.next(data))
      );
    }
  }
}

2. HTTP 캐싱

HTTP 캐싱은 서버 응답을 클라이언트 또는 중간 캐시에 저장하여 동일한 요청이 들어왔을 때 다시 요청하는 대신에 저장된 응답을 사용하는 기술입니다. Angular 애플리케이션에서 HTTP 캐싱은 서버로부터 받은 응답을 클라이언트에 저장하고, 나중에 동일한 요청이 있을 때 서버로부터 다시 요청하는 대신에 저장된 응답을 사용할 수 있도록 합니다.

HTTP 캐싱은 서버의 응답에 Cache-Control 헤더를 설정하여 구현할 수 있습니다.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get<any>('/api/data', { headers: { 'Cache-Control': 'max-age=3600' } });
  }
}

캐싱을 통해 Angular 애플리케이션의 성능을 최적화할 수 있으며, 적절한 캐싱 전략을 선택하고 구현함으로써 사용자 경험을 향상시킬 수 있습니다.

이렇게 캐싱을 통해 Angular 애플리케이션의 성능을 최적화할 수 있으며, 적절한 캐싱 전략을 선택하고 구현함으로써 사용자 경험을 향상시킬 수 있습니다.

참고 자료

• Angular Documentation