JungWoo0203 님의 상세페이지 ＞ [3팀 이정우] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍 🦍

[3팀 이정우] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍 🦍

by JungWoo02032025. 8. 8.

jungwoo0203.github.io/front_6th_chapter2-2/

과제의 핵심취지

  • 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는 분리되어 있나요?

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

심화과제

  • 이번 심화과제는 Context나 Jotai를 사용해서 Props drilling을 없애는 것입니다.

  • 어떤 props는 남겨야 하는지, 어떤 props는 제거해야 하는지에 대한 기준을 세워보세요.

  • Context나 Jotai를 사용하여 상태를 관리하는 방법을 익히고, 이를 통해 컴포넌트 간의 데이터 전달을 효율적으로 처리할 수 있습니다.

  • Context나 Jotai를 사용해서 전역상태관리를 구축했나요?

  • 전역상태관리를 통해 domain custom hook을 적절하게 리팩토링 했나요?

  • 도메인 컴포넌트에 도메인 props는 남기고 props drilling을 유발하는 불필요한 props는 잘 제거했나요?

  • 전체적으로 분리와 재조립이 더 수월해진 결합도가 낮아진 코드가 되었나요?

과제 셀프회고

과제를 하면서 내가 알게된 점, 좋았던 점은 무엇인가요?

이번 과제에서 내가 제일 신경 쓴 부분은 무엇인가요?

이번 과제를 통해 앞으로 해보고 싶은게 있다면 알려주세요!

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

  • Jotai atom 구조가 현재는 파일 하나(atoms.ts)에 몰려 있습니다. 도메인별 atom 모듈화하는 것이 좋을까요?
  • 할인 계산 로직을 cartModel 레이어까지 더 분리한다면 테스트 용이성이 높아질지 궁금합니다.

과제 피드백

수고했어요 정우, 잘했습니다!

Q) atoms등이 한 곳에 모여있는 것들과 아닌 것들에는 장단점이 있습니다. atom이 한 곳에 모여있으면 전체적으로 어떤 데이터들이 사용되는지를 코드에서 한눈에 파악할 수 있습니다. 만약 atom읙 개수가 많지않고 전체적인 코드에서 큰 비중이 없다면 한 곳에 모아두는 것도 좋은 선택입니다.

지금의 경우에는 도메인을 전연상태관리로 나눈것이기에 각 atom들이 서로 연관성이 있게 쓰이지 않습니다. 생각해보면 atom이 쓰이는 곳은 useAtom이 유일한데 그 곳이 useCart useProduct에서만 사용되고 있으니 그 쓰임이 가장 가까운데 두는데 좋다는 원칙에 따라 자연스럽게 도메인 별로 모듈화 되는 방향으로 놓이게 됩니다.

Q) 할인 계산 로직을 cartModel 레이어까지 더 분리한다면 테스트 용이성이 높아질지 궁금합니다.

=> 네 순수함수로 분리를 하는 만큼 확실하게 얻을 수 있는 이득입니다. 대신 잘게 쪼갤수록 props가 늘어나고 모듈화를 하기가 어렵다는 단점이 있습니다. 이런건 직접 해보면서 느끼는 게 제일 좋죠! 간단한 궁금증이 생길때에는 AI를 통해 코드를 구현시켜보고 직접 몸으로 느껴보면 큰 도움이 됩니다. 코딩은 이론보다도 감각적인 부분이 있거든요. 수고하셨습니다. 6주차 화이팅입니다!