[15팀 김재환] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍 #39
Conversation
| interface UpdateFields { | ||
| name?: string; | ||
| code?: string; | ||
| discountType?: 'amount' | 'percentage'; | ||
| discountValue?: number; | ||
| } |
There was a problem hiding this comment.
이건 Partial 이렇게 사용해도 좋을 것 같아요!
오 Partial...!! 이런게 있었군요!! 감사합니다 👍
| export const checkExistingItem = (cart: CartItem[], product: Product) => { | ||
| return cart.find((item) => item.product.id === product.id); | ||
| }; |
|
분리를 너무 깔끔하게 잘 하셔서 감탄하고 갑니다...!!!! |
|
|
||
| export const useProducts = (initialProducts: Product[]) => { | ||
| return { products: [], updateProduct: () => undefined, addProduct: () => undefined }; | ||
| export const useProducts = (initialProductList: Product[]) => { |
There was a problem hiding this comment.
useProducts, 랑 product util 함수 로 각각 분리해서 작업하신거같은데
혹시 모두 product 값을 관리하는 코드가 맞을까요?!!? 맞다면 이건 그냥 제 개인적인 의견인데
product 상태값을 관리하는 함수가 하나의 파일에 묶여있지않아서 헷갈릴 수있을 것 같다 라는 생각이 들어 남겨봅니다!
There was a problem hiding this comment.
useProducts, 랑 product util 함수 로 각각 분리해서 작업하신거같은데 혹시 모두 product 값을 관리하는 코드가 맞을까요?!!? 맞다면 이건 그냥 제 개인적인 의견인데 product 상태값을 관리하는 함수가 하나의 파일에 묶여있지않아서 헷갈릴 수있을 것 같다 라는 생각이 들어 남겨봅니다!
의견 감사합니다!!! 제가 의도한 구조는 상태 관리를 위한 훅, 유틸은 순수계산 로직만 모아서 관심사를 분리한건데
구조가 조금 헷갈릴 수 있겠네요! 🤔
| <button | ||
| onClick={() => updateQuantity(item.product.id, item.quantity - 1)} | ||
| className="bg-gray-300 text-gray-800 px-2 py-1 rounded mr-1 hover:bg-gray-400" | ||
| > | ||
| - | ||
| </button> | ||
| <button | ||
| onClick={() => updateQuantity(item.product.id, item.quantity + 1)} | ||
| className="bg-gray-300 text-gray-800 px-2 py-1 rounded mr-1 hover:bg-gray-400" | ||
| > | ||
| + | ||
| </button> | ||
| <button | ||
| onClick={() => removeFromCart(item.product.id)} | ||
| className="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600" | ||
| > | ||
| 삭제 | ||
| </button> |
There was a problem hiding this comment.
동일한 props를 받는 요소인거 같아서 BUTTON 컴포넌트를 분리해보면 어떨까 라는 생각이 드네요!
There was a problem hiding this comment.
동일한 props를 받는 요소인거 같아서 BUTTON 컴포넌트를 분리해보면 어떨까 라는 생각이 드네요!
좋은 말씀 감사합니다! 컴포넌트 재사용성을 고려해서 더 세분화가 가능하네요👍
There was a problem hiding this comment.
저도 같은 의견입니다!
버튼 자체를 재사용하게끔 만들면 좋을 것 같습니다.
| cart.forEach((item) => { | ||
| const { price } = item.product; | ||
| const { quantity } = item; | ||
|
|
||
| totalBeforeDiscount += price * quantity; | ||
| totalAfterDiscount += calculateItemTotal(item); | ||
| }); |
There was a problem hiding this comment.
해당 부분 자체를 리듀서로 해보는건 어떤가요!
리듀서로 객체 자체를 만들어 보는 것이죠
There was a problem hiding this comment.
헉 그러네요!? 리듀서로 했으면 더 깔끔하고 분리해서 재사용도 가능했을 것 같아요! 감사합니다
| import { Product, Coupon, Discount } from '../../types'; | ||
|
|
||
| // 초기 상품 리스트 | ||
| export const initialProductList: Product[] = [ | ||
| { | ||
| id: 'p1', | ||
| name: '상품1', | ||
| price: 10000, | ||
| stock: 20, | ||
| discounts: [ | ||
| { quantity: 10, rate: 0.1 }, | ||
| { quantity: 20, rate: 0.2 }, | ||
| ], | ||
| }, | ||
| { | ||
| id: 'p2', | ||
| name: '상품2', | ||
| price: 20000, | ||
| stock: 20, | ||
| discounts: [{ quantity: 10, rate: 0.15 }], | ||
| }, | ||
| { | ||
| id: 'p3', | ||
| name: '상품3', | ||
| price: 30000, | ||
| stock: 20, | ||
| discounts: [{ quantity: 10, rate: 0.2 }], | ||
| }, | ||
| ]; | ||
|
|
||
| // 초기 쿠폰 리스트 | ||
| export const initialCouponList: Coupon[] = [ | ||
| { | ||
| name: '5000원 할인 쿠폰', | ||
| code: 'AMOUNT5000', | ||
| discountType: 'amount', | ||
| discountValue: 5000, | ||
| }, | ||
| { | ||
| name: '10% 할인 쿠폰', | ||
| code: 'PERCENT10', | ||
| discountType: 'percentage', | ||
| discountValue: 10, | ||
| }, | ||
| ]; | ||
|
|
||
| // 초기 할인 값 | ||
| export const INITIAL_DISCOUNT_STATE: Discount = { | ||
| quantity: 0, | ||
| rate: 0, | ||
| }; | ||
|
|
||
| // 초기 상품 값 | ||
| export const INITIAL_PRODUCT_STATE: Omit<Product, 'id'> = { | ||
| name: '', | ||
| price: 0, | ||
| stock: 0, | ||
| discounts: [], | ||
| }; | ||
|
|
||
| // 초기 쿠폰 값 | ||
| export const INITIAL_COUPON_STATE: Coupon = { | ||
| name: '', | ||
| code: '', | ||
| discountType: 'percentage', | ||
| discountValue: 0, | ||
| }; |
과제 체크포인트
기본과제
React의 hook 이해하기
함수형 프로그래밍에 대한 이해
Component에서 비즈니스 로직을 분리하기
비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
심화과제
뷰데이터와 엔티티데이터의 분리에 대한 이해
엔티티 -> 리파지토리 -> 유즈케이스 -> UI 계층에 대한 이해
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
특정 Entitiy만 다루는 함수는 분리되어 있나요?
특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?
데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?
과제 셀프회고
과제를 진행하면서 드는 생각이 사실 음... 이렇게 까지 관심사를 분리해야 하나? 싶기도 했다. 실무에서
리팩토링할 시간없이 기능 구현에 초점을 두고 항상 마감기간에 쫓겨서 작업 했던 기억만 떠오른다.
나중에 고쳐야지... 하면서 작업했던게 나중에 유지보수할 때 눈덩이처럼 불어서 나를 괴롭게 할 때 후회하곤 했다
과제에서 좋았던 부분
당장의 개발 속도는 더딜 수 있지만, 확장성과 유지보수성 측면에서 큰 이점이 있다는 것을 배웠다.
실무에서도 점진적으로 이런 패턴을 적용해볼 수 있을 것 같다.
과제를 하면서 새롭게 알게된 점
과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문