[11팀 이민기] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍

[lapidix]

과제의 핵심취지

• 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의 책임에 맞도록 코드가 분리가 되었나요?

• 계산함수는 순수함수로 작성이 되었나요?

• Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?

• 주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?

• 계산함수는 순수함수로 작성이 되었나요?

• 특정 Entitiy만 다루는 함수는 분리되어 있나요?

• 특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?

• 데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?

심화과제

• 재사용 가능한 Custom UI 컴포넌트를 만들어 보기

• 재사용 가능한 Custom 라이브러리 Hook을 만들어 보기

• 재사용 가능한 Custom 유틸 함수를 만들어 보기

• 그래서 엔티티와는 어떤 다른 계층적 특징을 가지는지 이해하기

• UI 컴포넌트 계층과 엔티티 컴포넌트의 계층의 성격이 다르다는 것을 이해하고 적용했는가?

• 엔티티 Hook과 라이브러리 훅과의 계층의 성격이 다르다는 것을 이해하고 적용했는가?

• 엔티티 순수함수와 유틸리티 함수의 계층의 성격이 다르다는 것을 이해하고 적용했는가?

배포 링크

https://mingi3442.github.io/front_5th_chapter2-2/

과제 셀프회고

과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?

이전 과제에서 받은 피드백에 대해서 고려했습니다.
FSD를 기준으로 슬라이스에서 저는 개인적으로 슬라이스에서 내보내는 것이 나중에 import시에도 깔끔하다고 생각이 들어서 슬라이스 혹은 세그먼트에서 내보내는 것에 대해서 질문을 드렸었고,
뭔가 깔끔할 것 같다라는 관점으로 접근하는것보다는 이 FSD에서 왜 굳이 폴더마다 index를 두고 공개하고자하는 인터페이스를 export 해서 쓰는지 관점으로 공부해보면 좋을 것 같다는 말씀을 해주셔서, 제가 생각해도 정말 이상한 것에 집착했던거 같다는 생각이 들어서 이 부분에 대해서도 신경을 썼던 것 같습니다.
이를 포함해서 좀 더 적절하게 코드를 위치시키기 위해 신경썼습니다

과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?

갑자기 회사일이 몰아쳐서 시간이 모자랐던게 너무 아쉽습니다.
cart도 ContextAPI로 관리하여 CartPage에서 props로 넘기는 것을 지우려고 했는데 그러지 못했고, 쿠폰 입력 폼도 분리할 수 있었는데 그러지 못한 것과 form에 관련된 훅을 별도로 분리하지 못한게 너무 아쉬웠습니다..

그러나 전체적으로 useLocalStorage를 구현하면서 로컬 스토리지 안에서도 같은 도메인 내 다른 탭/창에서 로컬 스토리지가 변경되었을 때 발생하는 이벤트를 StorageEvent라는 이벤트 타입으로 인식할 수 있다는 점을 새로 배웠습니다.
Web API와 DOM 타입에 대해서는 정말 다양한게 많다는 생각이 들었습니다.

그리고 이전 과제에서 코치님께 질문 드렸던 주석에 대해서 좋은 자료와 함께 피드백 주셨는데 정작 이번에 주석을 잘 써보려는 노력을 못한게 아쉽습니다.

마지막으로 테스트 코드에서 중복되는 부분을 좀 더 다듬을 수 있었을 텐데 못한게 너무 아쉽고 항해 이후에 다시 수정해볼 예정입니다.

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

리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문

1. FSD에서는 하위 레이어만을 사용해야하는 규칙이 있는데, 엔티티끼리 의존할 수 있다고 생각이 듭니다. 예를 들면 이번 과제에서 Product와 Discount가 그런 예시가 될 수 있다고 생각합니다. 이럴 경우 Product가 entities에 있다고 Discount를 shared 레이어로 옮기는 것이 더 말이 안된다고 생각이 드는데 저는 개인적으로 FSD를 사용하더라도 같은 레이어까지는 허용해도 괜찮지 않을까 생각이 듭니다.. 제 생각에 대한 코치님의 생각이 궁금합니다!
2. 만약 코치님이라면 위의 상황에서 Product와 Discount를 별도로 가져가지 않고 Product내부에서만 관리하는 선택을 하셨을지도 궁금합니다!
3. 특정 블록체인 해커톤에 참가하시면 컨셉이라던지 아니면 미리 어느정도 DApp을 만들어서 참여하는 사람들도 있는지 궁금합니다!
4. Web2랑 Web3 둘 다 프론트엔드 경험이 있으신 걸로 아는데, 직접 해보시니까 어떤 점들이 가장 다르게 느껴지셨어요? Web3 개발할 때 특히 유의할 점이나 팁 같은 게 있을까요?