과제 링크

https://k-sang-soo.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과 라이브러리 훅과의 계층의 성격이 다르다는 것을 이해하고 적용했는가?

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

과제 셀프회고

지난 시간 동안 너무 향해에 몰두하고 있어 다른 쪽에도 시간을 분해해야 될 것 같아서 이력서에 많은 시간을 투자하게 됐다. 이번에는 또 이력서에 너무 몰두하느냐고 시간 분배를 잘못했다. 이번 과제가 하다보니 실무에서 내가 고민했던 부분들을 해소 할 수 있는 기회가 많은 과제였던 것 같은데 많은 시간을 쓰지 못해 진짜 너무 아쉽다... 왜 하필 또 향해에 몰두하는 시간을 줄이니까 이런 꿀 같은 과제가!!!!!😡

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

각 계층이 자신의 역할에 집중할 수 있도록 했습니다. 장바구니에 상품을 담는 로직을 예시로 들면

비즈니스 로직 계층

// ✅ models/cart.ts - 순수한 도메인 로직만 담당
export const addItemToCart = (cart: CartItem[], product: Product): CartItem[] => {
  const existingItem = cart.find(item => item.product.id === product.id);
  
  if (existingItem) {
    return cart.map(item =>
      item.product.id === product.id
        ? { ...item, quantity: item.quantity + 1 }
        : item
    );
  }
  
  return [...cart, { product, quantity: 1 }];
};

애플리케이션 계층

// ✅ hooks/useCart.ts - 상태 관리만 담당
export const useCart = () => {
  const [cart, setCart] = useState<CartItem[]>([]);
  
  const addToCart = useCallback((product: Product): OperationResult => {
    try {
      const newCart = addItemToCart(cart, product); // 📌 비즈니스 로직 위임
      setCart(newCart);
      return { success: { message: '상품이 장바구니에 추가되었습니다' } };
    } catch (error) {
      return { error: { message: '장바구니 추가 실패' } };
    }
  }, [cart]);
  
  return { cart, addToCart };
};

// ✅ components/CartPage.tsx - UI 표현과 사용자 상호작용 담당
const CartPage = () => {
  const { cart, addToCart } = useCart();
  const { addNotification, showNotifyFromResult } = useNotifications();
  
  const handleAddToCart = useCallback((product: Product) => {
    const result = addToCart(product); // 📌 상태 관리 계층 호출
    showNotifyFromResult(result);      // 📌 UI 표현 로직 실행
  }, [addToCart, showNotifyFromResult]);
  
  return (
    <div>
         <button
          onClick={() => handleAddToCart(product)}
          disabled={remainingStock <= 0}
          className={`w-full py-2 px-4 rounded-md font-medium transition-colors ${
            remainingStock <= 0
              ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
              : 'bg-gray-900 text-white hover:bg-gray-800'
          }`}
        >
          {remainingStock <= 0 ? '품절' : '장바구니 담기'}
        </button>
    </div>
  );
};

useCart는 상태를 관리하는 hook 이라고 생각했고, onShowNotification 같은 UI 로직을 그 안에서 다루고 싶지 않았습니다. 그래서 책임을 분리하기 위해, 사용처인 CartPage 에서 실행될 때만 onShowNotification으로 UI 로직을 처리하도록 했습니다. 지금은 필요 없지만, 나중에 실패/성공 여부나 타입에 따라 DOM을 조작하거나 외부 의존이 필요한 상황이 생기면, useCart 내부에서 관리하기가 더 어려워질 수 있기 때문에 이렇게 분리했습니다.

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

엔티티 컴포넌트, UI 컴포넌트 분리하는거 너무 재미있을 것 같았고, 하다 보면 궁금한 점도 많이 생겼을 텐데 시도를 못한게 아쉽습니다. 관라자 페이지 쪽도 거의 진행하지 못한 것도 아쉽습니다. 앞으로는 시간 분배를 더 잘해야될 것 같습니다.

함수를 어떻게 분리할지, 이 로직이 정말 이 책임 안에 있어야 하는지 등을 고민하는데 시간이 너무 오래 걸리는데, 이런 저런 고민들을 과제할 때 마다 너무 오랜 시간을 사용하다보니 정작 구현에 쓸 시간을 많이 놓치는 것 같아 아쉽네요

리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)

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

1. 표현식, 선언식 함수

Hook, 컴포넌트, 페이지, 유틸 함수를 만들 때 함수 표현식(const test = () =>)과 함수 선언식(function test() {})을 어떤 기준으로 나눠서 사용하시나요?

---

2. 함수 네이밍 (handleAddCart vs addCart)

이벤트 핸들러 실행 함수는 handleAddCart 처럼 handle 을 붙이는 편인데, 과제 코드에서는 addCart 처럼 동사형으로 사용하더라구요 handle을 붙이는 습관이 안 좋은 걸까요?

---

3. 목록 컴포넌트 설계 방식

아래처럼 ProductList 컴포넌트를 설계하는 여러 방식이 있을 때, 각각의 장단점과 선택 기준이 궁금합니다. 아직까지도 어떨 때 써야될지 기준이 헷갈리네요😢

<ProductList data={products} />

// Function as Children 패턴
<ProductList>
  {products.map(product => <ProductItem>{product.name}</ProductItem>)}
</ProductList>

// Render Props 패턴
<ProductList render={(products) => products.map(product => <ProductItem>{product.name}</ProductItem>} />

---

4. ViewModel을 class로 관리하는 방식

상품 UI 렌더링 시 분기문이나 변환 로직이 많을 경우, 아래처럼 ProductViewModel 클래스로 캡슐화해서 사용하는 건 어떻게 생각하시나요?

export class ProductViewModel {
  id!: string;
  name!: string;
  description?: string;
  price!: number;
  stock!: number;
  isRecommended?: boolean;
  discounts: Discount[] = [];

  constructor(init?: Partial<ProductViewModel>) {
    Object.assign(this, init);
  }

  /** 추천 상품 여부 (BEST 뱃지) */
  get isBest(): boolean {
    return this.isRecommended === true;
  }

  /** 할인 존재 여부 */
  get hasDiscount(): boolean {
    return this.discounts.length > 0;
  }

  /** 가장 높은 할인률 (0.2 → 20) */
  get maxDiscountRate(): number {
    return this.hasDiscount
      ? Math.max(...this.discounts.map((d) => d.rate)) * 100
      : 0;
  }

  /** 첫 번째 할인 규칙 */
  get primaryDiscount(): Discount | null {
    return this.discounts[0] ?? null;
  }

  /** 첫 번째 할인 수량 기준 (10개 이상 시) */
  get primaryDiscountQuantity(): number | null {
    return this.primaryDiscount?.quantity ?? null;
  }

  /** 첫 번째 할인률 (0.1 → 10) */
  get primaryDiscountRate(): number | null {
    return this.primaryDiscount ? this.primaryDiscount.rate * 100 : null;
  }
}

jsx 에서 사용할 때

기존

{product.isRecommended && (
  <span>BEST</span>
)}
{product.discounts.length > 0 && (
  <span>~{Math.max(...product.discounts.map((d) => d.rate)) * 100}%</span>
)}

변경 후

{product.isBest && (
  <span>BEST</span>
)}
{product.hasDiscount && (
  <span>~{product.maxDiscountRate}%</span>
)}

네이밍만 봐도 의미가 명확해지고, 변환 로직도 한 곳에서 관리 가능하다는 장점이 있어보이는데 실무에서는 사용해본 적이 없어서 좋은 코드인지 잘 모르겠습니다!

---

5. Header 분기 처리

페이지마다 Header에서의 분기 조건이 많아질 경우 어떻게 구조를 짜야될까요?

• 하나의 Header 컴포넌트를 세세하게 분리해서 재사용하는 것이 좋을지,
• 약간의 중복된 코드가 있더라도 페이지별로 Header를 별도 컴포넌트로 만들어 일부만 다르게 관리하는 것이 좋을지

---

6. useCart에서 Toast 로직 처리 위치

useCart 내부에서 Toast 훅을 사용하는 대신, 호출하는 쪽에서 Toast를 실행하게 했습니다. 이러한 부분이 책임 분리라는 측면에서는 좋아 보이지만, 오히려 쓸데없이 분리해서 복잡도가 늘린 건 아닌지 고민됩니다

---

7. 베럴 파일(Barrel File)에 대한 의견

베럴 파일 사용에 대해 긍정적인 의견과 부정적인 의견이 갈리는데, 주니어 입장에서 어떤 기준으로 판단하면 좋을까요? 코치님께서는 어떻게 사용하고 계신가요? 사용하고 계신다면 어떤 필요성에 의해서 사용하게 됐는지 궁금합니다!

---

8. 과제와는 직접적인 관련은 없지만 궁금한 점이 있습니다! 예를 들어 아래 블로그처럼 라이브러리, 프레임워크, 언어 등등 성능 테스트 결과를 보면, “6배 차이” 이런 단어 들은 수치상으로는 꽤 커 보이는 결과로 보이긴 하는데, 실제로는 그게 얼마나 느린 건지, 체감상 어느 정도 영향을 주는 건지 잘 와닿지가 않습니다. 이런 걸 구분하기 위해서는 어떤 감각이나 지식 같은게 필요한걸까요?

https://pawmi.tistory.com/15