Angular Resolver : 개요

Angular Resolver의 개념, 기능 및 각도 프로젝트에 대한 실제 적용에 대해 설명합니다.

웹 애플리케이션을 만들기 위한 강력한 자바스크립트 프레임워크는 Angular라고 불립니다. 그것은 개발자들이 신뢰할 수 있고 실용적인 애플리케이션을 만들 수 있도록 광범위한 도구와 기능을 제공합니다.

Angular Resolver는 이러한 기능의 단일 예입니다. Angular 프로젝트에 대한 Angular Resolver의 개념, 기능 및 실제 적용에 대해 설명하겠습니다.

 

 

Angular Resolver란

Angular의 Resolver는 Resolve 인터페이스를 구현하는 클래스로 경로 활성화 전에 정보 수집을 담당합니다. Resolver는 우리가 알 수 있는 한 루트 모듈에 존재해야 하는 서비스 콜일 뿐입니다.

각도 개발에서 레졸버는 정확한 구성 요소를 로드하기 전에 실행할 수 있는 특정 미들웨어로 기능합니다. 구성 요소를 렌더링하기 전에 필요한 데이터를 사용할 수 있도록 경로와 구성 요소 사이에서 미들웨어 역할을 합니다.

Resolver를 사용하여 API 또는 서비스와 같은 외부 소스에서 데이터를 검색하여 구성 요소가 데이터를 사용할 수 있도록 할 수 있습니다.

 

 

일반 라우팅 흐름 대 각도 해결기 라우팅 흐름

이 섹션을 사용하여 리졸버가 있는 라우팅 흐름과 없는 라우팅 흐름 간에 차이를 둘 수 있습니다.

 

일반 라우팅 흐름:

최종 사용자가 링크를 클릭합니다.

Angular 프레임워크는 각 구성 요소에서 데이터를 로드하기만 합니다.

 

Resolver 라우팅 흐름:

최종 사용자가 링크를 클릭할 수 있습니다.

Angular는 특정 코드를 실행하고 관찰 가능한 값 또는 확인된 데이터를 반환합니다.

로드하려는 구성 요소의 데이터 제공자 클래스에서 생성자 또는 nGOnInit에서 반환된 값 또는 관측 가능한 값을 수집할 수 있습니다.

수집된 데이터를 목적에 맞게 사용합니다.

이제 구성 요소를 로드할 수 있습니다.

2단계, 3단계 및 4단계는 레졸버의 지원을 통해 수행됩니다. 따라서 레졸버는 링크를 클릭하고 구성 요소를 로드하는 중간 코드라고 결론 내릴 수 있습니다.

 

 

Angular Resolver을 선택하는 이유

다음 구성 요소의 활성화된 경로가 활성화되기 전에 Angular Resolvers를 통해 응용 프로그램이 서버에서 원격 데이터에 액세스할 수 있습니다. 서버 데이터가 검색될 때까지 다음 요소로 계속 이동할 수 없기 때문에 그렇게 될 때까지 스피너가 필요하지 않습니다.

순서가 지정되지 않은 목록이나 테이블로 받은 구성 요소의 항목 배열을 더 잘 이해하기 위해 제시하고자 하는 예를 들어 보겠습니다. 비즈니스 로직이 API 요청이 성공하면 변경되는 배열의 길이에 의존한다면, 이를 위한 *ngIf="어떤 조건"이 있다고 가정해 보겠습니다.

데이터를 받기 전에 구성 요소가 준비되기 때문에(어레이 항목이 아직 없습니다) 문제가 발생할 수 있습니다.

Route Resolver가 구하러 왔습니다. 구성 요소가 로드되기 전에 Angular의 경로 Resolver 클래스를 사용하여 데이터를 검색할 수 있습니다. 그러면 조건문이 해당 지점에서 해결기로 제대로 작동할 수 있습니다.

 

 

Angular Resolver의 이점

각도에서 레졸버를 사용하는 것에는 다양한 이점이 있습니다. 다음과 같은 주요 이유로 각도 응용 프로그램에 레졸버를 사용하는 것을 고려해 보십시오:

데이터 미리 로드: 구성 요소를 렌더링할 때 필요한 데이터를 사용할 수 있도록 레졸버를 사용하여 구성 요소를 로드하기 전에 데이터를 미리 가져올 수 있습니다. 로드 시간을 줄이고 원활한 경로 수정을 가능하게 하면 사용자 환경을 향상시킬 수 있습니다.

더 나은 구성 요소 설계: 구성 요소에서 데이터 검색 메커니즘을 분리하여 더 모듈화되고 재사용 가능한 구성 요소를 개발할 수 있습니다. 레졸버가 필요한 데이터를 얻는 작업을 처리하는 동안 구성 요소는 데이터를 표시하고 사용자 상호 작용을 관리하는 데 집중할 수 있습니다.

경로 보호: 특정 경로에 대한 액세스를 허용하기 전에 인증 또는 인증 확인을 수행하여 경로를 보호하는 데 확인기를 사용할 수 있습니다. 이를 통해 허용된 개인만 응용 프로그램의 특정 영역에 액세스할 수 있습니다.

 

 

인터페이스 확인

이제 해결 인터페이스를 검토해 보겠습니다.

export interface Resolve<T> {
  resolve(
   route: ActivatedRouteSnapshot, 
   state: RouterStateSnapshot
  ): Observable<T> | Promise<T> | T {
    return 'Data resolved here...'
 }
}

 

 

새 클래스를 사용하여 위의 인터페이스를 구현하여 경로 확인기를 만들어야 합니다. 인터페이스는 다음 두 가지 매개 변수로 해결 기능을 제공합니다:

Route - ActivatedRouteSanpshot

State - RouterStateSnapshot

 

구성 요소가 렌더링되기 전에 데이터를 미리 가져오기 위해 사용할 API를 호출할 수 있습니다. 경로 매개 변수를 사용하여 API 호출에서 경로 매개 변수를 사용할 수 있습니다.

확인 방법은 다음을 반환할 수 있습니다:

Observable

Promise

Custom type

 

이 방법은 확인된 데이터만 반환할 수 있습니다. 따라서 경로로 전송하기 전에 완료해야 합니다.

 

 

Angular Resolver 사용 예

Angular Resolver의 사용을 설명하기 위해 블로그 애플리케이션이 있는 시나리오를 고려해 보겠습니다. 홈 페이지에 블로그 게시물 목록을 표시하려고 합니다.

홈 페이지를 표시하려면 먼저 API에서 블로그 항목을 가져와야 합니다. 다음은 각도 해결기가 이를 달성하는 데 도움이 되는 방법입니다:

레졸버 클래스 만들기: Angular's Resolve 인터페이스를 준수하는 새 레졸버 클래스를 만듭니다. API에서 블로그 기사를 검색하는 기능이 이 클래스에 포함됩니다.

라우팅 구성에서 레졸버를 정의합니다. 라우팅 구성 파일에서 새로 구성된 레졸버를 적절한 경로에 할당합니다. 경로의 구성 요소를 로드하기 전에 레졸버를 실행하도록 Angular에 지시합니다.

구성 요소의 확인된 데이터 사용: 구성 요소의 활성화된 경로 데이터 속성을 통해 확인된 데이터를 검색할 수 있습니다. 이 데이터는 구성 요소를 렌더링하기 전에 사용할 수 있으므로 가져온 블로그 기사를 표시할 수 있습니다.

 

 

Angular Resolver : 개요

 

 

이 예제에서 Angular Resolver를 사용할 경우의 이점

이 경우 Angular Resolver를 사용하여 홈 페이지를 표시하기 전에 API에서 블로그 항목을 수신했는지 확인합니다. 이를 통해 로딩 시간 지연을 제거하고 소비자에게 보다 원활한 경험을 제공합니다. 또한 여러 구성 요소에서 동일한 데이터가 필요할 때 코드가 중복되지 않도록 Resolver를 재사용할 수 있습니다.

 

 

결론

경로를 활성화하기 전에 Angular의 Resolver는 데이터 검색을 돕는 유용한 도구입니다. 데이터를 미리 로드하고 문제를 나누고 경로를 보호하는 방법을 제공합니다. Angular Resolver를 활용하여 보다 효과적이고 모듈식이며 내구성이 뛰어난 Angular 앱을 개발할 수 있습니다.

Resolver는 올바르게 사용하는 방법을 알고 있는 경우 개발 워크플로우와 Angular 애플리케이션의 일반적인 효율성을 크게 향상시킬 수 있습니다.