Vue에서 기능 플래그를 사용하는 방법JS

기능 플래그는 운영 환경에서도 가동 중지 시간 또는 전체 사용자 환경에 심각한 영향을 줄 수 있는 오류와 같은 배포 위험을 걱정하지 않고 애플리케이션에서 새로운 기능을 지속적으로 테스트하고 통합할 수 있도록 해 줍니다.

무엇이 기능 표지입니까?
기능 로고는 조건문입니다. 예를 들어if/else 코드 블록은 응용 프로그램에서 특정한 기능이나 기능을 열거나 닫는 능력을 제공합니다.코드를 배치하지 않고도 팀 내 다른 모든 사람이 ConfigCat 대시보드에서 원격으로 설정할 수 있는 부울 값을 반환합니다.이러한 특성 표기 기술은 조건 특성 지점을 배치된 코드에 구축함으로써 한 번에 특정한 사용자 그룹이나 서브집합에만 논리를 제공할 수 있다.런타임 시 플래그가 열려 있으면 코드가 실행되지만 플래그가 닫혀 있으면 건너뜁니다.

왜 기능 표지를 사용합니까?
기능 표지는 다양한 용례에 응용할 수 있는데 현대 소프트웨어 개발 작업 흐름에서 가장 간단한 장면부터 최고급 장면까지 다양하다.그러나 유용성을 반영하는 몇 가지 방법을 나열합니다.

베타 테스트와 A/B 테스트가 향상되었습니다.

kill 스위치를 사용하여 쉽게 스크롤할 수 있습니다.

새 코드를 배치하지 않은 상황에서 새로운 기능을 배치와 분리한다.

비엔지니어 관리 기능 출시 허용.

구독/회원 자격을 바탕으로 하는 기능 접근을 추진한다.

더욱 짧은 발표 주기로 더욱 빈번하게 생산에 투입된다.

버그와 정지 시간 등 흔히 볼 수 있는 배치 위험을 줄였다.

유지보수 모드를 사용하거나 사용하지 않는 등 특수한 용례 장면에 적용됩니다.

보시다시피 기능 로고는 많은 장점과 응용 프로그램에서 사용하고자 하는 이유가 있습니다.

VueJS에서 기능 플래그를 사용하는 방법
이제 우리는 특성 표지가 무엇인지, 그리고 왜 그것을 사용해야 하는지 알게 되었다.VueJS 애플리케이션에서 이러한 기능 플래그를 사용하는 방법에 대해 직접 살펴보겠습니다.이를 위해 ConfigCat 기능 태그 서비스를 사용합니다.
ConfigCat 코드를 재배치하지 않고 응용 프로그램의 기능을 관리할 수 있습니다.이러한 기능은 특정 비율의 사용자에게 대량으로 출시되고 지리적 위치나 다른 사용자 정의 속성과 같은 사용자 프로필 속성을 기반으로 특정 사용자 그룹에 대한 기능을 제공합니다.이 모든 것은 웹 기반의 인터페이스에서 제공되는 것이다. 이 인터페이스에서 기능 로고를 열거나 닫을 수 있는데 이것은 비기술자에게 매우 편리하다. 왜냐하면 설정 파일을 편집할 필요가 없기 때문이다.ConfigCat 대시보드의 모든 컨텐츠는 public management API 를 통해 프로그래밍 방식으로 액세스할 수 있습니다.

예제 응용 프로그램
간단명료하게 하기 위해서, 우리는 간단한 VueJS 응용 프로그램에서 calculate Age 기능을 만들어서 사용자가 나이를 계산할 수 있도록 할 것이다.이것sample app은 사용자의 출생 연도를 받아서 계산한 나이로 되돌아오는 표를 만들 것이다.그러나 ConfigCat 대시보드에서 이 기능을 여는 경우에만 사용할 수 있습니다.그럼 우리 일을 시작합시다.

선결 조건

에 대한 VueJS의 기본적인 이해.

NodeJS and NPM가 설치되어 있습니다.

코드 편집기

VueJS 응용 프로그램 만들기
코드 편집기에 직접 들어가서 먼저 VueJS CLI를 설치하고 Vue 명령을 제공하여 VueJS에서 프레젠테이션 응용 프로그램을 쉽게 구축할 수 있습니다.

npm install -g vue@cli

그런 다음 Vue create 명령을 사용하여 명령줄에서 새 VueJS 응용 프로그램을 만듭니다.

vue create my-project

이렇게 하면 VueJs 프레젠테이션 응용 프로그램 환경 설정이 있는 내 프로젝트 디렉토리가 빠르게 생성됩니다.기본 설정을 선택하면 프로그램에 필요한 의존 항목을 설치합니다.이렇게 되면 VueJS 응용 프로그램에서 ConfigCat을 사용할 수 있도록 configcat-js 패키지를 설치할 것입니다. 이 패키지를 사용하는 동시에 "dotenv"패키지도 설치할 것입니다. 왜냐하면 ConfigCat SDK 키를 응용 프로그램에 저장해야 하기 때문입니다.환경 파일(환경 변수 파일).

npm install configcat-js dotenv

마지막으로 다음 명령을 실행하여 브라우저에서 응용 프로그램을 시작합니다.

npm run serve

요소 플래그 작성
이렇게 하면 브라우저의 모든 내용이 시작되고 실행됩니다.기능 표시줄을 만들려면 ConfigCat 로 이동하십시오. 계정이 없으면 빨리 등록하십시오.이 프레젠테이션의 무료 계정을 사용할 것입니다.다음은 다음과 같이 계정에 로그인하여 대시보드에 액세스합니다.

대시보드에서 기능 플래그 추가를 클릭하고 만들 기능 플래그의 이름을 지정하고 해당 기능 플래그를 사용할 환경의 값을 전환합니다(이 프레젠테이션에서는 테스트 모드로 전환합니다).

저장한 후에는 대시보드로 돌아가 이 기능 플래그를 전환할 수 있으며, 특정 사용자를 위해 미리 정의되거나 사용자 정의된 속성에 따라 사용자 정의할 수도 있습니다.

SDK 키를 가져오려면, 대시보드 오른쪽 상단의view SDK 키를 누르거나, 대시보드 밑으로 스크롤해서 프로그램을ConfigCat에 연결하는 방법을 보여 줍니다.

이 계정에 액세스하는 데 필요한 코드 복사 - 계속하여 VueJS 응용 프로그램의 ".env"파일에 저장합니다.

기능을 만들고 ConfigCat에 연결
이제 VueJS 응용 프로그램으로 돌아가서 간단한 VueJS 템플릿을 만듭니다. 이 템플릿은 하나의 폼으로 구성되어 있으며 사용자는 루트 응용 프로그램에서 자신의 나이를 계산할 수 있습니다.디렉토리

<template>
    <div id="app">
        <button class='btn' @click='getUserAgeFeatureStatus'>
            Calculate Age
        </button>

        <p v-if='!userAgeFeature && !loading' class='text'>Sorry, This feature has been disabled by the Admin</p>
        <p v-else-if="error">{error}</p>

        <div v-else-if='userAgeFeature'>
            <p class='text'>Calculate your age below by providing your year of birth</p>
            <input
                type='number'
                v-model='birthYear'
            />
            <button class='btn btn-calculate' @click='calcAge'>
                Calculate
            </button>

            <p v-if='age'>You are {{ age }} years old</p>
        </div>
    </div>
</template>

이 예시에서, 우리는 템플릿을 설계했는데, 그 중 단추 하나만 이 기능을 표시한다.이 기능이 꺼져 있으면 사용자에게 접근할 수 없다는 메시지를 표시해야 하지만, 사용자가 사용할 수 있는 경우 입력 필드와 단추를 제공해야 한다.
그런 다음 ConfigCat을 가져와야 하고 다음 코드 세그먼트에서 사용해야 합니다.

그리고 configcat.client() 대상을 만들고 계기판에서 얻은 SDK 키를 전달합니다.
또한 값을 추적할 수 있도록 데이터 속성에 상태를 추가할 것입니다.사용자AgeFeature를 가지고 있습니다. 이 기능의 상태를 파악하고, 발생하는 모든 오류를 추적하며, 사용자의 출생연도와 연령의 출생연도와 연령을 각각 추적할 수 있습니다.
마지막으로 GetUserageFeatureStatus 방법을 만들어서 ConfigCat의 기능 상태를 검사할 것입니다.

Source file
우리가 방금 한 일을 재확인하기 위해서, 우선 변수에 저장된 클라이언트 SDK 디테일을 사용하여 클라이언트 실례를 만들었습니다.

try {
                let configCatClient = configCat.createClient(
                    process.env.VUE_APP_CONFIGCAT_SDK
                );

SDK 키는 에 저장되어 있습니다.보안 목적으로 env 파일은 기본 디렉터리에 있습니다.오류를 피하기 위해서, 사용한 이름이 당신의 이름과 같은지 확인하십시오.env 파일 후 처리.환경
그리고 우리는 특정 기능 상태의 응답을 기다리겠습니다.

const res = await configCatClient.getValueAsync(
                    "isMyFirstFeatureEnabled",
                    false
                );
                this.userAgeFeature = res

첫 번째 매개변수는 ConfigCat 대시보드의 기능 플래그 이름이고 두 번째 매개변수는 기본값입니다.반환된 응답은 true 또는 false인 부울 값입니다.그러면 응답이 userAgeFeature 상태로 저장됩니다.
마지막으로, 오류가 있는지 확인합니다. 오류 메시지를 받은 오류 상태에서 처리됩니다.

} catch (err) {
                this.error = err.message
            }
  }

그런 다음 이벤트를 클릭하여 getUserageFeatureStatus를 HTML에 바인딩합니다.

<button class='btn' @click='getUserAgeFeatureStatus'>
            Calculate Age
 </button>

대시보드의 기능 상태에 따라 나이 계산 버튼을 클릭하면 클라이언트 ConfigCat 대시보드의 기능 상태가 확인됩니다.false인 경우 이 기능이 현재 비활성화되어 있음을 알리는 메시지가 표시됩니다.

그러나 이것이 사실이라면, 즉, 켜면, 사용자는calculate Age 기능을 사용하여 그들의 나이를 계산할 수 있다.

Source Code

결론
만약 기능 로고를 사용하지 않는다면, 개발 주기와 기능 발표를 파악하는 완벽한 도구를 놓칠 수도 있다.보시다시피 ConfigCat의 기능 태그 서비스를 사용하여 VueJS 응용 프로그램에서 기능 태그를 실현하는 것은 매우 쉽습니다.
단 10분의 교육에서 기술적 성향이 없는 팀원이라도 ConfigCat의 feature flag 솔루션을 배워서 기능 발표를 제어할 수 있다.너는 그들의 How it Works 페이지에서 더 많은 정보를 얻을 수 있다.
본 논문이 재미있다면 React에서 ConfigCats의 기능 표지를 어떻게 실현하는지 볼 수 있습니다.