과제의 핵심취지

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

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

과제 셀프회고

8월 10일 pr 작성 시작

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

아무래도 product, coupon, cart 3곳의 도메인을 어떻게하면 나눌 수 있을까 고민을 좀 했었던 거 같습니다.

저는 우선 처음에 UI 부분 컴포넌트를 나누는 작업 부터 시작했습니다.

저 같은 경우 컴포넌트 만드는 기준이

첫번째: 재활용되는 UI를 컴포넌트로 쪼개고 두번째: 다루는 데이터가 각각 다른 UI를 컴포넌트로 쪼겠습니다

이런 식으로 폴더구조를 잡았습니다. 다루는 데이터가 다른 UI 기준으로 컴포넌트를 만든 후 그 안에 해당 UI에서만 쓰는 재활용 컴포넌트를 넣는 방식으로요 만약 재활용 컴포넌트가 상품 UI뿐만 아니라 다른 도메인에서도 쓴다면 widget 폴더를 따로 생성해서 관리하려고 했습니다 :)

이렇게 컴포넌트를 나누면

의도하신 거 처럼 엄청난 props drilling이 발생했습니다. 이건 나중에 심화과제 시작할 때 해결하기로 했고

다음에는 비즈니스 로직을 분리하는 작업을 시작했습니다.

엔티티를 다루는 커스텀 훅을 각 도메인에 맞게 useCart, useCoupon, useProduct로 만들어서 뷰 로직에서 활용가능 하도록 각 컴포넌트에 선언해서 활용할 수 있게끔요 ㅇㅇ

이제 각 커스텀 훅에서 순수함수와 액션함수

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

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

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