[7팀 이지은] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍#52
Open
zlrlo wants to merge 20 commits intohanghae-plus:mainfrom
Open
Conversation
- CartList, ProductList 컴포넌트로 분리
- CouponManager, ProductManager
keyonnaise
reviewed
Apr 25, 2025
keyonnaise
left a comment
keyonnaise
left a comment
There was a problem hiding this comment.
지은님, 구직 활동과 항해를 병행하시느라 정말 정신없이 바쁘셨을 텐데, 그럼에도 불구하고 이렇게 많이 과제를 진행하신 것을 보니 정말 대단하시다는 생각이 듭니다! 우리 취뽀 성공해요!!
Comment on lines
+17
to
+29
| <ProductProvider> | ||
| <CouponProvider> | ||
| <main className="container mx-auto mt-6"> | ||
| {isAdmin ? ( | ||
| <AdminPage /> | ||
| ) : ( | ||
| <CartProvider> | ||
| <CartPage /> | ||
| </CartProvider> | ||
| )} | ||
| </main> | ||
| </CouponProvider> | ||
| </ProductProvider> |
There was a problem hiding this comment.
오프 코치님께서는 권장하지 않으셨지만, 저는 컨텍스트 헬 문제를 해결하기 위해 다음과 같은 방법을 시도해 보았습니다.
The React Context hell
제가 구현한 코드
관심 있으시면 한번 살펴보시고 의견 나눠주시면 감사하겠습니다!
Comment on lines
+29
to
+35
| <input | ||
| type="text" | ||
| placeholder="쿠폰 이름" | ||
| value={newCoupon.name} | ||
| onChange={(e) => setNewCoupon({ ...newCoupon, name: e.target.value })} | ||
| className="w-full p-2 border rounded" | ||
| /> |
There was a problem hiding this comment.
여러 인풋 요소들에서 동일한 클래스 명들이 반복적으로 사용되고 있어요. 이러한 인풋 요소들을 하나의 공통된 컴포넌트로 만들어 재사용하면 클래스 명을 중복해서 작성하는 수고를 줄이고, 코드의 일관성을 높일 수 있을 것 같습니다!
|
|
||
| // 새로운 핸들러 함수 추가 | ||
| const handleProductNameUpdate = (productId: string, newName: string) => { | ||
| if (editingProduct && editingProduct.id === productId) { |
There was a problem hiding this comment.
동일한 조건식이 여러 군데에서 반복적으로 사용되고 있는 것 같습니다. 이 조건식을 상위 스코프에 변수로 저장해두고 사용하면 코드가 훨씬 간결해지고 통일성도 높아질 것 같아요!
Comment on lines
+11
to
+16
| const [newProduct, setNewProduct] = useState<Omit<Product, 'id'>>({ | ||
| name: '', | ||
| price: 0, | ||
| stock: 0, | ||
| discounts: [], | ||
| }); |
There was a problem hiding this comment.
초기값을 상수로 따로 분리하거나, 초기화만을 담당하는 별도의 함수로 관리하면 다른 곳에서 재사용하기도 편리해질 것 같습니다!
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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의 책임에 맞도록 코드가 분리가 되었나요?
useCoupon,useProducthook 코드를 작성하였고, 각각의 hook은CouponProvider,ProductProvider에서 사용하였습니다.entities > cart > lib 경로에 cart entity에 필요한 계산 함수를 작성하였습니다.
getAppliedDiscount,calculateItemTotal,getMaxApplicableDiscount,calculateCartTotal,updateCartItemQuantity특정 Entitiy만 다루는 함수는 분리되어 있나요?
특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?
데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?
최대한 fsd 아키텍처 구조로 만들어보려고 노력했습니다.
의존성은 pages - widgets - features - entities - shared 로 관리하였습니다.
심화과제
심화 과제는 진행하지 못했습니다.
과제 셀프회고
과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?
fsd 아키텍처를 적용해보려고 노력했습니다.
과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문
FSD 구조에 맞게 폴더를 구성한 부분에 대해 리뷰해주시면 감사하겠습니다.