[angular] HTTP 요청 최적화

26 Dec 2023

angular

Angular 애플리케이션을 개발하다 보면 HTTP 요청 최적화는 매우 중요합니다. 이를 통해 앱의 성능을 향상시키고 사용자 경험을 향상시킬 수 있습니다. 이 포스트에서는 Angular 애플리케이션에서 HTTP 요청을 최적화하기 위한 몇 가지 방법을 살펴보겠습니다.

1. HTTP 캐시 활용

Angular에서는 HTTP 요청의 응답을 캐싱하여 동일한 요청에 대한 중복된 요청을 피할 수 있습니다. 이를 위해 HttpClient 모듈을 사용하여 요청을 캐싱하고 필요에 따라 캐시를 재사용할 수 있습니다.

import { HttpClient, HttpHeaders } from '@angular/common/http';

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

  public getData(): Observable<any> {
    const url = 'api/data';
    const options = {
      headers: new HttpHeaders({ 'cache': 'true' })
    };
    return this.http.get(url, options);
  }
}

2. Lazy Loading 사용

Angular에서는 모듈을 lazy loading하여 초기 로딩 시간을 최적화할 수 있습니다. 특히, 사용자가 필요로 할 때만 특정 모듈을 로드하는 방식은 HTTP 요청의 수를 줄이고 성능을 향상시키는 데 도움이 됩니다.

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) }
];

3. HTTP Interceptor 활용

HTTP Interceptor를 사용하여 HTTP 요청을 가로채고 변형시킬 수 있습니다. 이를 통해 요청에 대한 추가적인 로직을 쉽게 구현할 수 있습니다. 예를 들어, 인증 토큰을 요청 헤더에 추가하거나 요청을 로깅할 수 있습니다.

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 인증 토큰 추가
    const authReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${this.authService.getToken()}`
      }
    });
    return next.handle(authReq);
  }
}

HTTP 요청 최적화는 Angular 애플리케이션의 성능을 향상시키고 사용자 경험을 향상시키는 핵심적인 요소입니다. 위의 방법들을 활용하여 애플리케이션의 HTTP 요청을 효율적으로 관리할 수 있습니다.

Angular HTTP Module 공식 문서

이상으로 Angular에서 HTTP 요청 최적화에 대한 내용을 마치도록 하겠습니다. 감사합니다!