Wishful Thinking 기반 추상화 멘탈 모델 교육법

Wishful Thinking 기반 추상화를 잘 하려면? ├─ 요구사항 분해 능력 (추상화 레벨 나누기) │ ├─ A. 고객 언어 → 개발 언어 번역 (추상 의도를 구현으로) │ │ 예: "제품을 보고 싶어요" → "목록 조회 + 상세 보기" │ ├─ B. 큰 것 → 작은 것 나누기 (추상화 계층 구조 나누기) │ │ 예: "제품 목록 페이지" → "List + Search + Filter" │ └─ C. 본질 찾기 (환원적 사고) │ 예: 복잡한 조건 → "권한이 있으면 보여준다" │ ├─ 일반해 어휘 보유 (추상화 패턴 알기) │ ├─ E. 패턴 라이브러리 알기 (검증된 추상화들) │ │ 예: List, Form, Dialog의 역할과 사용 시점 │ ├─ F. 욕구 → 일반해 매핑 (상황을 추상화로 번역) │ │ 예: "입력 받기" → Form, "확인 받기" → Dialog │ └─ G. 조합 단위 인식 (추상화 조합하기) │ 예: Form + Input + Button = SignupForm │ └─ 인터페이스 설계 감각 (What 설계하기) ├─ H. 좋은 인터페이스 판단 (What이 명확한가?) │ 예: useProducts() vs fetchAndSetProductsAndNavigate() ├─ I. 사용자 관점 유지 (What 부터 생각하기) │ 예: "이렇게 쓸 수 있으면 좋겠다" 먼저 └─ J. 변경 대응 설계 (What은 명확하게, How는 유연하게) 예: 유연함 vs 구체성 균형

// 데이터 표시 <List items={data} /> <Table rows={rows} /> <Card content={user} /> // 사용자 입력 <Form onSubmit={handleSubmit} /> <Input value={value} onChange={onChange} /> <Select options={options} onSelect={onSelect} /> // 상호작용 <Dialog open={isOpen} /> <Modal content={content} /> <Dropdown items={items} /> // 네비게이션 <Link to={path} /> <Button onClick={handleClick} />

// 1. 먼저 세부 구현부터 생각 function getBeansFromShelf(shelfNumber) {} function getFilterFromDrawer(drawerNumber) {} function setMachineTemperature(machine, temp) {} function setMachinePressure(machine, pressure) {} function extract(machine, beans, filter, time) { const espresso = machine.brew(beans, filter, time); return espresso; } // 2. 그걸 조합해서 커피 만들기 function makeAmericano() { const beans = getBeansFromShelf(3); const filter = getFilterFromDrawer(2); const machine = equipment.espressoMachine; setMachineTemperature(machine, 93); setMachinePressure(machine, 9); const espresso = extract(machine, beans, filter, 25); const water = addHotWater(espresso, 200); return water; }

// What부터 상상 orderCoffee('americano') // What: 아메리카노 주문 // 한 레벨 내려가서 What function orderCoffee(menu) { return cafe.make(menu); // What: 카페가 만듦 } // 또 한 레벨 내려가서 What cafe.make = function(menu) { const recipe = getRecipe(menu); // What: 레시피 가져옴 return brew(recipe); // What: 레시피로 만듦 } // 마지막에 How function brew(recipe) { const beans = getBeansFromShelf(3); // 이제서야 How // ... }

// [추상] 의도 // 제품 목록을 보여준다 // [추상] 인터페이스 상상 (이런 게 있으면 좋겠다) // const products = useProducts() // <List items={products} /> // [구현] 실제 코드 const products = useQuery(productQueryOptions());

// 🔄 사이클 1: useProducts 만들기 // Wishful Thinking: "제품 가져오는 게 있으면 좋겠다" const products = useProducts() // ← 아직 없지만 상상 // 구현 (How) function useProducts() { return useQuery(...) }

// 🔄 사이클 2: useProducts가 이제 Primitive! // Wishful Thinking: "제품 페이지가 있으면 좋겠다" function ProductPage() { const products = useProducts() // ← Primitive처럼 사용 const filter = useFilter() // ← 또 다른 Primitive return <List items={products} filter={filter} /> // ← 조합 }

// 🔄 사이클 3: ProductPage가 이제 Primitive! // Wishful Thinking: "앱이 있으면 좋겠다" function App() { return ( <Routes> <Route path="/products" element={<ProductPage />} /> // ← Primitive <Route path="/cart" element={<CartPage />} /> </Routes> ) } // 이 과정은 끝없이 반복됩니다...