모듈화 멘탈 모델

// ❌ Before: 인터페이스가 되는대로 작성되어 구조에 표현된 이해가 없음 <PGSection type="toss" cardNumber={cardNumber} expiry={expiry} cvc={cvc} tossToken={token} tossUserId={userId} handleOrder={handleOrder} /> // → "PGSection"이 뭘 하는 건지? (역할 불명) // → 카드 정보와 토스 정보가 왜 같이? (경계 없음) // → handleOrder가 언제 불리지? (협력 방식 불명) // ✓ After: 인터페이스 구조에 작성자가 이해한 개념이 새겨짐 <PaymentForm method={tossPay} onSubmit={withAnalytics(saveOrder, { event: 'purchase' })} /> // 새겨진 이해: // → "결제를 받는 폼이다" — 이름이 역할을 말함 // → "결제수단은 바뀔 수 있다" — method로 추상화 // → "제출하면 저장하고 추적한다" — onSubmit + withAnalytics // → "카드/토스 내부 구조는 몰라도 된다" — method 안에 캡슐화

문제 영역 (기획서/디자인) ↓ 탐색 시작 — 기존 이해(도메인 맥락, 개발 지식) 동원 ↓ 감지 — 코드에서 긴장을 느낀다 ("뭔가 불편하다") ↓ 진단 — 어떤 힘인지 파악한다 (이해 부족? 낮은 응집? 높은 결합?) ↓ 구조화 — 이해를 경계와 연결로 새긴다 ↓ 해소 — 긴장이 사라진다 (균형) ↓ 점진적 반복 — 새로운 이해가 쌓인다 ↑ └── 개발자의 이해가 기획에 피드백

긴장을 느낀다 (불편하다) ↓ "어떤 힘이지?" — 이해 부족? 낮은 응집? 높은 결합? ↓ "구조가 왜 이 모양이지?" — 경계와 연결 검토 ↓ "내가 지금 뭘 모르고 있지?" — 근본 원인 ↓ 탐색 / 재구조화 ↓ 긴장이 해소된다

// 탐색 전: 구멍 투성이 for (let i = 0; i < cart.items.length; i++) { if (cart.items[i].category === 'electronics') { total += cart.items[i].price * 0.9 } } // 탐색하며 이해를 획득한다: // "category === 'electronics'가 뭐야?" → "전자제품인지 확인하는 것" const isElectronics = (item) => item.category === 'electronics' // "price * 0.9가 뭐야?" → "10% 할인을 적용하는 것" const applyDiscount = (item, { rate }) => item.price * (1 - rate) // 탐색 후: 이해가 코드에 이름으로 새겨짐 cart.items .filter(isElectronics) .reduce((sum, item) => sum + applyDiscount(item, { rate: 0.1 }), 0)

// ❌ Props를 통로로 씀: 구체들을 그대로 전달 <결제창 신한카드={{ 카드번호, 유효기간, CVC }} 토스페이={{ 토큰, 사용자키 }} 국민계좌={{ 계좌번호, 예금주 }} /> // → 결제창이 모든 결제수단의 내부 구조를 알아야 함 // → 네이버페이 추가되면? 또 구조 파악해서 추가해야 함 // ✓ Props를 인터페이스로 씀: 본질을 발견하여 경계로 삼음 <결제창 결제수단={토스페이} /> <결제창 결제수단={네이버페이} /> // → "결제수단"이라는 본질이 구체들로부터 발견됨 // → 결제창은 결제수단의 내부를 몰라도 됨 (경계가 명확) // → 새 결제수단 추가해도 결제창은 변경 없음

onClose: withFoo(domainFn) // ↑ ↑ ↑ // 구조 층 실제 로직 // 연결의 구조: // 1. onClose — 함수가 들어오도록 허용하는 관절 // 2. withFoo — 층 (관심사를 끼워넣음) // 3. domainFn — 실제 로직 (도메인의 일) // 각 층위가 자기 책임만 지고, 관절을 통해 협력한다

초보자의 작업기억 (긴장이 높은 상태): [변수명][함수길이][중복][책임분리][에러처리][포맷][남 눈치] (7/7 슬롯) → 꽉 참, 고차원 사고 불가 전문가의 작업기억 (긴장이 낮은 상태): [코드스멜][남 눈치][ ][ ][ ][ ][ ] (2/7 슬롯) → 여유 있음, "이 설계가 비즈니스에 맞나?" 생각 가능

// 긴장이 느껴지는 코드 function processData(data, flag, ctx, opts) { // 이해 부족: "이게 뭘 하는 건지 모르겠다" const x = data.items.filter(i => i.t === 'A' && ctx.u.role === 'admin'); // 낮은 응집: "여기저기 뛰어다녀야 한다" const config = getConfig(); // config.js const validated = validate(x); // validators/index.js const transformed = transform(validated, config.rules); // utils/transform.js const result = apply(transformed); // 다시 여기 // 높은 결합: "건드리면 줄줄이 딸려온다" globalState.lastProcessed = result; eventBus.emit('processed', { result, ctx, opts, flag }); cache.invalidate(['data', 'reports', 'dashboard']); return result; }

// Step 1: 확정한 것만 — "결제를 받는다" <PaymentForm onSubmit={handlePayment} /> // Step 2: 이해가 쌓임 — "결제수단이 여러 개다" <PaymentForm method={cardPay} onSubmit={handlePayment} /> // Step 3: 이해가 더 쌓임 — "제출 전에 검증이 필요하다" <PaymentForm method={cardPay} onSubmit={handlePayment} validate={validateCard} /> // Step 4: 이해가 더 쌓임 — "분석 추적이 필요하다" <PaymentForm method={cardPay} onSubmit={withAnalytics(handlePayment, { event: 'purchase' })} validate={validateCard} /> // 매 단계마다 코드는 돌아간다. // 긴장이 느껴질 때만 구조를 고친다.