항해 플러스 7기 7주차

드엔트론프·2025년 12월 7일

항해플러스

목록 보기

7/9

7주차

디자인 패턴과 함수형 프로그래밍 그리고 상태 관리 설계

이번주는 디자인 패턴과 함수형 프로그래밍 그리고 상태 관리 설계에 대해 진행했다!

KEEP

심화까지 처음 끝내본 것 같다..!
뭔가 평소 회사 일하면서도 리팩토링할 때 대충 훅으로만 분리하면 좋은거지! 하면서 작업했던 부분이 많았는데, 이제는 어떻게 해야 비즈니스 로직과 뷰 로직의 분리를 더 명확히 할 지에 대해 고민하고 작성할 수 있을 것 같다.
그 부분이 model 계층이었는데, 순수함수로 작성된 model 계층을 통해 훅에는 쓸데없이 비대해지게 작성되지 않으면서, model에 작성된 순수함수로 사이드 이펙트 없이 작업하여 테스트도 하기 쉬운 코드를 작성할 수 있었다.

  const getMaxApplicableDiscount = (item: CartItem): number => {
    const { discounts } = item.product;
    const { quantity } = item;
    
    const baseDiscount = discounts.reduce((maxDiscount, discount) => {
      return quantity >= discount.quantity && discount.rate > maxDiscount 
        ? discount.rate 
        : maxDiscount;
    }, 0);
    
    const hasBulkPurchase = cart.some(cartItem => cartItem.quantity >= 10);
    if (hasBulkPurchase) {
      return Math.min(baseDiscount + 0.05, 0.5); // 대량 구매 시 추가 5% 할인
    }
    
    return baseDiscount;
  };

여기 처음 작성된 getMaxApplicableDiscount 코드는 최대 가능 할인율을 계산하는 로직이다.
이 코드는 내부에서 기본적인 할인율을 계산하나느 baseDiscount와 대량 구매시 추가로 할인이 가능한 hasBulkPurchase 함수가 있다.
문제는 hasBulkPurchase 함수 같은 경우 cart라는, 장바구니 내용을 보게 되는데, 이는 함수 내부에서 cart라는 외부 변수를 참조하며, 동일한 item을 인수로 전달하더라도 cart 변수의 내용이 변경되면 함수의 결과가 달라질 수 있게 된다.

 /**
   * 상품의 기본 할인율 계산 (수량 기반)
   * @param item - 장바구니 아이템
   * @returns 기본 할인율 (0 ~ 1)
   */
  getBaseDiscount: (item: CartItem): number => {
    const { discounts } = item.product;
    const { quantity } = item;

    return discounts.reduce((maxDiscount, discount) => {
      return quantity >= discount.quantity && discount.rate > maxDiscount
        ? discount.rate
        : maxDiscount;
    }, 0);
  },

  /**
   * 대량 구매 보너스 할인율 계산
   * @param cart - 전체 장바구니
   * @returns 대량 구매 보너스 할인율 (0 또는 0.05)
   */
  getBulkPurchaseBonus: (cart: CartItem[]): number => {
    const hasBulkPurchase = cart.some((cartItem) => cartItem.quantity >= 10);
    return hasBulkPurchase ? 0.05 : 0;
  },

  /**
   * 적용 가능한 최대 할인율 계산
   * @param item - 장바구니 아이템
   * @param cart - 전체 장바구니 (대량 구매 체크용)
   * @returns 최대 할인율 (0 ~ 0.5, 최대 50%)
   */
  getMaxApplicableDiscount: (item: CartItem, cart: CartItem[]): number => {
    const baseDiscount = cartModel.getBaseDiscount(item);
    const bulkBonus = cartModel.getBulkPurchaseBonus(cart);

    // 기본 할인 + 대량 구매 보너스, 최대 50% 제한
    return Math.min(baseDiscount + bulkBonus, 0.5);
  },

각 함수는 각각의 입력값 item, cart이라는 명시적인 매개변수로 변경해, 동일한 입력에 대해 항상 동일한 출력을 보장하는 순수 함수를 정의하였다.
이는 테스트하기도 좋은 코드가 되며, 동일한 입력값, 동일한 출력값을 가지게 되는 순수 함수가 됐다.

2. jotai 쓰기

zustand나 context는 평소에 종종 쓰기에, 써보지 않았던 jotai를 사용했다.
jotai는 특히 소규모 프로젝트에 잘 어울린다고 한다.

// atoms/cart.ts
export const cartAtom = atomWithStorage<CartItem[]>("cart", []);

export const totalItemCountAtom = atom((get) => {
  const cart = get(cartAtom);
  return cart.reduce((sum, item) => sum + item.quantity, 0);
});

// hooks/useCart.ts

export const useCart = () => {

  const [cart, setCart] = useAtom(cartAtom);
  const totalItemCount = useAtomValue(totalItemCountAtom);

  ...