toss-frontend-fundamentals

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 지우기	상세

사용 방법

코드 리뷰 시

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

새 코드 작성 시

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

트레이드오프

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

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

참고

• Toss Frontend Fundamentals
• GitHub Repository