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

[grappe96]

배포 링크

과제의 핵심취지

• 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는 잘 제거했나요?

• 전체적으로 분리와 재조립이 더 수월해진 결합도가 낮아진 코드가 되었나요?

과제 셀프회고

• 12/1
  팀 스크럼을 하고 모르는 걸 모르는 사람들의 모임 (통칭 모모모)에 참가했다.
  나는 여전히 모르겠어서 그냥 App.tsx를 훑어보고, refactoring 폴더의 힌트를 보면서 우선 cart부터 나눠야겠다는 계획을 세워서 공유했다.

• 12/2
  전날 계획대로 CartPage를 분리하는데 coupon도 포함되고 notification도 사용되고 이러다보니 공용 컴포넌트가 먼저 분리되어야할 것 같다는 생각이 들었다.
  전체 프로젝트 구조를 빨리 파악하고 싶어 AI에게 분석 후 어떤 흐름으로 분리하면 좋을지 알려달라고 했더니 아래와 같은 추천을 받았다.

💡 추천 작업 순서
constants/index.ts → 초기 데이터 이동
utils/hooks/useLocalStorage.ts → 공통 훅 구현
utils/hooks/useDebounce.ts → 검색 디바운싱
utils/formatters.ts → 포맷 함수들
models/cart.ts → 계산 순수 함수들
hooks/useProducts.ts → 상품 관리
hooks/useCoupons.ts → 쿠폰 관리
hooks/useCart.ts → 장바구니 관리
components/CartPage.tsx → 쇼핑몰 UI
components/AdminPage.tsx → 관리자 UI
App.tsx → 라우팅만 담당

BottomUp이 분리하기 쉽겠구나! 하는 생각을 하면서 평큐를 듣는데
채영님의 엄청난 피그마를 보고 나도 프로젝트 구조를 직접 그려보면서 더 명확하게 파악하고 싶어졌다.
전에 한창 코딩테스트를 준비하면서 시뮬레이션 코드를 짤 때 바로 코딩하는 것보다 의사코드를 쭉 작성하고 코딩했을 때
디버깅하는 시간을 훨씬 줄일 수 있었는데, 막상 실무를 하면서는 빨리빨리라는 마음이 앞서
일단 코드부터 짜다가 나중에서야 발견하는 설계 오류가 종종 있었다.
그동안 프로세스를 개선해서 오류를 줄이는 것보다 일단 시작해야한다는 생각에 쫒겨 챙기지 못했던 부분이다.
모모모 2일차에 참여해서 사람들 의견을 들으면서,
대충 어떤 컴포넌트로 나누면 좋을지 App.tsx를 러프하게 손으로 나눠봤다.

• 12/3
  준일코치님 멘토링에도 질문을 남겼더니 코치님은 state부터 분리한다고 하셨다!
  엄청나게 빠른 속도로 슈슈슉 훅을 분리하고 뚝딱뚝딱 만들어가시는 과정이 신기했다.
  나도 저런 숙련도를 가지고 싶다는 생각이 들면서 이 과제를 통해 조금이라도 더 익숙해지는 경험이 되기를 바란다.

• 12/4
  열심히 훅을 중심으로 분리하기는 했는데 결국 useProduct 훅을 남겨두고 시간이 부족해서 PR을 먼저 쓰게 됐다.
  이번주는 요일마다 드는 생각을 간단하게 작성해뒀더니 매번 목요일에 잔뜩 커밋하고 제출하는건 같지만
  실제로는 어떤 흐름으로 과제를 했는지가 보여서 좋다.
  그렇지만 과제를 끝까지 하지 못한 부분이나, 몸살 기운으로 과제에 시간을 더 할애하지 못한 점이 많이 아쉽다.
  제출 상태로만 보면 매주 과제를 끝까지는 못하는 부분이 같지만 그래도 첫주에 과제를 보고 감도 못잡던 떄와
  PR에 뭐라도 작성하는 지금은 그래도 할 수 있는 만큼 해보려는 태도에서 많은 차이가 생긴 것 같다.
  항해가 끝나고 나서도 과제 다시 해보는 스터디에 들어가서 지금처럼 배우고 해보려는 태도를 유지하고 싶다.

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

개발 속도나 지식·경험이 아직 부족한 상황에서, 주어진 시간 안에 과제 제출의 완성도를 조금이라도 높일 수 있는 방법이 궁금합니다.
특히 제한된 시간 속에서 어떤 기준으로 우선순위를 정하고, 무엇부터 손대야 가장 효과적일지 코치님의 의견을 듣고 싶습니다!