frontend-fundamentals

name

frontend-fundamentals

description

토스(Toss) Frontend Fundamentals 기반의 프론트엔드 개발 종합 가이드. 코드 품질(가독성, 예측 가능성, 응집도, 결합도), 번들링(Webpack, 트리셰이킹, 코드 스플리팅), 접근성(A11y, 스크린 리더, ARIA), 디버깅(진단, 재현, 수정, 재발 방지) 4개 도메인을 포괄한다. 반드시 이 스킬을 사용해야 하는 상황: - 프론트엔드 코드 리뷰, 리팩토링, 코드 품질 개선 요청 시 - React/TypeScript 컴포넌트의 가독성, 응집도, 결합도 관련 질문 시 - Webpack, Rollup, Vite 등 번들링 설정, 트리셰이킹, 코드 스플리팅 질문 시 - 웹 접근성(a11y), ARIA, 스크린 리더, 키보드 내비게이션 관련 질문 시 - 프론트엔드 디버깅 전략, 에러 메시지 분석, 버그 재현/수정/방지 질문 시 - "좋은 코드란?", "변경하기 쉬운 코드", "클린 코드" 등의 추상적 질문 시 - 면접 준비에서 프론트엔드 기초 개념을 정리하고 싶을 때 - 컴포넌트 분리 전략, Props Drilling, 매직 넘버, 삼항 연산자 등 구체적 패턴 질문 시 - ESM vs CJS, sideEffects, 번들 분석, HMR, 소스맵 등 빌드 관련 질문 시 - 버튼 안에 버튼, 테이블 행 클릭, 폼 접근성 등 UI 접근성 안티패턴 질문 시

Frontend Fundamentals 스킬

토스(Toss)의 Frontend Fundamentals 프로젝트에서 다루는 프론트엔드 핵심 지식을 종합한 스킬이다. 4개 도메인으로 구성되어 있으며, 각 도메인의 상세 내용은 references/ 디렉토리의 개별 파일에서 확인한다.

도메인 구조

1. 코드 품질 (Code Quality)

좋은 프론트엔드 코드 = 변경하기 쉬운 코드. 4가지 기준으로 판단한다:

• 가독성: 맥락 줄이기, 이름 붙이기, 위에서 아래로 읽히게 하기
• 예측 가능성: 이름 겹침 방지, 반환 타입 통일, 숨은 로직 드러내기
• 응집도: 함께 수정되는 코드를 가까이 두기, 매직 넘버 제거
• 결합도: 책임 분리, 중복 허용, Props Drilling 제거

→ 상세: references/code-quality.md를 읽어라

2. 번들링 (Bundling)

여러 파일을 하나로 묶어 웹 성능을 최적화하는 과정:

• 기본 개념: 번들링이란, 번들러란
• Webpack 튜토리얼: 첫 번들 → 모듈 → TS → React → 스타일 → 에셋 → 플러그인 → 개발 서버
• 심화: 진입점, 경로 탐색, 로더, 플러그인, 출력
• 최적화: 코드 스플리팅, 트리 셰이킹, 번들 분석
• 개발 환경: 개발 서버, HMR, 소스맵

→ 상세: references/bundling.md를 읽어라

3. 접근성 (A11y)

모든 사용자가 웹을 편리하게 이용하도록 돕는 기본 원칙:

• 핵심 3요소: 역할(Role), 레이블(Label), 상태(State)
• 4가지 원칙: 올바른 구조, 정확한 의미 전달, 예측 가능한 동작, 시각 정보 보완
• UI별 접근성: 탭, 아코디언, 모달, 라디오, 체크박스, 스위치
• 실전 가이드: 버튼 중첩 금지, 테이블 행 클릭, 레이블 필수, 폼 감싸기
• 심화: ESLint 접근성 규칙, 디자인 시스템 결합

→ 상세: references/a11y.md를 읽어라

4. 디버깅 (Debug)

버그를 찾고 해결하는 체계적 4단계 프로세스:

• 진단하기: 에러 메시지 분석, 작업 지도 그리기
• 재현하기: 간단하게 재현, 디버거/콘솔 활용, 경계값 테스트, 자동화, 경로 추적
• 수정하기: 근본 원인 수정, 순수 함수 분리, 데드코드 제거
• 재발 방지: 에러 로그, 버그 리포트, 팀 공유 및 공통 유틸 반영

→ 상세: references/debugging.md를 읽어라

사용 방법

1. 사용자의 질문이 어떤 도메인에 해당하는지 파악한다
2. 해당 도메인의 reference 파일을 읽는다
3. reference 파일의 원칙과 예제를 기반으로 구체적이고 실용적인 답변을 제공한다
4. 코드 예시가 필요하면 Before/After 패턴으로 보여준다
5. 여러 도메인이 겹치는 질문이면 관련 reference를 모두 참고한다

핵심 철학

• 4가지 기준(가독성, 예측 가능성, 응집도, 결합도)은 서로 상충할 수 있다
• 상황에 따라 어떤 가치를 우선할지 깊이 고민해야 한다
• 응집도를 높이면 가독성이 떨어질 수 있고, 중복을 허용하면 결합도는 낮아지지만 응집도가 떨어질 수 있다
• "정답"보다는 "트레이드오프를 이해하고 맥락에 맞게 결정하는 것"이 중요하다

출처

모든 내용은 Frontend Fundamentals 프로젝트 기반이다.