cohesion

Cohesion

Code that is modified together should be located together.

Core patterns

Place files that are modified together in the same directory

❌ Separation by kind (hard to grasp dependency relationships):

src/
├── components/UserForm.tsx
├── hooks/useUserValidation.ts
├── types/userTypes.ts
└── api/userApi.ts

✅ Placement by domain:

src/
├── components/   # 전역 공유
└── domains/User/ # User 관련 코드 모음
    ├── UserForm.tsx
    ├── useUserValidation.ts
    ├── types.ts
    └── api.ts

Remove magic numbers

If the same number appears in multiple places, only one of them gets modified, causing a bug.

❌ Scattered:

// Pagination.tsx
const pages = Math.ceil(total / 20);
// useItems.ts
const offset = (page - 1) * 20;

✅ Consolidated into a constant:

export const PAGE_SIZE = 20;
import { PAGE_SIZE } from './constants';

Quick reference

Code smell	Improvement method
The same magic number in 3 or more places	Extract into a shared constant
A feature modifies components/, hooks/, and types/ all together components/, hooks/, types/ all modified	domains/featureName/placed as
Long relative paths ../../..	Place files close together
Type definitions are far from their usage sites	Place them together with the code that uses them

Exception: cases where duplication is better

• When the two features are likely to evolve differently
• When sharing would create an unwanted dependency
• When the shared code is simple, under 5 lines

Reference: https://frontend-fundamentals.com/code-quality/cohesive/