[6팀 박창수] Chapter3-2. 디자인 패턴과 함수형 프로그래밍 그리고 상태 관리 설계

[changsu1993]

과제의 핵심취지

• 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는 분리되어 있나요?

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

심화과제

• 이번 심화과제는 Context나 Jotai를 사용해서 Props drilling을 없애는 것입니다.

• 어떤 props는 남겨야 하는지, 어떤 props는 제거해야 하는지에 대한 기준을 세워보세요.

• Context나 Jotai를 사용하여 상태를 관리하는 방법을 익히고, 이를 통해 컴포넌트 간의 데이터 전달을 효율적으로 처리할 수 있습니다.

• Context나 Jotai를 사용해서 전역상태관리를 구축했나요?

• 전역상태관리를 통해 domain custom hook을 적절하게 리팩토링 했나요?

• 도메인 컴포넌트에 도메인 props는 남기고 props drilling을 유발하는 불필요한 props는 잘 제거했나요?

• 전체적으로 분리와 재조립이 더 수월해진 결합도가 낮아진 코드가 되었나요?

https://changsu1993.github.io/front_7th_chapter3-2/

과제 셀프회고

과제를 하면서 내가 알게된 점, 좋았던 점은 무엇인가요?

• Cart, Product, Coupon 등 엔티티를 기준으로 코드를 분리하니 자연스럽게 책임이 명확해졌습니다.

이번 과제에서 내가 제일 신경 쓴 부분은 무엇인가요?

• utils → hooks → components 순서로 의존성이 흐르도록 설계했습니다
• 엔티티 데이터(product, item)는 props로 전달
• 액션/콜백은 컴포넌트 내부에서 스토어 직접 호출

이번 과제를 통해 앞으로 해보고 싶은게 있다면 알려주세요!

• Cart 컴포넌트를 <Cart.Item>, <Cart.Summary> 형태로 더 유연하게 구성해보고 싶습니다.
• 현재는 제공된 테스트를 통과시켰는데, 직접 유닛 테스트와 통합 테스트를 작성해보고 싶습니다.

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

• Product, Coupon, Cart를 각각 별도 스토어로 분리했는데, 하나의 스토어로 합치는 것이 더 나을까요?
• ProductCard에 product만 전달하고 나머지는 스토어에서 가져오도록 했는데, 이 기준이 적절한지 궁금합니다.