[3팀 김대현] Chapter3-2. 디자인 패턴과 함수형 프로그래밍 그리고 상태 관리 설계 #30
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- .claude/ 폴더 구조 생성 (agents, state, workflows, templates) - CLAUDE.md 프로젝트 가이드 작성 - 에이전트 레지스트리 설정 (orchestrator, code-writer, reviewer) - 프로젝트 목표 및 참고자료 정의 - Phase 0 초기화 로그 작성 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- models/, hooks/, components/, utils/ 폴더 구조 생성 - 순수 함수 일부 구현 (calculateCartTotal 등) - App.tsx 분리 작업 시작
- models/, hooks/, components/, utils/ 폴더 구조 생성 - 순수 함수 일부 구현 (calculateCartTotal, calculateItemTotal 등) - 컴포넌트 파일 분리 (AdminPage, CartPage, Header) - 커스텀 훅 파일 생성 (useCart, useProducts, useCoupons)
- storage.ts: localStorage Pub/Sub 유틸리티 추가 - toast.ts: props drilling 없는 Toast 이벤트 시스템 구현 - useLocalStorage: 타입 수정 (3요소 반환, 함수형 업데이트) - useProducts/useCoupons/useCart: 훅 구조 정리 - AdminPage: 컴포넌트 분리 (Product, Coupon, Admin)
- CartPage를 Cart, CartStockItem, ProductItem, PaymentContainer로 분리 - useCart, useCoupons, useProducts 훅 로직 정리 - CouponDiscount 컴포넌트 추가 - models/cart.ts 순수 함수 개선
- useProducts, useCoupons, useCart의 이중 상태 관리 제거 - useLocalStorage만 사용하여 단일 소스로 통합 - useLocalStorage에 빈 배열/undefined 자동 삭제 로직 추가 - useDebounce 반환값 개선: [즉시값, 디바운스값, setter] - ProductAccordion 가격 포맷 수정 (₩ → 원) - AdminPage에 remainingStock props 추가 테스트: 21개 전체 통과
- Jotai atoms 구현 - uiAtoms: isAdmin, searchTerm, debouncedSearchTerm - productAtoms: products CRUD (atomWithStorage) - couponAtoms: coupons, selectedCoupon, add/delete - cartAtoms: cart, totals, addToCart, updateQuantity, applyCoupon, completeOrder - Props drilling 제거 - App.tsx: 14개 props → 0개 - 모든 컴포넌트에서 useAtom/useAtomValue/useSetAtom 직접 사용 - 테스트 환경 설정 - renderWithJotai 유틸리티 추가 (Provider + createStore) - 테스트 간 atom 상태 격리 - 21개 테스트 모두 통과
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
과제 배포
과제의 핵심취지
과제에서 꼭 알아가길 바라는 점
기본과제
Component에서 비즈니스 로직을 분리하기
비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기
뷰데이터와 엔티티데이터의 분리에 대한 이해
entities -> features -> UI 계층에 대한 이해
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
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
AI 페어 프로그래밍을 위한 에이전트 설정 및 프로젝트 구조 파악
+12-2
기본과제 구조 설계 및 scaffolding, useLocalStorage 훅과 Pub/Sub 패턴 기반 toast 시스템 구현
+12-3
useProducts, useCoupons, useCart 훅 완성 및 cart.ts 순수 함수 분리, 컴포넌트 계층 구조 정리
+12-4
심화과제 Jotai 도입, 4개 atom 파일 구현 (ui/product/coupon/cart), Props drilling 완전 제거
과제를 하면서 내가 알게된 점, 좋았던 점은 무엇인가요?
엔티티 중심 설계의 중요성을 체감했습니다. cart, product, coupon 각각의 도메인별로 순수 함수(models/)와 상태 관리(hooks/ 또는 atoms/)를 분리하니 코드의 책임이 명확해졌습니다. 특히
calculateCartTotal,getRemainingStock같은 순수 함수들은 테스트하기 쉽고 재사용성이 높았습니다.Jotai의
atomWithStorage와 action atom 패턴을 통해 useState + useCallback 조합보다 훨씬 간결하게 전역 상태를 관리할 수 있다는 점을 알게 되었습니다.이번 과제에서 내가 제일 신경 쓴 부분은 무엇인가요?
Props drilling 제거 시 어떤 props를 남기고 어떤 것을 제거할지 기준을 세우는 것에 가장 신경 썼습니다.
결과적으로 App.tsx의 props가 14개 → 0개로 줄었고, 각 컴포넌트가 필요한 atom만 직접 구독하도록 개선했습니다.
이번 과제를 통해 앞으로 해보고 싶은게 있다면 알려주세요!
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)
폼 상태(editingProduct, productForm)를 선언한 컴포넌트와 자식 컴포넌트에서만 사용하여 로컬상태로 두었는데요. 폼 상태의 경우 이 처럼 로컬에 두는 것과 전역으로 올리는 것 중 어떠한 방법이 더 효율적일지 궁금합니다.
atomWithStorage사용 시 테스트 환경에서createStore()로 격리하는 방식 외에 더 좋은 패턴이 있는지 알고 싶습니다.