성급한 추상화를 피해보자

DRY와 WET 원칙은 각각 무슨 약어일까?

You can ask yourself "Haven't I written this before?" two times, but never three.

DRY를 따르면 코드가 어떻게 될까?

// utils/string.ts
// 문자열 뒤에 접미사를 붙이는 함수입니다. 어디서나 쓸 수 있을 것 같아서 만들게 됩니다.
export const addSuffix = (value: string, suffix: string) => `${value}${suffix}`;

// utils/number.ts
// 숫자에 천 단위 구분 기호를 넣는 함수입니다.
export const withComma = (value: number) => value.toLocaleString('ko-KR');

// utils/price.ts
// 위 두 함수를 조합해서 원화 표기를 만드는 함수입니다.
export const formatKRW = (value: number) => addSuffix(withComma(value), '원');

잘게 쪼갤수록 좋다는 착각에서 벗어나기 - "모듈성은 받아들이되, 세분도를 조심하라" | kyu-log

잘게 쪼갤수록 좋다는 통념을 세분도(granularity) 관점에서 다시 봅니다. Atomic Design이 끝까지 지켜지지 않는 이유, 수정할 이유가 하나인데 파일이 둘인 상황을 짚고, 좋은 세분도는 크기가 아니라 경계로 정해진다는 결론에 닿습니다.

https://www.kyu-log.com/modularity-with-fined-granularity

DRY는 정말 '같은 코드를 쓰지 말라'는 뜻이었을까?

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system

// 닉네임 길이 제한이라는 규칙을 한 곳에만 둡니다.
export const MAX_NICKNAME_LENGTH = 12;

// input, validation, 안내 문구가 모두 같은 값을 씁니다.
<input maxLength={MAX_NICKNAME_LENGTH} />;
const isValid = nickname.length <= MAX_NICKNAME_LENGTH;
const message = `닉네임은 ${MAX_NICKNAME_LENGTH}자까지 입력할 수 있습니다.`;

그러면 AHA는 무엇이 다를까?

YouTubeAHA Programming – Kent C. Dodds

AHA Programming – Kent C. Dodds

Check out FAQ on this content, shortened version and extra resources for this talk at https://gitnation.com/contents/aha-programming Find the latest React talks & workshops at https://gitnation.com   🗓 Talk recording from React Summit Remote Edition 2020 See other React conferences by GitNation React Summit – https://reactsummit.com React Advanced London – https://reactadvanced.com React Day Berlin – https://reactday.berlin/ #AHA Programming Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear by the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase by applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction. Kent C. Dodds Kent is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is the creator of TestingJavaScript.com and he's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and React. Subscribe to our channel to see more React (Native) talks: https://www.youtube.com/channel/UCsFrt8oKNYXGspSlX9u6uXw/

YouTube

성급한 추상화를 하면 어떤 모양이 될까?

// 상품 목록에서 쓰는 card입니다.
function ProductCard({ product }: { product: Product }) {
  return (
    <li className="card">
      <img src={product.imageUrl} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{product.price.toLocaleString()}원</p>
      <WishButton id={product.id} />
    </li>
  );
}

// 장바구니에서 쓰는 card입니다.
function CartItem({ item }: { item: CartItem }) {
  return (
    <li className="card">
      <img src={item.imageUrl} alt={item.name} />
      <h3>{item.name}</h3>
      <p>{item.price.toLocaleString()}원</p>
      <QuantityStepper itemId={item.id} />
      <button onClick={() => removeFromCart(item.id)}>삭제</button>
    </li>
  );
}

요구사항 1. 검색 결과 화면에서 작은 card가 필요해졌습니다. 요구사항 2. 이벤트 상품은 가격을 숨겨야 했습니다. 요구사항 3. 주문서에서는 수량 조절 UI를 숨겨야 했습니다.

// 처음에는 variant 하나로 충분했습니다.
interface ItemCardProps {
  item: Item;
  variant: 'product' | 'cart';
  compact?: boolean;       // 요구사항 1 : 검색 결과 화면용 작은 card
  hidePrice?: boolean;     // 요구사항 2 : 이벤트 상품의 가격 숨김
  showQuantity?: boolean;  // 요구사항 3 : 주문서의 수량 조절 UI 숨김
  onRemove?: () => void;
}

function ItemCard({ item, variant, compact, hidePrice, showQuantity, onRemove }: ItemCardProps) {
  return (
    // 요구사항 1 : compact면 작은 card 스타일을 씁니다.
    <li className={compact ? 'card card--compact' : 'card'}>
      <img src={item.imageUrl} alt={item.name} />
      <h3>{item.name}</h3>
      {/* 요구사항 2 : hidePrice면 가격을 그리지 않습니다. */}
      {!hidePrice && <p>{item.price.toLocaleString()}원</p>}
      {variant === 'product' && <WishButton id={item.id} />}
      {/* 요구사항 3 : showQuantity일 때만 수량 조절 UI를 그립니다. */}
      {variant === 'cart' && showQuantity && <QuantityStepper itemId={item.id} />}
      {variant === 'cart' && onRemove && <button onClick={onRemove}>삭제</button>}
      {item.soldOut && variant === 'product' && <SoldOutBadge />}
      {item.soldOut && variant === 'cart' && <p>품절된 상품입니다. 삭제해 주세요.</p>}
    </li>
  );
}

prefer duplication over the wrong abstraction

AHA로 다시 쓰면 어떻게 달라질까?

// 요구사항 1 : 가격 표기는 상품 목록과 장바구니가 같은 규칙을 씁니다. 같은 목적을 가지니 따로 유틸 함수로 뺍니다.
export const formatPrice = (price: number) => `${price.toLocaleString('ko-KR')}원`;

function ProductCard({ product }: { product: Product }) {
  return (
    <li className="card">
      <img src={product.imageUrl} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{formatPrice(product.price)}</p>
      {/* 요구사항 2 : 상품 목록에서는 품절이면 뱃지만 보여 줍니다. */}
      {product.soldOut && <SoldOutBadge />}
      {/* 요구사항 3 : 상품 목록에서는 찜하기 버튼이 필요합니다. */}
      <WishButton id={product.id} />
    </li>
  );
}

function CartItem({ item, onRemove }: { item: CartItemData; onRemove: () => void }) {
  return (
    <li className="card">
      <img src={item.imageUrl} alt={item.name} />
      <h3>{item.name}</h3>
      <p>{formatPrice(item.price)}</p>
      {/* 요구사항 4 : 장바구니에서는 품절이면 삭제를 안내하는 문구를 보여 줍니다. */}
      {item.soldOut && <p>품절된 상품입니다. 삭제해 주세요.</p>}
      {/* 요구사항 5 : 장바구니에서는 수량 조절과 삭제가 필요합니다. */}
      <QuantityStepper itemId={item.id} />
      <button onClick={onRemove}>삭제</button>
    </li>
  );
}

마무리

참고 자료

• Kent C. Dodds, AHA Programming: https://kentcdodds.com/blog/aha-programming

• Sandi Metz, The Wrong Abstraction: https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction

• Cher Scarlett, Avoiding Hasty Abstractions (AHA programming): https://dev.to/cher/avoiding-hasty-abstractions-aha-programming-3d3b