LaunchDarkly를 사용하여 React 애플리케이션에 기능 플래그 추가

안녕하세요!
그래서 만약 네가 나와 같다면 아마도 너는 이미 Netlify’s Split Testing 기능을 해 봤을 것이다.서로 다른 지점에 대해 A/B 테스트를 할 수 있고 사용자가 서로 다른 기능에 대한 반응을 볼 수 있으니 정말 대단하다!
그럼에도 불구하고, 때로는 전체 지점보다 더 세밀한 입도 제어를 추가하기를 원할 때가 있습니다.우리는 내부에서 LaunchDarkly를 사용하여 우리 자신의 일부 기능을 실현하는데, 나는 기본적인 React 응용 프로그램을 구축하여 시험해 보는 것도 매우 재미있다고 생각한다.

LaunchDarkly를 사용하여 React 애플리케이션 초기화

그래서 우선 리액션 앱을 시작해야 한다.필요한 경우 기존 애플리케이션을 사용할 수 있지만 사용자 옆에 없으면 create react app 또는 Vite를 사용하여 다음을 만들 수 있습니다.

# create-react-app
$ npx create-react-app new-app

# Vite
$ npm init @vitejs/app new-app

cd을 새 애플리케이션 디렉토리에 배치한 후 다음과 같이 LaunchDarkly React SDK를 설치합니다.

npm install --save launchdarkly-react-client-sdk

이제 다 설치했어!우리는 잠시 후 코드에 더 많은 내용을 추가할 것이다.만약 당신이 원한다면, 지금 그것을 Git에 제출하고 Netlify에 배치합니다.

요소 플래그 작성

우선, 당신은 LaunchDarkly을 등록해야 합니다.설정이 완료되면 기능 로고 탭으로 바로 들어가 새 로고를 만들 수 있습니다.나는 나를 testaroni이라고 부르지만, 너는 그것을 마음대로 불러도 된다.
React를 사용하기 때문에 클라이언트 ID를 사용하는 SDK가 선택되었는지 확인하십시오!이제 로고 변형의 경우 부울 값으로 유지할 수 있지만 문자열, 숫자 또는 JSON을 수행할 수도 있습니다.나는 다른 포켓몬스터 유형을 위해 문자열을 선택했다.
일반적으로 플래그를 생성하기 전에 다음과 같이 표시해야 합니다.

엉엉!너는 아직 그것을 열 필요가 없다.

React 애플리케이션에 기능 플래그 추가

클라이언트 ID를 찾으려면 Account Settings으로 이동하십시오. 이 ID를 복사한 다음 React 응용 프로그램의 루트 디렉토리에 .env.local 파일을 만듭니다. 다음과 같습니다.

# create-react-app
REACT_APP_LC_CLIENT_KEY=your_key

# Vite
VITE_LD_CLIENT_KEY=your_key

(Netlify에 재구매 계약을 추가한 경우 환경 변수를 추가하기 위해 현재 use the CLI 또는 go to the Netlify UI을 추가하거나 테스트를 준비할 때 나중에 추가할 수 있습니다.)
현재, 우리는 당신의 응용 프로그램에서 LaunchDarkly React SDK을 실현할 것입니다.SDK는 React Context API를 사용하여 응용 프로그램의 나머지 부분에서 데이터를 공유합니다(상하문이 응용 프로그램에서 어떻게 단독으로 공유되는지 알고 싶으면 here’s a post that explains how to use it in Next.js 참조).
SDK를 구성 요소 패키지나 상위 구성 요소로 사용할 수 있습니다.나는 나의 조립품을 상당히 깨끗하게 유지하기 위해 특별한 노선을 선택했지만, 너는 어떤 길을 가든지 갈 수 있다.
코드에서 새로운 프로젝트든 기존 프로젝트든 구성 요소를 찾아야 합니다. 이 구성 요소는 접근하고자 하는 기능 표시를 봉인합니다.이것은 아마도 당신의 맨 윗부분의 App.jsx일 수도 있고, 응용 프로그램의 일부분일 수도 있습니다. (예를 들어 용기 구성 요소)
SDK에서 withLDProvider을 가져오고 이전에 얻은 클라이언트 ID를 입력해야 합니다 (create react app를 사용하면 process.env.REACT_APP_LC_CLIENT_KEY,Vite를 사용하면 import.meta.env.VITE_LD_CLIENT_KEY).LaunchDarkly Provider에는 사용자와 키가 필요합니다.그 모양은 다음과 같습니다.

// App.jsx
import React from "react";
import { withLDProvider } from "launchdarkly-react-client-sdk";

function App() {
  return (
    <>
      {/* whatever components you're wrapping */}
    </>
  );
}

export default withLDProvider({
  clientSideID: import.meta.env.VITE_LD_CLIENT_KEY,
  user: {
    key: "user_key",
    name: "User Name",
    email: "[email protected]",
  },
})(App);

이 App.jsx 파일은 제 응용 프로그램의 나머지 부분을 봉인합니다. 제 응용 프로그램의 '트리' 에서 그 아래의 모든 내용은 제공 프로그램의 값에 접근할 수 있습니다.
이곳의 user은 하드코딩이다.사용자가 응용 프로그램에서 이 점을 탐색하면 LaunchDarkly 대시보드에 사용자 이름(및 모든 세부 정보)으로 저장됩니다.응용 프로그램에 인증이나 다른 변수를 설정했다면, 프로그래밍을 통해 이 변수를 데이터 보고서에 전달할 수 있습니다.
좋아, 지금 우리는 그것을 소모해야 해.LaunchDarkly Consumer에 구성 요소 가져오기

// Pokemon.jsx
import { withLDConsumer } from 'launchdarkly-react-client-sdk';

const Pokemon = ({ flags }) => {
    return <>{/* ... */}</>
};

export default withLDConsumer()(Pokemon);

내보낼 때 어셈블리 이름을 둘러싸고 HOC를 포장하기 때문에Provider와 매우 비슷합니다.내 조립품이 어떻게 Pokemon.jsx을 도구로 하는지 주의해라.flags HOC로 포장하면 자동으로 이것을 얻을 수 있습니다!이전에 만든 태그를 이제 어셈블리에서 사용할 수 있습니다.예를 들면 다음과 같습니다.

const Pokemon = ({ flags }) => {
    return <div>My favorite type is {flags.testeroni}</div>
};

이 문제에 대해 withLDConsumer 문장을 실행하거나 볼 유형의 로고를 사용하여 일을 전환할 수 있다고 상상해 보세요!가능성은 무궁하다.

컨디션

현재, 이 예에서 만든 로고는 생산 로고입니다. (LaunchDarkly 대시보드에서 환경을 전환할 수 있습니다.)이것은 응용 프로그램이 생산 모드에 있을 때만 작동 여부를 볼 수 있다는 것을 의미한다.나는 테스트를 하거나 라이브를 전송할 때 작업을 하기 위해 서로 다른 환경에 다른 로고를 설정해야 한다는 것을 깨달았다.너는 나와 같은 실수를 범하지 않을 것을 확신해라!

이렇게?

이렇게!LaunchDarkly를 사용하면 Netlify에 switch걸음으로 많은 일을 할 수 있습니다.내가 그것을 어떻게 만들었는지 보고 싶다면, here’s a more fleshed-out version of my Pokémon app!그 중에서 다른 포켓몬스터를 검색할 수 있지만, 어떤 기능 로고를 설정하면, 검색할 수 있는 유형 (예를 들어 일반 유형, 불 유형, 전동 유형) 을 제한할 수 있다.
Here’s the repo with the source code을 실행하려면

이 단추를 누르면 Repo를 선택한 Git 공급자에게 복제하고 Netlify에 자동으로 배치합니다.너의 환경 변수를 잊지 마라!
다음까지!