Refactors for better code cohesion: group related files into domain folders, extract magic numbers to constants, colocate to shorten long imports.
npx claudepluginhub toss/frontend-fundamentals --plugin frontend-fundamentalsThis skill uses the workspace's default tool permissions.
함께 수정되는 코드는 함께 있어야 한다.
Extracts duplicated code into shared utilities, components, hooks, and modules from repeated patterns across files like identical functions, UI blocks, state management, or boilerplate.
Performs safe refactoring: extract functions/components/hooks/modules/classes, rename/move/restructure symbols/files, inline code, detect dead code/smells using test-driven methods.
Surgical refactoring improves maintainability without changing behavior: extracts functions, renames variables, breaks god functions, boosts type safety, fixes code smells, applies patterns. For gradual cleanups of hard-to-maintain code.
Share bugs, ideas, or general feedback.
함께 수정되는 코드는 함께 있어야 한다.
❌ 종류별 분리 (의존 관계 파악 어려움):
src/
├── components/UserForm.tsx
├── hooks/useUserValidation.ts
├── types/userTypes.ts
└── api/userApi.ts
✅ 도메인별 배치:
src/
├── components/ # 전역 공유
└── domains/User/ # User 관련 코드 모음
├── UserForm.tsx
├── useUserValidation.ts
├── types.ts
└── api.ts
같은 숫자가 여러 곳에 있으면 한쪽만 수정되어 버그 발생.
❌ 분산:
// Pagination.tsx
const pages = Math.ceil(total / 20);
// useItems.ts
const offset = (page - 1) * 20;
✅ 상수로 통합:
export const PAGE_SIZE = 20;
import { PAGE_SIZE } from './constants';
| 코드 냄새 | 개선 방법 |
|---|---|
| 같은 매직 넘버 3곳 이상 | 공유 상수로 추출 |
기능이 components/, hooks/, types/ 모두 수정 | domains/featureName/으로 배치 |
긴 상대 경로 ../../.. | 파일들을 가까이 배치 |
| 타입 정의가 사용처와 멀리 떨어짐 | 사용하는 코드와 함께 배치 |
참고: https://frontend-fundamentals.com/code-quality/cohesive/