추상화 역량 모델?

// "어? 이거 아까 짠 거랑 똑같네?" <button className="px-4 py-2 bg-blue-500 text-white rounded"> <button className="px-4 py-2 bg-blue-500 text-white rounded">

// "구조는 같고 값만 다르네?" <button className="px-4 py-2 bg-blue-500..."> <button className="px-4 py-2 bg-red-500..."> <button className="px-4 py-2 bg-green-500...">

// "이거랑 저거랑 본질적으로 같은 문제네?" // 검색 필터, 테이블 필터, 상품 옵션 선택 // → 모두 "선택지에서 고르기" 패턴

// 너무 큰 덩어리 function UserDashboard() { // 500줄... 프로필, 설정, 통계, 알림 다 들어있음 } // 너무 작은 조각 function ButtonText({ children }) { return <span>{children}</span> } function ButtonIcon({ icon }) { return <i>{icon}</i> }

// 변경 이유가 하나인 단위 function PriceDisplay() { /* 가격 표시 책임만 */ } function UserAvatar() { /* 아바타 표시 책임만 */ }

<DataList fetchUrl="/api/users" method="GET" headers={{ 'Authorization': token }} parseResponse={res => res.data.items} errorHandler={err => console.log(err)} />

<UserList users={users} onUserClick={handleClick} />

function ProductCard({ product }) { /* 특정 구현 */ }

function ProductCard({ product, showPrice = true }) { /* 옵션 추가 */ }

function Card({ data, renderer }) { /* 범용화 */ }

// "너무 추상적이면 다시 구체화" // Card가 너무 복잡해졌다면 ProductCard, UserCard로 분리

function SuperForm() { // 검증도 하고, 제출도 하고, 에러 표시도 하고... }

// 각자 하나씩만 잘하는 것들을 조합 const form = useForm(); const validation = useValidation(schema); const submission = useSubmission(endpoint); return ( <Form {...form}> <ValidationProvider {...validation}> <SubmitHandler {...submission}>

1번째: 그냥 만들기 2번째: "어? 또?" 인지 3번째: 추상화

// Before: 200줄 컴포넌트 // After: 50줄 × 4개 컴포넌트 // 배운 점: 검색과 필터는 분리하는게 좋다

"반복되는 패턴을 발견하고, 작은 추상화로 감싸고, 점진적으로 개선한다" | ---------------------------------------- | | | [반복되는 패턴?] [작은 추상화?] [점진적으로 개선?] | | | 어떤 반복? 어떻게 감싸? 언제 개선? | | | [어떤 반복?] ──────────────────────────────┐ | | [어디서?] [얼마나 자주?] [왜 반복?] | | | - 버튼 스타일 - 매일 3-4번 - 디자인 시스템 - 폼 유효성 - 프로젝트마다 없어서 - API 호출 - 컴포넌트마다 - 복붙이 빨라서 - 에러 처리 - 방법을 몰라서 [구체적으로?] | <button className="px-4 py-2 bg-blue-500 rounded"> <button className="px-4 py-2 bg-red-500 rounded"> → 색상만 다르고 나머지는 100% 동일 [작은 추상화?] ─────────────────────────────┐ | | [얼마나 작게?] [어떻게 감싸?] [무엇을 숨기고?] | | | 한 가지 책임 함수/컴포넌트로 구현 세부사항 10-30줄 Props로 인터페이스 HOW를 숨기고 Custom Hook으로 WHAT만 노출 [예시?] | // Before: 30줄 반복 if (loading) return <Spinner /> if (error) return <Error /> if (!data) return <Empty /> // After: 1줄 <DataState {...state} /> [점진적으로 개선?] ────────────────────────┐ | | [언제?] [어떻게?] [누가 결정?] | | | 두 번째 만날 때 테스트 추가 코드 리뷰에서 세 번째 만날 때 인터페이스 개선 팀 회의에서 PR 리뷰할 때 문서화 본인 판단으로 [왜 점진적?] | - 처음부터 완벽한 추상화는 불가능 - 사용하면서 문제점 발견 - 요구사항이 계속 변함

// 로딩 상태 처리 - 50개 컴포넌트에서 반복 const [loading, setLoading] = useState(false); const [error, setError] = useState(null);

// ❌ 너무 큰 추상화 <SuperDataHandler /> // 500줄, 모든 걸 다 함 // ✅ 적절한 크기 <LoadingState /> // 10줄, 로딩만 <ErrorBoundary /> // 20줄, 에러만 <EmptyState /> // 15줄, 빈 상태만

1회차: 하드코딩 (완전 구체적) 2회차: 변수 추출 (약간 유연) 3회차: 함수 추출 (재사용 가능) 4회차: 모듈화 (독립적) 5회차: 라이브러리 (팀 공유)