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

[kimfriendship]

과제의 핵심취지

• 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의 책임에 맞도록 코드가 분리가 되었나요?
• 계산함수는 순수함수로 작성이 되었나요?
• 특정 Entitiy만 다루는 함수는 분리되어 있나요?
• 특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?
• 데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?

심화과제

• 이번 심화과제는 Context나 Jotai를 사용해서 Props drilling을 없애는 것입니다.
• 어떤 props는 남겨야 하는지, 어떤 props는 제거해야 하는지에 대한 기준을 세워보세요.
• Context나 Jotai를 사용하여 상태를 관리하는 방법을 익히고, 이를 통해 컴포넌트 간의 데이터 전달을 효율적으로 처리할 수 있습니다.
• Context나 Jotai를 사용해서 전역상태관리를 구축했나요?
• 전역상태관리를 통해 domain custom hook을 적절하게 리팩토링 했나요?
• 도메인 컴포넌트에 도메인 props는 남기고 props drilling을 유발하는 불필요한 props는 잘 제거했나요?
• 전체적으로 분리와 재조립이 더 수월해진 결합도가 낮아진 코드가 되었나요?

과제 셀프회고

깃헙 페이지 링크

요랬는데

요래 됐습니다~

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

알게된 점:

• 컴포넌트 분리의 적정 수준: 무작정 잘게 쪼개는 것보다 200줄 정도까지는 한 파일에서 관리하는 게 더 나을 수 있다는 걸 체감했어요. Props drilling과 관리 복잡도 사이의 균형이 중요하다는 것을 배웠습니다.
• 도메인별 구조의 필요성: 처음엔 페이지 구성에 맞게 컴포넌트를 나눴지만, 어드민과 카트 페이지 양쪽에서 product, coupon을 쓰게 되면서 페이지 중심이 아닌 도메인 중심 구조가 필요하다는 걸 깨달았어요.
• FSD 아키텍처의 가치: FSD를 시도하다가, entities/features/widgets 계층 구분이 어려워서 아직 멀었구나 싶었습니다ㅜㅜ FSD가 무조건 좋다기 보다는 FSD가 가능해지면 계층을 나누고 단방향 흐름을 만들 수 있게 된다는 점이 좋은 것 같습니다.

좋았던 점:

• 테스트 코드의 가치: 리팩토링 과정에서 테스트 코드가 안전망 역할을 해준 게 정말 좋았던 것 같아요.
• Props hell 경험: 실제로 props hell을 겪어보면서 왜 상태 관리나 컨텍스트, 훅이 필요한지 체감할 수 있었어요.

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

도메인 계층 분리와 의존성 방향이 가장 신경 쓴 부분인 것 같아요:

• Product와 Cart 같이 두 개의 엔티티가 섞이는 상황에서 어떻게 의존성을 관리할지 고민하였습니다. "productCard에서 cart를 알지 않았으면 함"이라는 명확한 원칙을 세우고, 상위 레이어에서 처리하도록 구조를 잡아보았습니다.
• getRemainingStock 같은 함수를 어느 도메인에 위치시킬지, CartPage에서 formatPrice를 만들어 넘겨줄지 등 도메인 경계와 책임 분리에 대해 고민했습니다.
• 또 컴포넌트의 인터페이스가 좀 더 명확하도록 props 네이밍에도 신경을 썼습니다 (ex. completeOrder -> onPurchase)

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

• Shared UI 컴포넌트 시스템 구축: Select, Input, Button, Tab, Badge 같은 공통 컴포넌트들도 정리했으면 더 좋았을 것 같습니다.
• 도메인이 섞이는 부분의 베스트 프랙티스: "도메인이 섞이는 부분들이 있는데, 그건 어느 계층에서 로직을 작성해야 할까?" 더 고민해봐야 할 것 같습니다.

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

• getRemainingStock처럼 두 개 이상의 엔티티를 다루는 로직을 어떻게 분리하고 어디에 위치시켜야 할까요?
• view만 담당하는 컴포넌트들에서는 비즈니스 로직을 몰랐으면 해서, formatPrice 같은 유틸함수도 상위에서 props로 받게 했는데 이런 접근이 괜찮은지 궁금합니다.

멘토링 시간에 리팩토링을 할 때 왜 리팩토링을 하고 싶은지, 코드 스멜이 나는 이유는 무엇인지 스스로 생각해보고 시작하라고 하셨던 말씀이 도움이 많이 되었습니다. 감사합니다!