[11팀 서예림] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍

[yerimmseo]

배포 주소

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

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

과제 셀프회고

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

엔티티와 UI 컴포넌트를 최대한 명확하게 분리해보는 것을 목표로 폴더 구조에 신경을 썼습니다. 단순히 기능이 있는 컴포넌트를 묶는 것이 아니라, 이 컴포넌트는 어떤 책임과 역할을 가지고 있는지에 집중하여 설계해보았습니다.

src/
├── components/                
│   ├── ui/                 
│   │   ├── common/
│   │   └── layout
│   └── features/               
│       ├── cart/                
│       ├── product/ 
│       └── coupon/              
├── mocks/                 
├── contexts/                   
├── hooks/                       
├── pages/                       
├── types/                    
└── utils/               

UI 컴포넌트와 기능별 컴포넌트의 분리

components/ui 폴더는 어디서든 재사용 가능한 컴포넌트를 가지고 있습니다. 비즈니스 로직은 포함되어있지 않습니다.
components/features 폴더는 기능 중심의 컴포넌트로 구성했습니다.

~~> 이 부분은 작성 중이라 꼭 채워 놓겠습니다 ...ㅠㅠ

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

최근에 회사 일정이 바빠져서 충분한 시간을 들여 컴포넌트 분리를 세밀하게 하지 못한 점이 아쉽습니다. 중복되는 로직이나 UI가 있었음에도 완전히 추상화 하거나 공통으로 만들지 못한 부분들이 일부 남아있습니다...
특히 ProductEditForm.tsx 부분에서 내부 상태 관리나 핸들링 로직을 custom hook으로 분리했으면 가독성과 재사용성에 좋아졌을 것이라고 생각합니다. 지금은 아마 로직이 컴포넌트 내부에 있어서 구조도 복잡해져 있습니다.
또한 테스트 코드 작성에 충분한 시간을 들이지 못한 것이 아쉽습니다. 좀 더 다양한 상황에서 hook을 분리하고 활용하는 연습을 해봤더라면 좀 더 완성도 있는 구조가 되었을 것 같습니다.
주말에 테스트 작성 시나리오와 가이드를 바탕으로 간단하게라도 작성해보는 시간을 가져보겠습니다.

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

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

• custom hook으로 분리할 때, 재사용성 보다 더 중요한 기준이 있을까요?
  컴포넌트 내부 로직이 길어질 때 마다 custom hook으로 분리하는게 가독성에는 도움이 되지만 이게 정말 의미있는 추상화가 되는건지, 아니면 단순히 덩어리 나누기만 하고 있는 건 아닌지 헷갈릴 때가 있습니다.
  hook 분리 기준을 재사용성 외에 어떤 관점으로 바라보면 좋을까요?
• 로직을 hook으로 옮기면서 UI 컴포넌트는 가벼워졌지만 반대로 로직이 UI와 멀어져서 흐름 파악이 더 어려워진다고 느껴집니다. 이런 문제를 FSD처럼 feature 단위로 묶는 구조로 완화할 수 있다고 생각했지만 소규모 프로젝트에선 너무 과한 분리로 보일 수 있다는 고민이 생깁니다.
  작은 규모에서도 계층 구조나 도메인 분리를 적용할 때, 과한 설계가 되는 걸 방지하려면 어떤 기준을 세워야 하나요?
  규모에 따라 설계 깊이를 조절하는 기준을 어떻게 세우면 좋을까요?

[stoic-park]

Provider를 컴포넌트로 분리한부분이 깔끔하고 사용하기 좋아보입니다!

[Minhee-Jeon]

Product, Coupon, Cart 상태를 다루는 Provider를 한번에 사용하기 위해서 이렇게 Providers로 만든 방식 좋아보여요! 👍 배우고 갑니다 예림님

[03aquamarine]

components/common/ 폴더로 재사용 가능한 컴포넌트 만드신 부분 깔끔해보여서 좋아보입니다👍