Toss Frontend Fundamentals

"좋은 프론트엔드 코드는 변경하기 쉬운 코드다"

언제 이 스킬을 사용하는가

프론트엔드 코드 리뷰 요청 시
새로운 컴포넌트/함수 작성 시
기존 코드 리팩토링 시
"코드 품질", "클린 코드", "개선" 관련 요청 시

4가지 핵심 기준

| 기준 | 설명 | 영향도 | |------|------|--------| | 가독성 | 코드를 얼마나 빠르게 이해할 수 있는가 | CRITICAL | | 예측 가능성 | 함수/컴포넌트가 예상대로 동작하는가 | HIGH | | 응집도 | 함께 수정될 코드가 함께 있는가 | HIGH | | 결합도 | 코드 수정 시 영향 범위가 적절한가 | MEDIUM |

규칙 목록

가독성 (Readability) - 8개 규칙

맥락 줄이기 | 규칙 ID | 규칙 | 상세 | |---------|------|------| | readability-context-separate-code-paths | 같이 실행되지 않는 코드 분리하기 | 상세 | | readability-context-abstract-implementation | 구현 상세 추상화하기 | 상세 | | readability-context-split-by-logic-type | 로직 종류에 따라 함수 쪼개기 | 상세 |

이름 붙이기 | 규칙 ID | 규칙 | 상세 | |---------|------|------| | readability-naming-complex-conditions | 복잡한 조건에 이름 붙이기 | 상세 | | readability-naming-magic-numbers | 매직 넘버에 이름 붙이기 | 상세 |

위에서 아래로 읽히게 하기 | 규칙 ID | 규칙 | 상세 | |---------|------|------| | readability-flow-reduce-time-travel | 시점 이동 줄이기 | 상세 | | readability-flow-simplify-ternary | 삼항 연산자 단순하게 하기 | 상세 | | readability-flow-left-to-right | 왼쪽에서 오른쪽으로 읽히게 하기 | 상세 |

예측 가능성 (Predictability) - 3개 규칙

| 규칙 ID | 규칙 | 상세 | |---------|------|------| | predictability-unique-names | 이름 겹치지 않게 관리하기 | 상세 | | predictability-consistent-return-types | 같은 종류의 함수는 반환 타입 통일하기 | 상세 | | predictability-expose-hidden-logic | 숨은 로직 드러내기 | 상세 |

응집도 (Cohesion) - 3개 규칙

| 규칙 ID | 규칙 | 상세 | |---------|------|------| | cohesion-colocate-modified-files | 함께 수정되는 파일을 같은 디렉토리에 두기 | 상세 | | cohesion-eliminate-magic-numbers | 매직 넘버 없애기 | 상세 | | cohesion-form-structure | 폼의 응집도 생각하기 | 상세 |

결합도 (Coupling) - 3개 규칙

| 규칙 ID | 규칙 | 상세 | |---------|------|------| | coupling-single-responsibility | 책임을 하나씩 관리하기 | 상세 | | coupling-allow-duplication | 중복 코드 허용하기 | 상세 | | coupling-eliminate-props-drilling | Props Drilling 지우기 | 상세 |

사용 방법

코드 리뷰 시

위 4가지 기준 순서대로 검토
위반 사항 발견 시 해당 규칙 파일 참조하여 구체적 피드백 제공
개선 코드 예시 함께 제시

새 코드 작성 시

가독성 우선: 맥락 최소화, 명확한 이름
예측 가능하게: 일관된 패턴 사용
응집도 고려: 관련 코드 함께 배치
결합도 낮추기: 책임 분리

트레이드오프

4가지 기준을 모두 만족하기 어려울 때는 트레이드오프 가이드 참조.

일반적인 우선순위: 가독성 > 예측 가능성 > 응집도 > 결합도

toss-frontend-fundamentals