[3팀 이현동] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍 #11
Conversation
This file contains 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
- prettier, eslint-config-prettier, eslint-plugin-prettier 추가
- cart 추가 (계산 로직) - useCart, useCoupon, useProduct 추가 (액션 로직)
hdlee0619
changed the title
- components -> pages로 이동
- 장바구니 상태 저장하고 불러오기 - localStorage 유틸 함수
- useLocalStorage를 적용하면서 setState 사용방식(?) 때문에 오류가 난 것 같다.
- 상품 검색 훅
- import문 순서 수정 - index 수정
- debounce를 사용하면서 비동기적으로 바뀌어서 테스트코드 수정
|
유틸 함수와 커스텀 훅도 여러 개 많이 만드셨네요..!! 시간 부족하셨을텐데 대단합니다 👍👍 |
BongjoonKim
reviewed
Jan 18, 2025
There was a problem hiding this comment.
debounce 함수 테스트에 대해서 꼼꼼하게 작성해주셨네요!
debounce 테스트에서 어떤 타이핑을 친 순간에는 상품이 안 보이다가 300ms후에 상품결과가 보이는 테스트를 해보는 것도 괜찮을 것 같아요!
devsuzy
reviewed
Jan 18, 2025
Comment on lines
+39
to
+49
| // 쿠폰 적용 | ||
| if (selectedCoupon) { | ||
| if (selectedCoupon.discountType === "amount") { | ||
| totalAfterDiscount -= selectedCoupon.discountValue; | ||
| totalDiscount += selectedCoupon.discountValue; | ||
| } else { | ||
| const discountRate = selectedCoupon.discountValue / 100; | ||
| totalAfterDiscount *= 1 - discountRate; | ||
| totalDiscount = totalBeforeDiscount - totalAfterDiscount; | ||
| } | ||
| } |
There was a problem hiding this comment.
쿠폰 적용 부분도 계산 함수여서 저는 따로 계산 함수로 빼서 구현해봤습니다!
다음에는 이 부분도 분리해보시는걸 추천해요~!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
과제 체크포인트
✅ 기본과제
React의 hook 이해하기
함수형 프로그래밍에 대한 이해
Component에서 비즈니스 로직을 분리하기
비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
✅ 심화과제
뷰데이터와 엔티티데이터의 분리에 대한 이해
엔티티 -> 리파지토리 -> 유즈케이스 -> UI 계층에 대한 이해
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
특정 Entitiy만 다루는 함수는 분리되어 있나요?
특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?
데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?
과제 셀프회고
React를 이용하는 과제라 저번 과제보다는 많이 익숙했던 것 같아 그래도 수월하게 진행은 한 것 같다.
컴포넌트를 나누면서 애매한 경우가 많았던 것 같긴 하지만 그래도 처음보다는 훨씬 깔끔해진 것 같다.
하나의 파일에 많은 역할이 있으면 얼마나 코드가 보기 힘든지 알게 됐었고 적절히 나누는 것이 정말 중요하다는 것을 알게 되었다.
그리고 어떤 방식으로 나누어야할지도 알게 되어 좋았다. 액션, 계산 로직의 분리를 조금 깨달은 것 같아 좋았다.
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문
Product 페이지에서 컴포넌트를 분리해보았습니다.
위 코드에서 저는 EditProductForm에 index를 props로 넘겨주는게 싫어서 위처럼 작성했는데요.
이렇게 되면은 사실 제일 외각쪽 div의 스타일을 수정할 때 좀 번거로울 것 같긴 합니다. 이렇게 하는게 일반적일까요..? 이렇게 컴포넌트로 구분을 할 때 어디까지 잘라야할지(?) 애매할 때가 많을 것 같은데 어떻게 하는지 궁금합니다.