Conversation
hardwoong
changed the title
hyesngy
left a comment
hyesngy
left a comment
There was a problem hiding this comment.
정말 고생 많으셨습니다! 👏🏻👏🏻👏🏻
이번 주 워크북을 통해 Redux Toolkit과 Zustand 두 가지 상태관리 라이브러리를 모두 다뤄보았습니다. 앞으로 프로젝트 복잡도나 규모에 따라 적절한 상태관리 도구를 선택할 수 있는 안목을 갖추게 되셨으면 좋겠습니다! 👍🏻👍🏻👍🏻
react-spring을 활용한 애니메이션 구현과 react-toastify로 사용자 피드백을 추가하는 등 인터랙션 디자인까지 세심하게 신경 쓴 점이 인상적입니다! 앞으로도 다양한 라이브러리를 적절히 활용하여, 단순히 기능만 구현하는 것을 넘어서, UX까지 고려하여 완성도 높은 작업을 이어가길 기대합니다! 😊
There was a problem hiding this comment.
현재 장바구니 데이터가 새로고침 시 초기화되고 있는데, Redux Toolkit의 redux-persist나 Zustand의 persist 미들웨어를 적용하여, 새로고침 후에도 장바구니 상태가 유지되도록 🚀Challenge 미션에 도전해 보시면 좋겠습니다!
| // 합계 자동 계산 | ||
| let amount = 0; | ||
| let total = 0; | ||
| state.cartItems.forEach((item): void => { | ||
| amount += item.amount; | ||
| total += item.amount * item.price; | ||
| }); | ||
| state.amount = amount; | ||
| state.total = total; |
There was a problem hiding this comment.
현재 useCartStore에서 각 액션마다 합계를 재계산하는 로직이 반복되고 있습니다.
Redux-toolkit 미션의 calculateTotals 액션처럼 별도 함수로 분리하면 코드 중복을 줄이고 유지보수성을 높일 수 있을 것 같습니다!
| const App = () => { | ||
| return ( | ||
| <Provider store={store}> | ||
| <Navbar /> | ||
| <CartList /> | ||
| <div className="flex justify-center items-center mt-4"> | ||
| <DeleteButton /> | ||
| </div> | ||
| <PriceBox /> | ||
| <Modal /> | ||
| <ToastContainer /> | ||
| </Provider> | ||
| ) | ||
| } |
There was a problem hiding this comment.
현재 미션 3의 App.tsx 에서 Redux의 Provider로 감싸고 있는데, 미션 3에서는 Zustand로 상태 관리를 전환했기 때문에 이 부분은 제거해야 합니다. 또한, store 폴더와 slices 폴더의 Redux 관련 파일들도 여전히 남아있는데, 프로젝트 구조를 명확하게 하기 위해 해당 파일들도 제거하는 것을 권장합니다!
2 participants
Create Week9 Mission1, 2, 3
📝 미션 번호
9주차 Misson 1, 2, 3
📋 구현 사항
📎 스크린샷
2025-05-26.10.12.51.mov
2025-05-26.10.13.37.mov
2025-05-26.10.32.51.mov
✅ 체크리스트
🤔 질문 사항