---
name: fe-cohesion
description: 함께 바뀌는 코드를 함께 두는 기준(Toss Frontend Fundamentals 응집도). 파일·폴더 위치를 정할 때, 같은 숫자·상수를 여러 곳에서 쓸 때, 폼 검증을 필드 단위로 할지 폼 단위로 할지 정할 때 사용
---

# 응집도 (Cohesion)

수정되어야 할 코드가 **항상 같이 수정되는지**. 응집도가 높은 코드는 한 부분을 수정해도 의도치 않게 다른 부분에서 오류가 발생하지 않습니다.

## 빠른 참조

| 항목 | 이런 코드면 의심 | 개선 방향 |
|---|---|---|
| 1. 함께 수정되는 파일을 같은 디렉토리에 두기 | components·hooks·utils처럼 종류별 분류만 있다. `../../../` 같은 깊은 경로, 기능을 지운 뒤 남은 미아 코드, 한 폴더에 50개 넘는 파일 | 도메인별 폴더로 모은다 (예: `domains/payment/`) |
| 2. 매직 넘버 상수로 관리하기 | 같은 숫자가 여러 파일에, 또는 CSS와 JS에 따로 흩어져 있다 | 한 곳의 상수로 모으고 모든 곳에서 가져다 쓴다 |
| 3. 폼의 응집도 생각하기 | 검증 로직의 위치가 변경 단위와 맞지 않는다 | 필드 단위와 폼 단위 중 변경 단위에 맞는 쪽을 고른다 |

## 판단 기준

- **필드 단위 응집**: 필드마다 독립 검증(이메일 형식 등)이 필요하거나, 필드를 다른 폼에서 재사용하거나, 필드별 비동기 검증이 복잡할 때.
- **폼 단위 응집**: 하나의 완결된 기능(결제·배송 정보)이거나, 단계별 입력(Wizard)이거나, 필드끼리 의존(비밀번호 확인, 금액 계산)할 때.
- **상수로 모을지**: 같은 값이 함께 안 바뀌면 버그가 나는 경우에만 모은다. 우연히 값만 같은 숫자는 각자 이름을 붙인다.

## Red Flags (발견 즉시 Critical)

- **크로스 도메인 결합**: 명확한 인터페이스 없이 도메인 간 의존 — 잘못된 파일 참조를 인지하기 어려움
- **타이밍 관련 매직 넘버 분산**: 애니메이션/딜레이 값이 여러 파일에 하드코딩 — 변경 시 놓치면 조용히 서비스가 깨짐
- **한 디렉토리에 50개 이상 파일**: 도메인 분리 필요 신호
- **깊은 상대 경로 (`../../../`)**: 디렉토리 구조 재설계 필요
- **기능 삭제 후 미아 코드**: 여러 디렉토리에 연관 파일이 남아있음

## 다른 원칙과 부딪히는 지점

응집도 개선이 다른 원칙과 상충할 수 있습니다:

- **응집도 vs 가독성**: 함수/변수를 공통화하고 추상화하면 응집도는 올라가지만, 코드가 한 차례 추상화되어 가독성이 떨어질 수 있음
- **응집도 vs 결합도**: 함께 수정되는 코드를 한 곳에 모으면 응집도는 올라가지만, 해당 모듈의 영향 범위가 넓어질 수 있음

원칙끼리 부딪히면 `fe-tradeoffs` 스킬의 판단 기준을 따른다.

## 예시 코드

항목별 상세 설명, Bad/Good 코드, 확인 질문은 [references/examples.md](references/examples.md)에 있다. 개선안을 코드로 제시할 때 참고한다.

## 출처

- [함께 수정되는 파일을 같은 디렉토리에 두기](https://frontend-fundamentals.com/code-quality/code/examples/code-directory.html)
- [매직 넘버 상수로 관리하기](https://frontend-fundamentals.com/code-quality/code/examples/magic-number-cohesion.html)
- [폼의 응집도 생각하기](https://frontend-fundamentals.com/code-quality/code/examples/form-fields.html)