모듈형 React 아키텍처

모듈식 아키텍처

모듈형 아키텍처란 무엇인가요? 그렇지 않은 예를 살펴보겠습니다.
우리는 그것을 변화시키기 위해 노력할 것입니다. 결국 당신은 그것을 확신하게 될 것입니다
또는 그것은 엄청난 시간 낭비입니다.

성장 마인드를 가지고 직장에서 겪은 실제 시나리오입니다. 이름 및 세부정보
익명이지만 공통 개념의 실제 예는 걷기에 재미있을 것입니다
다른 것이 없다면.

요구사항 및 찾는 방법

우리 사이트에는 사이트 헤더에 버튼이 있습니다.
사용자가 떠난 V-Bucks에는 다음과 같은 몇 가지 비즈니스 논리가 포함되어 있습니다.

• 사이트를 처음 방문하는 경우 팝오버를 열어 환영합니다. V-Bucks로 할 수 있는 일을 보여주세요
• < 5 V-Bucks 남음, 추가 판매 팝업 표시
• 기본 사용자인 경우 한 가지 스타일의 버튼을 표시합니다. SuperDuper 사용자인 경우 표시 또 다른, 더 멋진 버튼

등등. 우리 제품 관리자와 프로젝트 관리자에게는 그러한 사례가 많이 있습니다
디자인 매니저와 V-Bucks 그룹 이사들은 우리가 해야 할 일을 꿈꿔왔습니다
핸들.

인턴 Jimbo는 이 기능을 구현하는 임무를 맡았습니다.
버튼!

그는 Figma 디자인의 상충되는 15개 반복을 선별합니다. 그가 찾다
PM 수만큼 별도의 Word 문서에 요구 사항이 있습니다. 그는 정리하고
7개 팀과 7번의 지식 이전 세션을 거쳐
어떤 서비스가 필요한 데이터를 제공할 것인지에 대한 고대의 독점 지식
사용자 유형 및 V-Bucks 수에 대한 정보입니다. 콘텐츠 팀은
모든 문자열의 최종 버전은 최종적으로 법무팀과 마케팅팀의 승인을 받게 됩니다
이제 그는 이 버튼을 만들 준비가 되었습니다.

해커의 접근 방식

V-Bucks 버튼, 팝오버 및 관련 항목의 첫 번째 반복은 다음과 같습니다
비즈니스 로직.

Jimbo는 자신이 생각해낸 간단한 디렉토리 구조에 만족합니다.

/v-bucks-button
├── button.tsx
├── index.ts
└── /v-bucks-popover
│ ├── popover.tsx

그래서 그는 이 버튼을 만들기 시작했고, 그것은 충분히 순수하게 시작되었습니다.

export const VBucksButton: React.FC<VBBProps> = ({ ... }) => {
  // Set up state
  const authConfig    = { ... }
  const { user }      = useAuth({ ...authConfig })
  const { vBucks }    = useGetVBucks({ user })
  const { telemetry } = useTelemetry()
  const { t }         = useTranslation('vBucksButton.content')
  const styles        = useButtonStyles()

  // Derive some state via business logic
  const handleClick = () => { ... }
  const buttonText  = vBucks === ERROR ? '--' : vBucks.toString();
  // About 25 more lines of various button state, error handling,
  // conditional rendering, with comments throughout explaining
  // why we're showing or hiding something or other

  const popoverProps = {
    // About 200 lines of typical popover handling,
    // telemetry, business logic, content to display, etc
  }

  const tooltipProps = {
    // Another 100 lines of the same for tooltip
  }

  return (
    <VBucksPopover
      {...popoverProps}
      trigger={
        <Tooltip {...tooltipProps}>
          <button
            ariaLabel={t('ariaLabel')}
            className={`
              about seven-hundred classnames for responsive design,
              accessibility, conditional premium styles, et cetera`}
            onClick={handleClick}>
            {buttonText}
          </button>
        </Tooltip>
      }
    />
  )
}




<p>그는 첫 시도를 했습니다. VBucksPopover도 비슷하게 복잡합니다<br>
비즈니스 로직, 오류 처리, 상태 관리, 스타일링, 변명 코멘트<br>
배송이라는 이름으로 기술 빚을 지게 되었습니다.</p>

<p>400줄도 안 되는 이 버튼은 매우 간단합니다. 팝오버가 되어도 <br>
또 다른 500줄의 스파게티. 정말 "청소"하나요, 아니면 분리하나요<br>
어떤 식으로든 우리 또는 사용자에게 이익이 됩니까? 상황에 따라 다릅니다. 이것이 우리에게 필요한 전부라면 <br>
이 버튼, 누가 신경쓰겠어요? 계속 나아가자!</p>
<p>그런데 두 달이 지났는데 다른 제품팀 PM과 디자이너가 너무 좋아<br>
버튼을 앱 헤더에 넣으려고 합니다. <em>간단한</em> 목록이 있습니다. 아니요<br>
회사측의 압력, 수용할 수 있는 변경 사항이 있는 경우<br>
LT의 경우 하루가 끝날 때까지 도착 예정 시간을 알려주시면 좋을 것 같습니다. 감사합니다.</p>

<ul>
<li>버튼이 표시된 앱에 따라 버튼의 스타일과 표시 텍스트를 업데이트하세요</li>
<li>앱별로 완전히 다른 팝오버 세트 표시</li>
<li>사용자의 V-Bucks가 부족할 때 새로운 전사적 표준 상향 판매 모달을 개설하세요.
하지만 일부 지역에서만 16세 사용자에게만 해당됩니다.
실험그룹A</li>
</ul>

<p>Jimbo가 이 새로운 기능을 모두 동일한 구성요소에 담을 수 있나요?<br><br>
예. 분할 또는 리팩토링이 사용자에게 도움이 될까요, 아니면 관리자에게 좋은 인상을 줄까요?<br><br>
아니요. 하지만 리팩토링에는 이러한 복잡성 수준에 대해 몇 가지 강력한 주장이 있습니다.</p>

<ul>
<li>개발자 정신</li>
<li>리팩토링을 하지 않아 PIP가 발생했을 때 Jimbo를 대신하는 개발자의 건전한 정신</li>
<li>반복 횟수가 많아지면 다음번에는 처음부터 더 잘할 수 있습니다</li>
<li>나중에 블로그에 올릴 내용</li>
</ul>


<h3>
  
  
  모듈식 아키텍처 접근 방식
</h3>

<p>클린 코드 동수들의 도덕과 이를 충분히 알고 있는 다른 애널 유형<br>
정기적으로 Stack Overflow에 답변하세요. 심지어 조부모님도 뭔가를 보세요<br>
이렇게:</p>

<ul>
<li>KISS, DRY 등의 약어 담요</li>
<li>관심을 분리</li>
<li>원자성! 디커플링! 의성어!</li>
</ul>

<p>이것은 훌륭하며 Jimbo의 다음 시도를 알리는 데 도움이 됩니다. 그는 이후에 PIP를 받지 않았습니다<br>
모두, 실제로 예정보다 빨리 배송하고 공유하기 위해 프로모션을 받았습니다<br>
회의도 많고 문서도 많아요.<br><br>
하지만 이제 그는 더 현명해졌으며 이러한 격언을 구현하는 멋진 방법을 배웠습니다. 보이는데요<br>
이런 것:<br>
</p>

<pre class="brush:php;toolbar:false">/v-bucks-button
├── button.tsx
├── index.ts
└── /v-bucks-popover
│ ├── popover.tsx

버튼과 팝오버에 대한 상용구가 엄청나게 많은 것 같습니다. 왜 그럴까요
더 낫나요?

상황에 따라 다릅니다. Jimbo의 간략한 개요와 근거는 다음과 같습니다.

• 각 구성요소를 컨테이너와 렌더러로 분할
• 상태 및 비즈니스 로직을 후크로 이동
• 컨테이너는 후크를 사용하고 모든 소품을 렌더러에 전달합니다
• 렌더러는 제공된 내용을 렌더링하는 데에만 관심이 있습니다
• 공통 기능, 비즈니스 로직 또는 상수는 utils에 존재할 수 있습니다
• 유형에 따라 별도의 파일; 여러 파일로 가져오는 경향이 있으며 어쨌든 추출해야 하는 원형 뎁스가 됩니다
• 추출된 TailwindCSS - 자세한 내용은 아래에서

무한하게 확장 가능합니다! 이러한 빌딩 블록은
에 의해 분해되지 않습니다. 코드 줄이나 "복잡성"과 같은 임의의 규칙.
로 분류됩니다. 목적: 각 개념적 경계는 단일 목적으로 사용됩니다.

PM이 새로운 팝오버 10개를 만들어 달라는 건가요? 문제 없습니다. Jimbo의 아키텍처는
처리하세요.

경영진은 일부 앱의 판매에 대한 더 나은 지표를 원하지만 다른 팀은 그렇지 않습니다.
이를 지원하기 위해 원격 측정을 구축할 자금이 있습니다. 엄청난! 우리는
다양한 변화에 맞춰 수평으로 확장할 수 있는 원격 측정 유틸리티
요구 사항.

대대적인 재설계는 모든 팝오버가 서로 다른 내용을 표시해야 함을 의미합니다.
다른 조건에 따라. 일반적으로 훨씬 이제 모든
우리가 렌더링하는 항목과 이를 렌더링하는 데 사용하는 모든 논리는 잘 정의된 상태로 존재합니다
블록. 그들은 더 이상 갈등과 논리의 거대한 더미 속에 섞이지 않습니다
20줄 길이의 체인입니다.

다음은 이 컨테이너/렌더러 패턴의 샘플입니다.

/v-bucks-button
├── button.tsx
├── index.ts
└── /v-bucks-popover
│ ├── popover.tsx

export const VBucksButton: React.FC<VBBProps> = ({ ... }) => {
  // Set up state
  const authConfig    = { ... }
  const { user }      = useAuth({ ...authConfig })
  const { vBucks }    = useGetVBucks({ user })
  const { telemetry } = useTelemetry()
  const { t }         = useTranslation('vBucksButton.content')
  const styles        = useButtonStyles()

  // Derive some state via business logic
  const handleClick = () => { ... }
  const buttonText  = vBucks === ERROR ? '--' : vBucks.toString();
  // About 25 more lines of various button state, error handling,
  // conditional rendering, with comments throughout explaining
  // why we're showing or hiding something or other

  const popoverProps = {
    // About 200 lines of typical popover handling,
    // telemetry, business logic, content to display, etc
  }

  const tooltipProps = {
    // Another 100 lines of the same for tooltip
  }

  return (
    <VBucksPopover
      {...popoverProps}
      trigger={
        <Tooltip {...tooltipProps}>
          <button
            ariaLabel={t('ariaLabel')}
            className={`
              about seven-hundred classnames for responsive design,
              accessibility, conditional premium styles, et cetera`}
            onClick={handleClick}>
            {buttonText}
          </button>
        </Tooltip>
      }
    />
  )
}

/vBucksButton
├── /hooks
│ ├── index.ts
│ └── useButtonState.hook.ts
├── /vBucksPopover
│ ├── /app1Popover
│ │ ├── /hooks
│ │ │ ├── index.ts
│ │ │ └── usePopoverState.hook.ts
│ │ ├── ...
│ ├── /app2Popover
│ ├── index.ts
│ ├── popover.renderer.tsx
│ ├── popover.styles.ts
│ ├── popover.tsx
│ └── popover.types.ts
├── /utils
│ ├── experimentation.util.ts
│ ├── store.util.ts
│ ├── telemetry.util.ts
│ └── vBucks.businessLogic.util.ts
├── button.renderer.tsx
├── button.styles.ts
├── button.tsx
├── button.types.ts
└── index.ts

제쳐두고: TailwindCSS 문서에서는 이와 같은 공통 클래스를 추출하기 위해 @apply를 사용하지 말 것을 명시적으로 권장합니다. 이로 인해 번들 크기에는 거의 차이가 없으며 "클래스 이름을 생각해내야 합니다."라는 점 외에는 다른 차이가 없습니다. 프로덕션 수준의 CSS는 거의 항상 수십 줄에 해당 구성 요소에 스타일링이 필요한 요소 수를 곱한 결과가 됩니다. 이러한 절충안은 90%의 경우 가치가 있는 것 같습니다.

그리고 나머지 기존 비즈니스 로직과 새로운 비즈니스 로직은 후크와 유틸리티에 있습니다!

이 새로운 아키텍처는 열광적인 사람들을 만족시키고 더 쉽게 확장하거나 확장할 수 있게 해줍니다.
삭제하거나 이동하세요.

잘 정의되어 있으므로 단위 테스트 작성이 덜 고통스러워집니다
경계. 렌더러는 더 이상 10가지 다른 서비스를 모의하여
일부 입력이 주어지면 일부 반짝임 세트가 표시되는지 확인합니다. 당신의 후크는
의도한 비즈니스 로직과 일치하는지 별도로 테스트하세요.

전체 상태 레이어가 방금 변경되었나요?
Hook은 이를 사용하는 코드와 긴밀하게 결합되어 있었지만 이제는 더 간단해졌습니다
변경해도 렌더러는 여전히 일부 입력을 기다리고 있습니다.

최종 생각

이 모듈식 아키텍처는 많은 상용구를 추가하고 궁극적으로 다음을 제공할 수 있습니다
혜택이 없습니다.

열정있는 프로젝트를 진행하고 계시거나,
무엇보다도 배송 및 가치 제공을 우선시합니다. 혹시 갖고 계시다면
시간이 지남에 따라 범위가 확장될 수도 있고 원하는 경우도 있을 것 같습니다
POC 후에 완전히 점검하면 기술 부채를 줄일 수 있습니다... 때로는.

Plop과 같은 도구를 사용하여 이 상용구를 생성할 수 있습니다.

그럼 제가 Jimbo의 작업과 모듈식 아키텍처를 통해 실제로 배운 것은 무엇인가요?

학교와 세계의 Well Ackshuallys에서 배우는 클린 코드와 약어
스펙트럼의 한쪽 끝입니다. 기능성 스파게티 코드를 함께 해킹하는 것도 또 다른 방법입니다
궁극적으로 모든 코드는 기술 부채이기 때문에 꽤 잘 작동하는 경우가 많습니다.

최상의 솔루션은 일부 양자 상태 또는 이러한 목적의 조합에 존재하며
우리가 선택하는 길은 다음을 기준으로 결정될 것입니다.

• 우리가 만들고 있는 것에 얼마나 관심을 갖고 있는지
• 경영진이 업데이트 및 도착 예정 시간을 요청하는 빈도
• 이런 내용을 읽으면 한 가지 접근 방식이 떠오릅니다. 다음 제품을 만들 때 의식
• 좌절, 고통
• 스파게티는 다시 작성해야 할 정도로 성능 병목 현상이 발생합니다
• 상용구의 내용이 너무 소모되어 내용이 부족해졌습니다

위 내용은 모듈형 React 아키텍처의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!