React에서 서로 다른 사용자에 대한 기능 A와 표시 기능 B를 숨기는 방법

개술

슬랙, 넷리프, 줌, 페이스북 등 회사들이 어떻게 점차 일부 사용자들을 위해 새로운 기능을 내놓을 수 있을지 생각해 본 적이 있습니까?🤔
더 이상 궁금해하지 마라!이것은 기능 표지(약칭 FF)를 통해 실현된 것으로 우리는 이 개념을 깊이 있게 연구할 것이다.
기능 표지 서비스의 작업 방식은 다음과 같다.어두운 모드, 수평 로그인 레이아웃, 디자인 2.0 등 기능 목록을 정의하고 사용자 그룹에 지정하여 사용하거나 사용하지 않을 조건을 지정합니다.
너는 이미 프로젝트에서 FF를 사용한 적이 있을 수 있지만, 이 점을 모른다.데이터베이스에 일부 부울 값을 저장하셨습니까? 이 부울 값은 특정 사용자가 특정 기능에 접근해야 하는지를 표시합니다.그렇다면 축하합니다. 기능 로고를 사용한 경험이 있군요.
DB의 부어 함수는 어느 정도 좋지만 진전이 멈추지 않았기 때문에 이제는 특성의 존재를 통제하기 위해 더욱 유연하고 우호적인 방법이 생겼다.기능 로고 서비스를 살펴봅시다.FF 서비스에는 다음과 같은 보너스가 있습니다.

기능을 정의하고 관리할 수 있는 UI

사용자 세분화

A/B 테스트

표지 분석

단계적 기능 전개

서로 다른 언어/프레임워크의 SDK

본고에서 우리는 Flagsmith-개원 특성 표지와 원격 설정 서비스를 사용하지만 LaunchDarkly 등 상업 대체 방안을 보실 수 있습니다.우리의 목표는 React에서 특성 표지를 어떻게 사용하는지 배우고 사용자가 새로운 기능을 시작하는 과정을 더욱 원활하게 하는 것이다.
Flagsmith의 FF 작업은 거의 어디에서나 가능합니다(전면/후면/모바일 플랫폼).다음 모드를 살펴보겠습니다.

여기서 일어나는 일들을 분석해 봅시다.
1) 사용자가 페이지 요청
2) 애플리케이션(FE/BE)의 한 측이 사용자 uid를 사용하여 Flagsmith 서비스를 호출
3) Flagsmith에서 받은 uid가 이 특정 사용자의 사용 가능한 기능 설정과 일치하며 해당 사용자의 정보를 되돌려줍니다
4) 애플리케이션에서 받은 기능 정보에 따라 페이지 생성
절대 로켓 과학이 아니야.지금부터 연습!

기장 / 기장

소스 오픈 기능 표시와 원격 설정 서비스입니다.prem에서 위탁 관리하거나 우리의 위탁 관리 버전을 사용합니다https://flagsmith.com/

우리의 목표

우리는 거의 표준적인 대시보드 프로그램을 만들고 싶습니다. (죄송합니다. 오늘은 TODO가 없습니다.) 권한을 설정하고 싶습니다.우리는 테스트 버전을 선택한 사용자들에게만 일부 기능 구성 요소를 보여 주고 싶습니다.
반응, 다음.Tailwind UI의 js, Next Auth, 그리고 멋진 대시보드 구성 요소가 그것을 구축하는 데 도움을 줄 것입니다.

선결 조건

Next를 사용하여 새 응용 프로그램을 작성합니다.js,React, 그리고 다음에 인증하거나 복제sample repository
링크 첨부
Getting started with Next.js
Getting started with nextauth
Then create an account Flagsmith의 클라우드 버전에서.

Flagsmith 환경 구성

구성 프로세스가 간단합니다.등록한 후 새 프로젝트를 만듭니다.Flagsmith에서는 프로젝트마다 여러 개의 환경을 정의할 수 있으며, 환경마다 자신의 기능/사용자/세그먼트, API 키를 보존할 수 있습니다.

첫 번째 기능을 "pinned projects"라는 이름으로 만듭니다.테스트 버전 사용자는 항목을 잠그고 그것들을 볼 수 있습니다.

다음 단계에서는 flagsmith-react 패키지를 설치해야 합니다.

npm i flagsmith-react

첫 번째 단계로, 우리는 우리의 응용 프로그램을 포장할 것이다.js와 FlagsmithProvider 그리고 Flagsmith API 키를 전달합니다. Flagsmith UI의 설정 페이지에서 이 키를 얻을 수 있습니다.FlagsSmithProvider는 useFlagsmith 갈고리를 사용할 수 있고 상태를 하부 구성 요소에 전달할 수 있습니다.

import Auth from 'components/auth';
import { Provider as SessionProvider } from 'next-auth/client';
import { FlagsmithProvider } from 'flagsmith-react';

import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return (
    <FlagsmithProvider environmentId={process.env.NEXT_PUBLIC_FLAGSMITH_API_KEY}>
      <SessionProvider session={pageProps.session}>
        {Component.auth ? (
          <Auth>
            <Component {...pageProps} />
          </Auth>
        ) : (
          <Component {...pageProps} />
        )}
      </SessionProvider>
    </FlagsmithProvider>
  );
}

FlagsmithProvider Flagsmithjavascript 클라이언트를 초기화하고 UI에서 로고를 표시할 수 있습니다.그러나 사용자가 지정한 로고를 얻지 않으면 의미가 별로 없다.Flags Smith가 어떤 사용자가 로고를 요청하는지 알기 위해서, 우리는 identify 그에게 통지해야 한다.이 인증 구성 요소의 완벽한 위치는 사용자 세션을 검사하고 로그인 페이지가 만료되었을 때 사용자를 로그인 페이지로 다시 지정합니다.

import { useSession, signIn } from 'next-auth/client';
import { useEffect } from 'react';
import { useFlagsmith } from 'flagsmith-react';

export default function Auth({ children }) {
  const { identify, isIdentified, getTrait, setTrait } = useFlagsmith();
  const [session, loading] = useSession();
  const isUser = !!session?.user;

  // Identify user and set email trait if does not exist
  const identifyUser = async (id, email) => {
    await identify(id);
    const hasEmail = !!getTrait('email');
    if (!hasEmail) {
      setTrait('email', email);
    }
  };

  useEffect(() => {
    if (loading) return; // Do nothing while loading
    if (!isUser) signIn(); // If not authenticated, force log in
  }, [isUser, loading]);

  useEffect(() => {
    if (isUser && !isIdentified) {
      // In the example we don't save users in the database so we don't have id that should be used for identification
      // Instead we're going to use email as a trait and id
      identifyUser(session.user.email, session.user.email);
    }
  }, [isIdentified, identify, session, isUser]);

  if (isUser) {
    return children;
  }

  // Session is being fetched, or no user.
  // If no user, useEffect() will redirect.
  return <div />;
}

여기서 우리가 사용하는 것getTrait과 setTrait을 볼 수 있다.특질은 개체 신분과 관련된 키/값 쌍일 뿐이다.사용자에게 추가 정보를 전달할 수 있습니다. 이 정보는 잠시 후에 세분화할 수 있습니다. 예를 들어 현재 계획, 테스트 버전 기능 추가 선택, 시사 통신 등입니다.
첫 번째 세션을 만들고 이름을 beta_opt_in 로 지정합니다.세션으로 이동→ 세그먼트를 생성합니다.여기에 특징에 따라 표현식을 정의하여 이 조건에 맞는 사용자를 세션에 추가할 수 있습니다.전자메일 [pixelpoint.io](http://pixelpoint.io) 이 베타 기능을 선택한 것으로 간주되는지 여부와 같은 간단한 예로부터 시작할 수 있다.

마지막 단계는 hasFeature("pinned_projects")를 사용하여 React 구성 요소에 검사를 추가하는 것입니다.

const Home = () => {
  const { hasFeature } = useFlagsmith();

  return (
    <>
      <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
        <div className="border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
          <HomeHeader />
        </div>
        {hasFeature('pinned_projects') && (
          <div className="px-4 mt-6 sm:px-6 lg:px-8">
            <PinnedProjects items={pinnedProjects} />
          </div>
        )}
        <ProjectsTable items={projects} />
      </main>
    </>
  );
};

잘했어!

만약 당신이 계속 관심을 가지고 있다면, 이때 당신은 이미 괜찮은 애완동물 프로젝트를 가지고 현대적인 기능 표지 방법을 보여 주었을 것이다.축하합니다.🎉
주저하지 말고 기존의 프로젝트에서 그것을 확장하거나 이용하세요.
추가
본고에서 우리는 단지 기능 표지를 신속하게 훑어보고 간단한 예시 응용 프로그램을 구축했을 뿐이지만 FF시스템은 더 많은 기능을 실현할 수 있다.보기:

A/B testing

Feature flags analytics

Staged rollouts