[4팀 이연성] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍

[LEEYEONSEONG]

배포링크

• refactoring: https://leeyeonseong.github.io/front_5th_chapter2-2/index.refactoring.html

과제의 핵심취지

• 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으로 옮겨졌나요?

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

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

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

심화과제

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

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

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

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

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

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

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

과제 셀프회고

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

• UI 컴포넌트와 비즈니스 로직을 더 분리해서 코드를 더 깔끔하고 재사용성 좋게 만들려고 노력했습니다.
• 엔티티를 다루는 함수, 그렇지 않은 함수에 대해 이해하고 적용 해보려고 노력했다.

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

• 순수함수와 퓨어 훅의 경계를 더 명확히 설계하면 좋았을 것 같다는 아쉬움이 있습니다.

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

• 이번 과제의 핵심 중 하나가 순수 함수의 구현이라고 이해했는데,
  여기서 궁금한 점은 "순수 함수는 상태를 직접 변경하거나 외부 상태에 의존하지 않는다"는 점에서,
  상태를 다루는 로직은 context나 zustand 같은 전역 상태 관리 도구로 이동시키는 것이 더 맞는 방향인지 궁금합니다.
• 예를 들어 calculateCartTotal(cart) 같이 외부 상태에 의존하지 않는 함수는 분명 순수 함수이지만,
  그렇다면 반대로, useCart() 같은 훅에서 내부에 있는 상태를 관리하는 것보다는
  아예 zustand 같은 글로벌 스토어에서 cart 상태를 관리하는 편이 더 좋을까요?
• 순수함수와 상태관리의 역할 분리를 어디까지 명확히 해줘야 하는지가 아직 애매합니다.
  실무에서는 어느 정도 선까지 분리하는 것이 좋은 판단인지 조언을 듣고 싶습니다.
• 테스트 코드를 작성할때 프론트 기준 단위 테스트 , 통합 테스트, e2e테스트 가 있을때, 어디까지 테스트를 해야할까요??