mcpField
C
coupling

coupling

github.com/toss开发2.0k55 次安装33 周前更新
代码仓库

关于 coupling

面向前端开发者的编码技能，提供降低代码耦合的重构建议。重点涵盖组合模式、单一职责 Hook，以及 Context 和重复代码的适用边界。

主要功能

  1. 01用 children 组合替代 Props Drilling
  2. 02将 Hook 拆分为单一职责
  3. 03识别耦合点并引入接口
  4. 04判断 Context 的适用范围
  5. 05明确适合保留重复代码的情况

适用场景

  1. 01减少组件层级间的 props 传递
  2. 02拆分管理过多状态的 Hook
  3. 03降低功能修改造成的连带影响

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/toss/frontend-fundamentals --skill coupling

安装后在 Claude Code 中输入/coupling确认已加载。

README 原文English

来自项目 README

README 暂无中文译文，以下为英文原文；中文介绍见上方。

결합도

코드 변경의 영향 범위를 최소화한다. 한 기능 변경이 다른 기능을 깨뜨리면 안 된다.

핵심 패턴

Props Drilling 제거 (조합 패턴)

❌ props가 계층을 통과:

function ItemEditModal({ items, onConfirm, onClose }) {
  return (
    <Modal onClose={onClose}>
      <ItemEditBody items={items} onConfirm={onConfirm} onClose={onClose} />
    </Modal>
  );
}
function ItemEditBody({ items, onConfirm, onClose }) {
  return (
    <>
      <Button onClick={onClose}>닫기</Button>
      <ItemEditList items={items} onConfirm={onConfirm} />
    </>
  );
}

✅ children으로 조합:

function ItemEditModal({ items, onConfirm, onClose }) {
  return (
    <Modal onClose={onClose}>
      <ItemEditBody onClose={onClose}>
        <ItemEditList items={items} onConfirm={onConfirm} />
      </ItemEditBody>
    </Modal>
  );
}
function ItemEditBody({ children, onClose }) {
  return <><Button onClick={onClose}>닫기</Button>{children}</>;
}
책임 분리

❌ 모든 것을 관리하는 Hook:

function usePageState() {
  const [query] = useQueryParams({
    cardId: NumberParam, dateFrom: DateParam, dateTo: DateParam, statusList: ArrayParam
  });
}

✅ 단일 책임 Hook:

function useCardIdQueryParam() {
  const [cardId, setCardId] = useQueryParam("cardId", NumberParam);
  return [cardId ?? undefined, setCardId] as const;
}

빠른 참조

코드 냄새개선 방법
3개 이상 계층 통과하는 props조합 패턴: children 사용
5개 이상 반환하는 Hook단일 책임 Hook으로 분리
A 수정 시 관련 없는 B 깨짐결합 지점 식별 후 인터페이스 도입
모든 곳에서 import하는 util사용처 가까이로 이동

Context가 적절한 경우

진정한 전역 관심사만: 테마, 로케일, 인증 상태, 10개 이상 컴포넌트가 필요한 데이터.

조합 패턴을 피하려고 Context 남용하지 말 것.

예외: 중복이 나은 경우

  • 페이지마다 동작이 달라질 여지가 있을 때
  • 공통 코드 수정 시 모든 의존 코드 테스트 부담이 클 때

참고: https://frontend-fundamentals.com/code-quality/loosely-coupled/

评论

支持 Markdown