Frontend Fundamentals

Frontend Fundamentals는 "변경하기 쉬운 프론트엔드 코드를 위한 지침서"다. 좋은 코드를 막연하게 설명하는 대신, 가독성·예측 가능성·응집도·결합도라는 4가지 관점에서 구체적인 Before/After 예시로 풀어낸다. 토스 프론트엔드 팀이 실제 프로덕트에서 검증한 기준을 오픈소스로 공개했으며, 15개 이상의 실전 사례 연구로 구성된다.

코드를 처음 읽는 사람이 빠르게 이해할 수 있는 구조를 만드는 방법. • 맥락 줄이기 — 함께 실행되지 않는 코드 분리, 구현 상세 추상화, 함수 분할 • 이름 붙이기 — 복잡한 조건식과 매직 넘버에 이름 부여 • 순차적 읽기 — 코드 읽는 시점의 이동 최소화, 삼항 연산자 단순화, 좌우 순서 최적화

코드가 예상대로 동작한다는 신뢰를 만드는 방법. • 이름 충돌 방지 — 같은 이름이 다른 의미로 쓰이지 않도록 • 유사 함수의 반환 타입 통일 — 같은 패턴의 함수는 같은 형태로 반환 • 숨은 로직 명시화 — 부수 효과나 암묵적 동작을 코드 구조로 드러내기

함께 변경되는 것들을 함께 두는 방법. • 함께 수정되는 파일의 같은 디렉토리 배치 — 관련 코드를 가까이 • 매직 넘버 제거 — 의미 있는 상수로 응집 • 폼 요소의 응집도 최적화 — 연관된 상태와 핸들러를 한 곳에서 관리

변경이 전파되지 않도록 의존성을 줄이는 방법. • 단일 책임 관리 — 한 모듈이 여러 관심사를 갖지 않도록 • 중복 코드 허용 — 억지로 공통화하면 결합도가 높아질 수 있다. 변경 패턴이 같을 때만 추상화 • Props Drilling 제거 — 컴포넌트 트리를 통한 불필요한 의존성 차단

각 원칙은 구체적인 사례 연구로 설명한다. 버튼, HTTP 요청, 폼 필드, 모달 등 실제 UI 컴포넌트를 예시로 삼아 Before/After 코드를 나란히 보여준다. 한국어, 영어, 일본어, 중국어 간체를 지원하며, GitHub 토론을 통해 커뮤니티가 함께 가이드를 발전시키고 있다.