연습 방법: Wishful Thinking + 일상 속에서 발견하기(분해 / 조립)

; 1. 먼저 세부 구현부터 생각 (define (average x y) (/ (+ x y) 2)) (define (improve guess x) (average guess (/ x guess))) (define (good-enough? guess x) (< (abs (- (square guess) x)) 0.001)) ; 2. 그걸 조합해서 제곱근 만들기 (define (sqrt-iter guess x) (if (good-enough? guess x) guess (sqrt-iter (improve guess x) x)))

; 1. 먼저 "이런 게 있으면 좋겠다" (define (sqrt x) (sqrt-iter 1.0 x)) ; "sqrt-iter가 있으면 좋겠다" ; 2. sqrt-iter를 사용하면서 "이런 게 필요하겠다" (define (sqrt-iter guess x) (if (good-enough? guess x) ; "good-enough?가 있으면 좋겠다" guess (sqrt-iter (improve guess x) x))) ; "improve가 있으면 좋겠다" ; 3. 이제서야 실제 구현 (define (good-enough? guess x) (< (abs (- (square guess) x)) 0.001)) (define (improve guess x) (average guess (/ x guess))) (define (average x y) (/ (+ x y) 2))

; What: 제곱근을 구한다 (define (sqrt x) (sqrt-iter 1.0 x)) ; How: 반복적으로 추측을 개선한다 (define (sqrt-iter guess x) (if (good-enough? guess x) guess (sqrt-iter (improve guess x) x)))

; 높은 레벨: 제곱근은 반복적 개선이다 (sqrt-iter guess x) ; 중간 레벨: 개선은 평균을 사용한다 (improve guess x) ; 낮은 레벨: 평균은 더해서 나눈다 (average x y)

; Bad: 모든 걸 한번에 생각 (define (sqrt x) (define (iter guess) (if (< (abs (- (* guess guess) x)) 0.001) guess (iter (/ (+ guess (/ x guess)) 2)))) (iter 1.0)) ; Good: 단계별로 생각 (define (sqrt x) (sqrt-iter 1.0 x)) ; 1단계: 이것만 생각 (define (sqrt-iter guess x) (if (good-enough? guess x) ; 2단계: 이것만 생각 guess (sqrt-iter (improve guess x) x)))

// 1. 세부 구현부터 function validateEmail(email: string) { /* ... */ } function formatError(error: Error) { /* ... */ } function sendToAnalytics(data: any) { /* ... */ } // 2. 조합 function handleSubmit(data: FormData) { if (!validateEmail(data.email)) { const error = formatError(new Error('Invalid email')); sendToAnalytics({ error }); return; } // ... }

// 1. 먼저 "이상적인 형태" function SignupForm() { return ( <Form onSubmit={handleSignup}> {/* 이런 게 있으면 좋겠다 */} <EmailInput /> {/* 이런 게 있으면 좋겠다 */} <PasswordInput /> {/* 이런 게 있으면 좋겠다 */} <SubmitButton /> {/* 이런 게 있으면 좋겠다 */} </Form> ); } // 2. 이제 구현 function Form({ onSubmit, children }) { // Form의 책임만 구현 } function EmailInput() { // EmailInput의 책임만 구현 }

// 1. 희망사항을 주석으로 function ProductList() { // 제품 목록을 보여준다 // 제품을 클릭하면 상세로 간다 // 빈 목록이면 empty 상태를 보여준다 } // 2. 더 작은 의도로 나눔 function ProductList() { // const products = 제품 목록을 가져온다 // const handleClick = 제품 클릭 시 상세로 이동한다 // products가 비었으면 EmptyState를 보여준다 // 아니면 ProductCard들을 보여준다 } // 3. 주석을 구현으로 function ProductList() { const products = useProducts(); // "이런 훅이 있으면 좋겠다" const handleClick = useProductNavigation(); // "이런 훅이 있으면 좋겠다" if (products.length === 0) { return <EmptyState />; // "이런 컴포넌트가 있으면 좋겠다" } return products.map(p => <ProductCard product={p} onClick={handleClick} /> ); }

❌ 초보자의 커피 만들기: 1. 원두 위치 찾기 2. 필터 위치 찾기 3. 머신 온도 설정하기 4. 압력 조절하기 5. 추출하기 ✅ 당신의 실제 행동: "아메리카노 주세요"

const res = await fetch('/api/products'); const data = await res.json(); setProducts(data); if (data.length === 0) navigate('/empty');

const products = useProducts(); // 이런 게 있으면 좋겠다 if (products.isEmpty) navigate('/empty');

<div> <ProductCard product={products[0]} /> <Separator /> <ProductCard product={products[1]} /> <Separator /> <ProductCard product={products[2]} /> </div>

<SeparatedList items={products} separator={<Separator />}> {product => <ProductCard product={product} />} </SeparatedList>

if (user && user.role === 'admin' && user.permissions.includes('write')) { return <Editor />; }

<PermissionGuard require="admin.write"> <Editor /> </PermissionGuard>

// 1. Form - 입력과 검증 <Form onSubmit={handleSubmit}> <Input name="email" /> <Button>제출</Button> </Form> // 2. Dialog - 모달 상호작용 <Dialog open={isOpen} onClose={handleClose}> <DialogTitle>확인</DialogTitle> <DialogContent>정말 삭제하시겠습니까?</DialogContent> </Dialog> // 3. List - 목록과 구분자 <SeparatedList items={data} separator={<Divider />}> {item => <Card item={item} />} </SeparatedList>

[1] Before: 복잡한 코드 → "뭐가 불편하지?" (1번 챕터에서 학습한 징후 감지) [2] Hope: 이런 게 있으면 좋겠다 → "이상적으로는?" (변환 공식 적용) [3] After: 실제 깔끔한 코드 → "실제로 만들면 이렇게" (구현)

// [1] Before const beans = storage.warehouse.shelf3.beans; const filter = storage.drawer2.filters; machine.setTemperature(93); machine.setPressure(9); const espresso = machine.extract(beans, filter, 25); // "너무 많이 알아야 해" → 불편 // [2] Hope cafe.order("americano") // 이런 게 있으면 좋겠다! // [3] After export function order(menu: string) { const beans = storage.warehouse.shelf3.beans; const filter = storage.drawer2.filters; // ... (내부 구현 숨김) }

// [1] Before useEffect(() => { fetch('/api/products') .then(res => res.json()) .then(data => { setProducts(data); if (data.length === 0) navigate('/empty'); }); }, [navigate]); // "얽혀있어" → 불편 (1번 챕터) // [2] Hope const products = useProducts(); // 이런 훅이 있으면 좋겠다 if (products.isEmpty) navigate('/empty'); // 이렇게 쓸 수 있으면 좋겠다 // [3] After (실제 구현) function useProducts() { const { data } = useQuery({ queryKey: ['products'], queryFn: fetchProducts }); return { data, isEmpty: data?.length === 0 }; }

function SignupForm() { // 1단계: 주석으로 희망 적기 // 이메일을 입력받는다 // 비밀번호를 입력받는다 // 제출하면 회원가입한다 // 성공하면 홈으로 간다 // 2단계: 희망을 인터페이스로 // <EmailInput /> // <PasswordInput /> // <Form onSubmit={handleSignup}> // onSuccess → navigate('/') // 3단계: 실제 구현 return ( <Form onSubmit={handleSignup}> <EmailInput /> <PasswordInput /> <SubmitButton /> </Form> ); }

1. 일상 인식: "나 이미 이렇게 해" ↓ 2. 패턴 학습: "이런 게 있구나" ↓ 3. 변환 공식: "복잡한 거 → 희망" ↓ 4. 반복 연습: Before → Hope → After ↓ 5. 주석 연습: 희망을 주석으로 ↓ 6. 실전 적용: 내 코드에서