모듈형 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>

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/v-bucks-button
├── button.tsx
├── index.ts
└── /v-bucks-popover
│ ├── popover.tsx

로그인 후 복사

로그인 후 복사