Menu
Use when 한 기능 수정 시 여러 디렉토리를 건드리거나, 같은 숫자/상수가 여러 파일에 흩어져 있거나, import 경로가 `../../..`처럼 길어질 때
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Use when props가 3개 이상 컴포넌트 계층을 통과하거나, 하나의 Hook이 5개 이상 값을 반환하거나, A 수정 시 관련 없는 B가 깨질 때
Use when `getX()`나 `fetchX()`에 숨은 부수 효과가 있거나, 같은 종류의 함수들이 서로 다른 반환 타입을 가지거나, 함수 이름과 실제 동작이 다를 때
Use when 삼항 연산자가 중첩되거나, 복잡한 조건식 `a && !b || c`가 이름 없이 사용되거나, 동시에 실행되지 않는 코드가 한 컴포넌트에 섞여 있을 때
| name | cohesion |
| description | Use when 한 기능 수정 시 여러 디렉토리를 건드리거나, 같은 숫자/상수가 여러 파일에 흩어져 있거나, import 경로가 `../../..`처럼 길어질 때 |
함께 수정되는 코드는 함께 있어야 한다.
❌ 종류별 분리 (의존 관계 파악 어려움):
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/