배포 URL : https://jeongmingi123.github.io/front_6th_chapter2-2/

과제의 핵심취지

• React의 hook 이해하기
• 함수형 프로그래밍에 대한 이해
• 액션과 순수함수의 분리

과제에서 꼭 알아가길 바라는 점

• 엔티티를 다루는 상태와 그렇지 않은 상태 - cart, isCartFull vs isShowPopup
• 엔티티를 다루는 컴포넌트와 훅 - CartItemView, useCart(), useProduct()
• 엔티티를 다루지 않는 컴포넌트와 훅 - Button, useRoute, useEvent 등
• 엔티티를 다루는 함수와 그렇지 않은 함수 - calculateCartTotal(cart) vs capaitalize(str)

기본과제

• Component에서 비즈니스 로직을 분리하기

• 비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기

• 뷰데이터와 엔티티데이터의 분리에 대한 이해

• entities -> features -> UI 계층에 대한 이해

• Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?

• 주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?

• 계산함수는 순수함수로 작성이 되었나요?

• Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?

• 주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?

• 계산함수는 순수함수로 작성이 되었나요?

• 특정 Entitiy만 다루는 함수는 분리되어 있나요?

• 특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?

• 데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?

심화과제

• 재사용 가능한 Custom UI 컴포넌트를 만들어 보기

• 재사용 가능한 Custom 라이브러리 Hook을 만들어 보기

• 재사용 가능한 Custom 유틸 함수를 만들어 보기

• 그래서 엔티티와는 어떤 다른 계층적 특징을 가지는지 이해하기

• UI 컴포넌트 계층과 엔티티 컴포넌트의 계층의 성격이 다르다는 것을 이해하고 적용했는가?

• 엔티티 Hook과 라이브러리 훅과의 계층의 성격이 다르다는 것을 이해하고 적용했는가?

• 엔티티 순수함수와 유틸리티 함수의 계층의 성격이 다르다는 것을 이해하고 적용했는가?

과제 셀프회고

과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?

발제에 대한 내용에 대해 이해를 다 못하고 넘어가는 부분이 있어서 테오가 말씀주신 컴포넌트 7단계에 대해 정리했습니다. 확실히 정리를 하고 나니 재사용관점에서 어떤식으로 만들어야할지 조금 감이 잡힌거같습니다. URL : https://github.com/jeongmingi123/front_6th_chapter2-2/issues/1

또한 유틸함수를 분리하면서 유틸함수를 분리하는게 맞았을까 라는 생각을 했습니다.

기존 코드

// cartService.ts
export const calculateDiscountRate = (
  discountedPrice: number,
  originalPrice: number
): number => {
  if (originalPrice <= 0) return 0;

  return Math.round((1 - discountedPrice / originalPrice) * 100);
};

분리된 코드

// cartService.ts
export const calculateDiscountRate = (
  discountedPrice: number,
  originalPrice: number
): number => {
  if (originalPrice <= 0) return 0;

  const discountRate = (1 - discountedPrice / originalPrice) * 100;
  return roundNumber(discountRate);
};

// numberUtil.ts
export const roundNumber = (num: number): number => {
  return Math.round(num);
};

병준님이 조언해주신덕에 이해를 하게되었습니다. 내용 중 'Math.round를 roundNumber로 한번 더 감싼다는건 추상화된 데이터를 다시 추상화하는 것처럼 느껴진다고 말씀을 주셨고, 이렇게 되면 오히려 코드를 읽는 사람의 입장에서는 roundNumber가 어떤 역할을 하는 지 한 번 더 들여다보게 될 거 같다'라는 말씀을 해주셨고. 괜히 불필요하게 추상화를 한번 더 거치면 개발자 입장에선 한번 더 코드를 들여다보게되어 리소스가 발생한다는 부분을 이해했습니다. 병준님 정말 감사합니다.

교훈 : 추상화를 항상 생각하며 코드를 짜자!!

과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?

위의 컴포넌트 7단계에 대한 개념을 학습하는 와중에, 준형님에게 fsd패턴에 대해 배웠습니다. 가장 요즘 리액트에서 핫한 패턴이라고 들었는데, 이 부분에 대해 좀 더 알고 코드를 짰다면 좀 더 좋지 않았을까에 대한 생각이 듭니다.

또한 테오가 추천해준 함수형 코딩을 읽어보면서 아직 다 읽어본건 아니고 초반부이지만 .. 용어에 대해 개념을 잘몰랐는데 정리할 수 있는 기회가 있어서 좋았습니다.

입력 출력 개념정리

압묵적 입력

• 인자 외 다른입력
• 공유변수

압묵적 출력

• 리턴 값 외 다른 출력
• 공유변수

명시적 입력

• 함수 인자

명시적 출력

• 리턴 값
• 압묵적 출력은 리턴값으로 명시적 출력으로 바꿀 수 있음
• 함수안에서 전역배열을 바꾸기

액션 & 계산 정리

액션

• 함수안에 액션이 있다면 전체가 액션이 됨
• 전역변수를 읽으면 액션이됨.
• 압묵적 출력

계산

• 암묵적 입력이나 출력이 없어야함
• 압묵적 입력 → 인자로 바꾸기
• 압묵적 출력 → 리턴값으로 바꾸기
• 인자에만 의존해 정보를 가져오는 동작은 계산

리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문

안녕하세요. 제가 service 라는 폴더에 cartService라는 파일을 만들었는데, 밑의 코드를 어떤식으로 나눴어야할지에 대한 로직에 대한 고민이있습니다. (코드 URL : https://github.com/jeongmingi123/front_6th_chapter2-2/blob/main/src/advanced/service/cartService.ts)

import { CartItem, Coupon } from "../../types";
import { CartTotals, DiscountInfo } from "../types";
import {
  BULK_PURCHASE_THRESHOLD,
  BULK_PURCHASE_ADDITIONAL_DISCOUNT,
  MAX_DISCOUNT_RATE,
} from "../constants/cart";
import { roundNumber } from "../utils/number";

/**
 * 상품의 기본 할인율을 계산합니다.
 * @param discounts 상품의 할인 정보 배열
 * @param quantity 구매 수량
 * @returns 적용 가능한 최대 할인율
 */
const calculateBaseDiscount = (
  discounts: DiscountInfo[],
  quantity: number
): number => {
  if (!discounts || discounts.length === 0) {
    return 0;
  }

  return discounts.reduce((maxDiscount, discount) => {
    const isEligible = quantity >= discount.quantity;
    const hasHigherRate = discount.rate > maxDiscount;

    return isEligible && hasHigherRate ? discount.rate : maxDiscount;
  }, 0);
};

/**
 * 대량 구매 할인을 적용합니다.
 * @param baseDiscount 기본 할인율
 * @param cart 장바구니 아이템 배열
 * @returns 대량 구매 할인이 적용된 최종 할인율
 */
const applyBulkPurchaseDiscount = (
  baseDiscount: number,
  cart: CartItem[]
): number => {
  const hasBulkPurchase = cart.some(
    (cartItem) => cartItem.quantity >= BULK_PURCHASE_THRESHOLD
  );

  if (hasBulkPurchase) {
    return Math.min(
      baseDiscount + BULK_PURCHASE_ADDITIONAL_DISCOUNT,
      MAX_DISCOUNT_RATE
    );
  }

  return baseDiscount;
};

/**
 * 쿠폰 할인을 적용합니다.
 * @param totalAfterDiscount 쿠폰 적용 전 총액
 * @param selectedCoupon 선택된 쿠폰
 * @returns 쿠폰 적용 후 총액
 */
const applyCouponDiscount = (
  totalAfterDiscount: number,
  selectedCoupon: Coupon | null
): number => {
  if (!selectedCoupon) {
    return totalAfterDiscount;
  }

  if (selectedCoupon.discountType === "amount") {
    return Math.max(0, totalAfterDiscount - selectedCoupon.discountValue);
  }

  return roundNumber(
    totalAfterDiscount * (1 - selectedCoupon.discountValue / 100)
  );
};

/**
 * 장바구니 아이템의 총 할인율을 계산합니다.
 * @param item 장바구니 아이템
 * @param cart 전체 장바구니
 * @returns 적용 가능한 최대 할인율
 */
export const getMaxApplicableDiscount = (
  item: CartItem,
  cart: CartItem[]
): number => {
  const { discounts } = item.product;
  const { quantity } = item;

  const baseDiscount = calculateBaseDiscount(discounts, quantity);
  return applyBulkPurchaseDiscount(baseDiscount, cart);
};

/**
 * 장바구니 아이템의 총 가격을 계산합니다.
 * @param item 장바구니 아이템
 * @param cart 전체 장바구니
 * @returns 할인이 적용된 아이템 총 가격
 */
export const calculateItemTotal = (
  item: CartItem,
  cart: CartItem[]
): number => {
  const { price } = item.product;
  const { quantity } = item;
  const discount = getMaxApplicableDiscount(item, cart);

  return roundNumber(price * quantity * (1 - discount));
};

/**
 * 장바구니 아이템들의 기본 가격 정보를 계산합니다.
 * @param cart 장바구니 아이템 배열
 * @returns 기본 가격 정보
 */
const calculateBaseTotals = (cart: CartItem[]) => {
  return cart.reduce(
    (acc, item) => {
      const itemPrice = item.product.price * item.quantity;
      const itemTotal = calculateItemTotal(item, cart);

      return {
        totalBeforeDiscount: acc.totalBeforeDiscount + itemPrice,
        totalAfterDiscount: acc.totalAfterDiscount + itemTotal,
      };
    },
    { totalBeforeDiscount: 0, totalAfterDiscount: 0 }
  );
};

/**
 * 할인율을 계산합니다.
 * @param discountedPrice 할인된 가격
 * @param originalPrice 원래 가격
 * @returns 할인율 (0-100 사이의 정수)
 */
export const calculateDiscountRate = (
  discountedPrice: number,
  originalPrice: number
): number => {
  if (originalPrice <= 0) return 0;

  const discountRate = (1 - discountedPrice / originalPrice) * 100;
  return roundNumber(discountRate);
};

/**
 * 장바구니의 총 가격을 계산합니다.
 * @param cart 장바구니 아이템 배열
 * @param selectedCoupon 선택된 쿠폰
 * @returns 할인 전후 총 가격 정보
 */
export const calculateCartTotal = (
  cart: CartItem[],
  selectedCoupon: Coupon | null
): CartTotals => {
  // 빈 장바구니 처리
  if (!cart?.length) {
    return {
      totalBeforeDiscount: 0,
      totalAfterDiscount: 0,
    };
  }

  // 기본 가격 계산
  const baseTotals = calculateBaseTotals(cart);

  // 쿠폰 할인 적용
  const finalTotalAfterDiscount = applyCouponDiscount(
    baseTotals.totalAfterDiscount,
    selectedCoupon
  );

  // 최종 결과 반환
  return createFinalTotals(baseTotals, finalTotalAfterDiscount);
};

/**
 * 최종 가격을 반올림하여 반환합니다.
 * @param totals 계산된 가격 정보
 * @param finalTotalAfterDiscount 쿠폰 적용 후 최종 가격
 * @returns 반올림된 최종 가격 정보
 */
const createFinalTotals = (
  totals: { totalBeforeDiscount: number; totalAfterDiscount: number },
  finalTotalAfterDiscount: number
): CartTotals => {
  return {
    totalBeforeDiscount: Math.round(totals.totalBeforeDiscount),
    totalAfterDiscount: Math.round(finalTotalAfterDiscount),
  };
};

};

/**
 * 장바구니 아이템의 총 가격을 계산합니다.
 * @param item 장바구니 아이템
 * @param cart 전체 장바구니
 * @returns 할인이 적용된 아이템 총 가격
 */
export const calculateItemTotal = (
  item: CartItem,
  cart: CartItem[]
): number => {
  const { price } = item.product;
  const { quantity } = item;
  const discount = getMaxApplicableDiscount(item, cart);

  return roundNumber(price * quantity * (1 - discount));
};

/**
 * 장바구니 아이템들의 기본 가격 정보를 계산합니다.
 * @param cart 장바구니 아이템 배열
 * @returns 기본 가격 정보
 */
const calculateBaseTotals = (cart: CartItem[]) => {
  return cart.reduce(
    (acc, item) => {
      const itemPrice = item.product.price * item.quantity;
      const itemTotal = calculateItemTotal(item, cart);

      return {
        totalBeforeDiscount: acc.totalBeforeDiscount + itemPrice,
        totalAfterDiscount: acc.totalAfterDiscount + itemTotal,
      };
    },
    { totalBeforeDiscount: 0, totalAfterDiscount: 0 }
  );
};

/**
 * 할인율을 계산합니다.
 * @param discountedPrice 할인된 가격
 * @param originalPrice 원래 가격
 * @returns 할인율 (0-100 사이의 정수)
 */
export const calculateDiscountRate = (
  discountedPrice: number,
  originalPrice: number
): number => {
  if (originalPrice <= 0) return 0;

  const discountRate = (1 - discountedPrice / originalPrice) * 100;
  return roundNumber(discountRate);
};

/**
 * 장바구니의 총 가격을 계산합니다.
 * @param cart 장바구니 아이템 배열
 * @param selectedCoupon 선택된 쿠폰
 * @returns 할인 전후 총 가격 정보
 */
export const calculateCartTotal = (
  cart: CartItem[],
  selectedCoupon: Coupon | null
): CartTotals => {
  // 빈 장바구니 처리
  if (!cart?.length) {
    return {
      totalBeforeDiscount: 0,
      totalAfterDiscount: 0,
    };
  }

  // 기본 가격 계산
  const baseTotals = calculateBaseTotals(cart);

  // 쿠폰 할인 적용
  const finalTotalAfterDiscount = applyCouponDiscount(
    baseTotals.totalAfterDiscount,
    selectedCoupon
  );

  // 최종 결과 반환
  return createFinalTotals(baseTotals, finalTotalAfterDiscount);
};

/**
 * 최종 가격을 반올림하여 반환합니다.
 * @param totals 계산된 가격 정보
 * @param finalTotalAfterDiscount 쿠폰 적용 후 최종 가격
 * @returns 반올림된 최종 가격 정보
 */
const createFinalTotals = (
  totals: { totalBeforeDiscount: number; totalAfterDiscount: number },
  finalTotalAfterDiscount: number
): CartTotals => {
  return {
    totalBeforeDiscount: Math.round(totals.totalBeforeDiscount),
    totalAfterDiscount: Math.round(finalTotalAfterDiscount),
  };
};

위의 코드 보시면.. 좀 코드가 안좋습니다 ㅜㅜ

calculateBaseDiscount, applyBulkPurchaseDiscount, applyCouponDiscount, getMaxApplicableDiscount, calculateItemTotal, calculateBaseTotals, calculateDiscountRate, .... 등 함수가 여러개 있습니다.

service 라는 폴더의 파일들을 어떤기준으로 코드를 나누는지 궁금합니다. 제가 아직 개발자가 아니라 그런가.. 사실 도메인 로직으로 나눈다는 개념이 좀 어렵습니다 ㅜ ㅜ

저는 cartService 라는 파일에 한곳에 다 넣었지만, 코드를 만들면서 너무 많이 만들었나 생각이 들기도하고, 아니면 단일책임 원칙에 어긋나는거같은데..? 라는 생각이 들어 질문을 하게되었습니다.

다시 생각해보니 couponService(쿠폰관련된 로직), adminService(어드민관련된 로직), productService(제품 관련된 로직), cartService(장바구니 관련된 로직), ... 이런식으로 나눠야하는게 맞을지 생각이 들기도하더라구요.. 아니면 다른방안으로 했어야 할까요.?