각형 도형의 특징 표지

프레스턴 람 | ng 형태 | 2020년 9월

tldr;
응용 프로그램을 처리할 때, 특히 팀과 합작할 때 여러 가지 기능을 동시에 처리하는 경우가 많다.그러나 이들은 동시에 배치할 준비가 되어 있지 않다.언뜻 보기에 유일한 선택은 모든 준비가 다 될 때까지 배치를 미루는 것 같지만 얼마나 걸릴지 모른다.이 동시에 코드 라이브러리에 더 많은 기능을 추가했다.이것은 영원히 끝이 없는 순환이다.그러나 기능 표지가 있으면 언제든지 다른 환경에서 물건을 닫고 열 수 있다.언제든지 생산 환경에 배치할 수 있습니다. 프로그램이 지정한 부분의 기능 표시만 닫으면 됩니다.이 글은 응용 프로그램에 기능 표시를 어떻게 추가하는지 토론할 것이다.클래스 파일에서 사용할 수 있는 서비스, HTML 요소에 추가할 수 있는 명령, 그리고 프로그램의 새로운 루트를 보호하는 보호에 대해 소개합니다.마지막으로, 당신은 기능이 완비된 기능 표지 서비스를 가져야 합니다.

기능 플래그
시작하기 전에, 적어도 이런 상황에서는 기능 표지가 무엇인지 확실히 알 수 있도록 하자.기능 플래그에 대해 이야기할 때, 나는 설정 파일에 설정할 수 있는 진짜/가짜 값을 가리키며, 기능을 열거나 닫는 데 사용된다.이런 상황에서 그것은 모든 사람을 위해 열거나 닫는다.이것은 A/B 테스트가 아닙니다. A/B 테스트에서 로고는 사이트의 일부 방문자를 무작위로 열고 다른 방문자를 위해 닫습니다. (필요하면 같은 서비스를 사용해서 이 기능을 실현할 수 있습니다.)기능 플래그의 목적은 테스트 환경, 임시 저장 환경, 생산 환경이든 기능이 아직 준비되지 않았더라도 주어진 환경에 배치할 수 있도록 하는 것이다.그러나 이 표지는 닫혔기 때문에 아무도 이 기능이 존재한다는 것을 알지 못한다.일단 기능이 준비되면, 네가 깃발을 켜면, 모든 것이 매우 좋다.
'준비가 되지 않은 것' 은 여전히 빈틈이 있다는 것을 의미할 수도 있지만, 금요일에 판매하거나 특수한 제품이 발표되는 것을 의미할 수도 있다. 특별한 배치가 필요 없는 상황에서 그것을 열고 싶다는 것을 의미할 수도 있다.아마도 이 기능을 단지 짧은 시간 안에 사용할 수 있기를 원하고, 로고를 다시 닫고, 이 기능을 삭제하기 위해 배치하지 않기를 원할 것입니다. 아무도 그것을 보지 않을 것입니다.
이 글의 마지막 부분에서, 당신은 이 점을 위해 서비스, 수위, 지령을 받을 것이다.이 세 개의 항목과 하나의 프로필이 있으면 시작할 수 있다.

프로파일
마지막으로 토론할 것은 특성 표지를 어디에 두어야 하는가이다.프로그램 안내 시 불러오는 JSON 파일이나 프로그램 안내 조회로 사용할 데이터베이스에 배치해서 표지판을 바꾸는 것을 방지하는 것이 가장 좋은 위치입니다.Angular에 내장된 environment.ts 파일을 사용하면 작업을 할 수 있지만, 변경할 때마다 배치해야 합니다. 이것은 실행할 때 설정하는 것이지 실행할 때 설정하는 것이 아닙니다.너는 나의 이 박문Loading App Configuration in the APP_INITIALIZER에서 이 점을 어떻게 하는지에 관한 모든 내용을 읽을 수 있다.이 글에서, 나는 로드 특성 표지 설정의 전체 과정을 상세하게 소개하지 않을 것이다.이 설정을 기능 표지판에 사용할 서비스를 만드는 방법만 소개할 것입니다.
NPM에 Angular 패키지를 발표했습니다. 이 패키지는 실행할 때 설정을 불러오고 서비스에 제공합니다.그것은 runtime-config-loader 라고 불리며, 마운트 설정의 과정을 간단명료하게 한다.이 프레젠테이션에서 이 패키지를 사용하겠습니다.질문이 있으면 저에게 연락하거나 NPM의 패키지를 보십시오. 자술 파일은 패키지를 어떻게 실현하는지 설명합니다.

기능 플래그 서비스
서비스를 구축하는 것부터 시작하겠습니다. 이 서비스는 주어진 기능이 열려 있는지 알려주는 데 사용됩니다.이 서비스는 실행할 때 불러오는 프로그램을 설정하기 때문에 사실상 매우 간단합니다.우리는 특성 로고를 서비스에 넣고 서비스에 이 로고 값을 바탕으로true나false를 되돌려 주는 방법을 제공할 것입니다.서비스 내용은 다음과 같습니다.

// feature-flags.service.ts
export class FeatureFlagsService {
  private featureFlags: any;
  constructor(private _config: RuntimeConfigLoader) {
    this.featureFlags = 
      this._config.getConfigObjectKey("featureFlags");
  }
  isFeatureFlagEnabled(flag: string) {
    return this.featureFlags && this.featureFlags[flag];
  }
}

복잡하지 않죠?이것은 응용 프로그램 중 어느 곳에서든 이 서비스를 사용할 수 있도록 합니다.우리가 해야 할 일은 isFeatureFlagEnabled 방법을 호출해서 표지의 이름을 전달하는 것이다.설정에 기능 로고가 없으면 로고가 존재하지 않거나 로고가false로 설정되면 방법은false로 되돌아옵니다.이 로고가 활성화되어 있으면, 이 방법은true로 되돌아옵니다.어셈블리 클래스에서 사용할 수 있는 예를 살펴보겠습니다.

// app.component.ts
export class AppComponent implements OnInit {
  constructor(
    private _featureFlags: FeatureFlagsService,
    private _analytics: AnalyticsService
  ) {}
  ngOnInit() {
    if (this._featureFlags.isFeatureFlagEnabled("analytics")) {
      this._analytics.initialize();
    }
  }
}

이 예에서, 우리는 FeatureFlagsService analytics 로고가 열려 있는지 확인하는 것을 사용합니다.만약 그렇다면, 우리는 initialize에서 AnalyticsService 방법을 사용합니다.만약 그렇지 않다면, 우리는 ngOnInit 방법의 이 부분을 뛰어넘을 것이다.우리가 분석 기능을 열고 싶지 않은 이유는 많을 것이다.예를 들어, 아마도 우리는 생산 중에만 그것들을 열기를 원할 것이다.이 예에서, if 문장은 코드에 영원히 있을 것이다.이것 또한 이 기능이 여전히 미세하게 조정되고 있기 때문에, 우리는 로컬 개발과 테스트 환경에서 이 기능을 사용하기를 희망하며, 생산 환경에서 사용하기를 원하지 않는다.기능이 준비되었을 때 if 문장을 삭제할 수 있습니다.
이것이 바로 우리가 이 서비스를 창설하고 사용하는 데 필요한 모든 것이다!이제 명령을 계속 만듭니다.

피쳐 플래그 명령
Directives in Angular에는 세 가지 스타일이 있는데 그것이 바로 구성 요소, 구조와 속성 명령이다.예를 들어 *ngIf 구조 명령을 만들고 사용할 것입니다.이 명령을 사용할 때, 우리는 기능 표시를 전송할 것입니다. 이 표시는 프로그램의 특정한 부분이 템플릿에 표시되는지 확인해야 합니다.기능 플래그가 이미 열려 있으면 컨텐트는 템플릿에 남아 있습니다.플래그를 사용할 수 없거나 닫으면 해당 컨텐트가 템플릿에서 제거됩니다.
사실대로 말하면, 기술적으로 말하자면, 너는 이 지령을 필요로 하지 않는다.이전 섹션의 서비스에서 로고를 조회한 다음 Angular에 내장된 *ngIf 명령을 사용할 수 있습니다.그러나 feature flags 명령을 사용하면 서비스를 구성 요소로 가져올 필요가 없습니다.네가 해야 할 일은 명령을 사용하는 것이다.그럼에도 불구하고, 너는 너에게 가장 유리한 일을 할 수 있다.
지령을 세우기 시작합시다.다음은 코드의 최종 버전입니다.

@Directive({
  selector: "[featureFlag]",
})
export class FeatureFlagDirective implements OnInit {
  private requiredFlag: string = "";
  private isHidden = true;
  @Input() set featureFlag(val) {
    if (val) {
      this.requiredFlag = val;
      this.updateView();
    }
  }
  constructor(
    private _templateRef: TemplateRef<any>,
    private _viewContainer: ViewContainerRef,
    private _featureFlags: FeatureFlagsService
  ) {}
  ngOnInit() {
    this.updateView();
  }
  private updateView() {
    if (this.checkValidity()) {
      if (this.isHidden) {
        console.log("going to create the view");
        this._viewContainer.createEmbeddedView(this._templateRef);
        this.isHidden = false;
      }
    } else {
      this._viewContainer.clear();
      this.isHidden = true;
    }
  }
  private checkValidity() {
    return (
      this.requiredFlag &&
      this._featureFlags.isFeatureFlagEnabled(this.requiredFlag)
    );
  }
}

나는 본문에서 창설 구조 명령의 모든 세부 사항을 상세하게 소개할 생각은 없다.더 많은 것을 알고 싶으면 this article by Dmitry Nehaychik 또는 this one by Netanel Basal 를 읽을 수 있습니다.우리는 명령을 사용하는 방법만 소개할 것입니다. 이것은 decorator에서 확정된 것입니다. FeatureFlagsService 방법에서 checkValidity 로고가 열려 있는지 확인하기 위해 사용하십시오.먼저 장식사를 살펴보자.

@Directive({
  selector: "[featureFlag]",
})

여기selector는 이 명령을 사용하려면 다른 HTML 속성을 추가하는 것처럼 HTML 태그에 선택기를 추가해야 한다는 것을 의미합니다.이것은 하나의 예이다.

<div *featureFlag="'thisFlagExists">
  <p>Because the flag exists, this content will stay on the page.</p>
</div>
<div *featureFlag="'thisFlagDoesntExist">
  <p>
    Because the flag doesn't exist, this content will be removed from the page.
  </p>
</div>

이제 checkValidity 방법을 봅시다.이런 방법은 두 가지 작용이 있다.우선, @Input 전송된 표지가 존재하는지 검사합니다.그 다음에, 이 표지가 활성화되었는지 확인하기 위해서 FeatureFlagsService.두 조건이 모두 충족되면 반환값은 true입니다.그렇지 않으면 false입니다.반환 값이 true인 경우 컨텐트가 화면에 유지됩니다(이전에 컨텐트를 삭제한 경우 컨텐트 추가).반환 값이 false인 경우 화면에서 컨텐트가 삭제됩니다.

private checkValidity() {
  return this.requiredFlag && this._featureFlags.isFeatureFlagEnabled(this.requiredFlag);
}

구성 요소 파일에서 로고를 검사하고 로고를 기반으로 내용을 표시하고 숨기는 명령을 사용할 수 있는 서비스가 생겼습니다.

바리케이드
이 블로그에서 마지막으로 소개하고자 하는 것은feature flag 서비스를 사용하는route guard이다.이것은 사용자가 응용 프로그램에서 아직 준비되지 않은 부분에 접근하는 것을 막을 것이다.이 보호는 신분 검증 보호와 같은 다른 보호와 유사할 것이다.기본적으로 노선 데이터에 유효성을 검사하는 특징 표지를 제공할 것이다.이 로고가 활성화되어 있으면 사용자는 이 노선으로 안내될 것입니다.없으면 다른 경로로 리디렉션됩니다.라우팅 데이터에 필요한 리디렉션을 제공할 수도 있습니다.나는 this blog post에서 이것에 대해 더욱 깊이 있는 토론을 진행하였다.
우선, 여기는 수위 코드입니다.

export class FeatureFlagGuard implements CanActivate {
  constructor(
    private _featureFlags: FeatureFlagsService,
    private _router: Router
  ) {}
  canActivate(next: ActivatedRouteSnapshot): boolean | UrlTree {
    const requiredFeatureFlag: string = next.data[
      "requiredFeatureFlag"
    ] as string;
    const featureFlagRedirect: string =
      (next.data["featureFlagRedirect"] as string) || "/";
    return this._featureFlags.isFeatureFlagEnabled(requiredFeatureFlag)
      ? true
      : this._router.createUrlTree([featureFlagRedirect]);
  }
}

canActivate 방법에서 필요한 특징 표지와 루트에서 오는 데이터를 재정비한다.기능 로고 서비스는 로고가 켜져 있는지 확인하는 데 사용됩니다.만약 그렇다면, 그들이 이 노선으로 가거나 true 되돌아갈 수 있도록 허락한다.그렇지 않으면, 제공된 방향을 새 UrlTree 로 되돌려줍니다.다음은 플래그 및 리디렉션을 제공하는 라우팅 정의 예입니다.

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'experimental-route',
        loadChildren: () =>
        import('/path/to/module').then(
          (module) => module.ExperimentalModuleName,
        ),
        canActivate: [FeatureFlagGuard],
        data: {
          requiredFeatureFlag: 'myFeatureFlag',
          featureFlagRedirect: '/path/for/redirect'
        },
      }
    ])
  ]
})

이 루트 정의에서 우리는 FeatureFlagGuard 수조에 canActivate를 제공했다.또 하나data물체가 있다.이 데이터는 이후의 보호 장치(또는 구성 요소)에서 사용할 수 있다.이런 상황에서 requiredFeatureFlag와 featureFlagRedirect를 제공하여 보호 장치를 사용한다.
이 경호원이 있으면 깃발만 열리면 새로운 노선이 나타날 것이다.로고가 닫혔을 때 사용자는 프로그램의 이 부분을 탐색할 수 없습니다.이것은 기능을 개발할 때 계속 배치할 수 있도록 허용한다.일단 그들이 준비가 되면 로고가 열리고 다른 배치가 필요하지 않아도 이 경로를 방문할 수 있다.또한 최악의 경우 문제가 발생하면 로고를 닫을 수 있다.

결론
기능 표지는 업무 흐름을 지속적으로 개발하는 중요한 구성 부분으로 이 업무 흐름에서 심지어 기능이 완성되기 전에 이미 배치되었다.기능 표지와 운행 시 설정을 결합하여 새로운 배치를 하지 않은 상황에서 수시로 변경할 수 있다.위사, 서비스, 지령을 조합해서 사용하면 프로그램의 모든 부분에서 기능 표지에 접근할 수 있어야 한다.

뮤지컬이 곧 옵니다.
ng conf: 뮤지컬은 2021년 4월 22일과 23일 이틀간 회의를 연다.ng-conf.org로 문의하십시오.