5장_인터페이스

프론트엔드 아키타입 (이미 존재하는 일반해) ├── Input (value, onChange) ├── Toggle (checked, onChange) ├── Selector (value, onChange, options) ├── List (items, renderItem) ├── Dialog/Modal (isOpen, onClose) ├── Form (onSubmit, children) └── Router (path, element)

// 🤔 사고 흐름 // 1. 본질이 뭐지? → "값을 선택하는 것" // 2. 아키타입은? → Input (값을 입력/선택) // 3. 표준 인터페이스? → value, onChange, min, max // ✅ 결과: HTML input[type='month']와 동일한 인터페이스 <MonthSelector value={selectedMonth} onChange={setSelectedMonth} min="2024-01" max="2024-12" />

// ❌ 구현을 드러내는 인터페이스 <Navigation month={month} setMonth={setMonth} isDisabled={disabled} /> // setMonth? 상태 setter를 직접 넘기네? 내부 구현이 보여요 // ✅ 표준을 따라 예측 가능 <MonthSelector value={month} onChange={setMonth} disabled={disabled} /> // value, onChange, disabled - HTML 표준과 동일

// ❌ 구현 세부사항(동기/비동기)을 인터페이스로 분리 const form = useForm({ validate: { email: isEmail, // 동기 검증 }, validateOnServer: { email: checkDuplicate, // 비동기 검증 }, });

// ✅ What만 표현: 검증 규칙만 선언 const form = useForm({ validate: { email: [isEmail, checkDuplicate], // 뭘로 검증할지만 }, }); // 라이브러리 내부가 알아서 처리: // - 동기면 바로 실행 // - 비동기면 await // - 순서대로 실행, 첫 실패에서 멈춤

// ❌ 자의적인 언어 showProductModal(); startUserFetch(); clickProductSelection(); // ✅ 보편적 언어 open(); loading; onSelect();

┌─────────────┐ ┌─────────────┐ │ 호출자 │ ──────▶ │ 인터페이스 │ │ (사용하는 쪽) │ │ (계약) │ └─────────────┘ └──────┬──────┘ │ ┌──────▼──────┐ │ 구현자 │ │ (만드는 쪽) │ └─────────────┘

// "유저 정보를 가져와줘" const user = await fetchUser(id);

// 구현자가 알아서 결정 // - REST API vs GraphQL // - 캐싱 여부 // - 에러 처리 방식 // - 재시도 로직 async function fetchUser(id: string): Promise<User> { // ... 복잡한 구현 }

// 약속: "id를 주면 User를 돌려줄게" fetchUser(id: string): Promise<User>

// ❌ 구현자 편의 중심: 호출자가 How를 알아야 함 function fetchUser( id: string, useCache: boolean, // 캐시 쓸지 말지? retryCount: number, // 몇 번 재시도? timeout: number // 타임아웃? ): Promise<User>; // ✅ 호출자 편의 중심: What만 말하면 됨 function fetchUser(id: string): Promise<User>;

// ❌ 과한 맥락: 호출자가 내부 구조를 알아야 함 interface Props { userId: string; userCache: Map<string, User>; fetchStrategy: 'lazy' | 'eager'; retryCount: number; } // ✅ 필요한 맥락만: 호출자는 "누구"만 알면 됨 interface Props { userId: string; }

// ❌ 구현 노출: "상태를 설정한다" <Component setIsOpen={setIsOpen} /> // ✅ 의도 표현: "열기/닫기 동작" <Component onOpen={handleOpen} onClose={handleClose} />

// ❌ 과도한 자유도: 뭐든 할 수 있음 interface Props { config: Record<string, any>; } // ✅ 적절한 자유도: 정해진 옵션 중 선택 interface Props { size: 'small' | 'medium' | 'large'; variant: 'filled' | 'outlined'; }

// ❌ 협력이 안 되는 훅: 호출자가 너무 많이 알아야 함 function useUser(id: string) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // ... 호출자가 이 세 가지 상태를 다 관리해야 함 } // ✅ 협력이 잘 되는 훅: 호출자는 What만 const { data: user, isLoading, error } = useQuery(["user", id], fetchUser); // 캐싱, 재시도, 에러 처리는 useQuery가 알아서 함

// ❌ 함수명이 의도를 말해주지 않음 function process(data: any, flag: boolean, mode: string) { // ...무슨 작업을 하는 건지 코드를 읽어야 알 수 있음 } // ❌ 파라미터가 의도를 말해주지 않음 function handle(a: number, b: number, c: boolean) { // a, b, c가 뭔지 모름 }

// ✅ 함수명이 의도를 말해줌 function validateOrder(order: Order): ValidationResult { // "주문을 검증한다"가 바로 보임 } // ✅ 파라미터가 의도를 말해줌 function getShippingCost({ weight, distance, isExpress }: ShippingParams): number { // 배송비에 뭐가 필요한지 바로 보임 }

// ✅ "유저의 권한을 확인한다" function checkUserPermission(user: User, action: Action): boolean; // ❌ 한 문장으로 설명하기 어려움 (여러 가지 일을 함) function processUserAndSendNotificationIfNeeded( user: User, config: Config ): Result;

// ✅ How를 몰라도 됨 const formatted = formatCurrency(10000); // "10,000원" // ❌ How를 알아야 함 const formatted = formatCurrency(10000, "KRW", "ko-KR", true, false); // true, false가 뭔지 알아야 쓸 수 있음

// 인터페이스 const user = await fetchUser(id); // 구현이 REST → GraphQL로 바뀌어도 // 호출 코드는 그대로

// 점검할 인터페이스 function sendNotification( userId: string, type: "email" | "sms" | "push", message: string ): Promise<boolean>;

// TypeScript 문법 interface User { name: string; email: string; } // 이건 "타입 정의"일 뿐 // 개념적 인터페이스가 아닐 수 있음

// 함수 시그니처도 인터페이스 function validateOrder(order: Order): ValidationResult // API 경계도 인터페이스 POST /api/users { name: string, email: string } // React 컴포넌트 props도 인터페이스 <Button onClick={handler} disabled={isLoading}> 저장 </Button> // 커스텀 훅 반환값도 인터페이스 const { data, isLoading, error } = useQuery(...)