[typescript] Angular 캐싱 전략

26 Dec 2023

typescript

Angular 애플리케이션을 개발하다보면 API 호출 결과나 정적 데이터를 캐싱하여 성능을 향상시킬 수 있습니다. 여기에서는 Angular 애플리케이션에서 캐싱 전략을 구현하는 방법에 대해 알아보겠습니다.

캐싱의 이점

캐싱은 API 호출을 줄이고, 불필요한 데이터를 다시 불러오지 않도록 함으로써 성능을 향상시킬 수 있는 강력한 도구입니다. 또한, 네트워크 비용을 줄이고 사용자 경험을 개선할 수 있습니다.

서비스 레벨 캐싱

Angular 애플리케이션에서 서비스 레벨 캐싱은 서비스 자체에서 데이터를 캐싱하는 방식입니다. 예를 들어, RxJS의 ReplaySubject나 BehaviorSubject를 사용하여 API 호출 결과를 캐싱하고 컴포넌트 간에 공유할 수 있습니다.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private cachedData: ReplaySubject<any> = new ReplaySubject(1);
  private dataLoaded: boolean = false;

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    if (!this.dataLoaded) {
      this.http.get<any>('api/data').subscribe((data) => {
        this.cachedData.next(data);
        this.dataLoaded = true;
      });
    }
    return this.cachedData.asObservable();
  }
}

위의 예제에서는 ReplaySubject를 사용하여 API 호출 결과를 캐싱하고, dataLoaded 플래그를 사용하여 최초 한 번의 API 호출만을 보장합니다.

HTTP 인터셉터를 사용한 캐싱

또 다른 방법은 HTTP 인터셉터를 사용하여 API 호출을 가로채고 캐싱하는 것입니다. 이를 통해 서비스 코드에 대한 변화 없이 API 호출을 캐싱할 수 있습니다.

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class CachingInterceptor implements HttpInterceptor {
  private cache = new Map<string, any>();

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.method !== 'GET') {
      return next.handle(req);
    }

    const cachedResponse = this.cache.get(req.url);
    if (cachedResponse) {
      return of(cachedResponse);
    }

    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.cache.set(req.url, event);
        }
      })
    );
  }
}

위의 예제에서는 HttpInterceptor를 사용하여 GET 요청을 가로채고 캐싱을 수행합니다. 캐시에 데이터가 없을 경우에만 실제 HTTP 요청을 수행하고, 응답을 받아 캐시에 저장합니다.

결론

캐싱은 Angular 애플리케이션의 성능을 향상시키는 중요한 전략 중 하나입니다. 서비스 레벨 캐싱과 HTTP 인터셉터를 활용하여 데이터를 적절히 캐싱하면 네트워크 비용을 줄이고, 사용자 경험을 개선할 수 있습니다.