[4팀 윤영서] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍

[YeongseoYoon-hanghae]

과제 체크포인트

기본과제

• React의 hook 이해하기

• 함수형 프로그래밍에 대한 이해

• Component에서 비즈니스 로직을 분리하기

• 비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기

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

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

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

심화과제

• 뷰데이터와 엔티티데이터의 분리에 대한 이해

• 엔티티 -> 리파지토리 -> 유즈케이스 -> UI 계층에 대한 이해

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

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

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

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

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

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

과제 셀프회고

핑계지만 시간이 부족해서 기본적으로 나눌 것들만 나누고 좀 더 레이어에 대해 생각해보지 못한점이 아쉽습니다.

사실 실무에서 내가 짜고있는 이 코드가 이 레이어에 맞는가? 를 잘 생각하고 하지 않다보니 시간이 더디게 걸렸던 것 같은데, 그래도 이번 과제를 통해서 그런것들을 생각해볼 수 있어 좋았습니다. 또 과제를 진행하면서 훅이 너무 과도하게 책임을 가지고 있지는 않은지, 컴포넌트에서 어느정도까지 로직을 가지고 있어야 하는지에 대해서 많은 고민을 했던것 같습니다.

사실 위의 조건들을 충족하기 위해서는 컴포넌트를 정말 잘게 쪼개야 한다고 생각했는데요, 어느정도까지가 적절한지가 너무 궁금합니다.
제 코드상에서 ProductManagement나 CouponManagement의 경우 각각의 영역의 분리(어느정도는 관심사를 분리)하려고 하는 노력이었습니다만 평소에 제가 컴포넌트로 분리하지 않는 케이스라 이게 맞는걸까? 라는 생각을 계속했던 것 같습니다.

그리고 아쉬운점은...원래 기존에는 msw를 사용하여 디바운스 및 useProductSearch 훅을 구현하여 api 호출 및 모킹을 시도하려 했으나 기능 구현 후에 테스트가 깨지는 이슈가있어(비동기적으로 테스트를 처리했음에도 요소를 잡지 못하는 경우가 존재) 시도하다가 다시 돌렸던 점입니다.
조금 더 빨리 진행했다면 다시 회복할만한 시간이 있었을 것 같은데 개인적 사유로 인해 그러지 못했던 것이 아쉬움에 남습니다.

각 레이어에 대한 이해도가 낮은 것 같다는 생각이 드는데 혹시 추천해주실만한 아티클등이 있을까요?