[9팀 김동한] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍

[LESANF]

과제 체크포인트

기본과제

• React의 hook 이해하기

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

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

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

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

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

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

심화과제

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

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

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

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

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

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

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

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

과제 셀프회고

이번과제는 관심사 분리, 확장성, 가독성에 좀더 집중해 볼 수 있는 과제였습니다.

기본과제까지는 쉽게 풀어나갔는데 msw로 api를 설정하는 부분에서 시간을 좀 잡아먹었어요

뭔가 머리로는 설계가 된 듯 싶었지만 막상 코드에 녹여내려고하니 막힌 부분이 많았어요

어떤 구조로 폴더를 구성할까 이런부분에서 많은 생각을 가지게 해줬던 과제같습니다 😊

---

과제에서 좋았던 부분

일단 msw를 사용한 API구현을 실제로 해본것은 처음이었어요

API를 모킹하여 react-query를 사용해서 문제를 풀어나갈 수 있다고 생각했는데 새로고침에대한 문제가 여전히 존재했습니다

만들어 놓은 핸들러에 localStorage를 추가하여 이를 해결했습니다.

API니까 당연히 프로젝트에서 내부적으로 프로젝트가 켜져있는동안 갱신에대한 값이 유지될 줄 알았는데 그게 아니었어요

그래서 msw에 대해 이번기회에 많이 배웠다고 생각합니다,

그리고 프로젝트가 어떤 성격에따라 어떤 구조로 구성되어야하는지 많이 생각했어요

---

과제를 하면서 새롭게 알게된 점

무조건 기능 별로 폴더를 구성하고 요소들을 분리해야지라는 관점에서 벗어났어요

저는 아래와같이 크게 분류를 해봤고 이러한 부분에서 구조를 잡는것에 정답이 없다는 것을 알았어요

어떤 프로젝트에 어떤 구조가 어울리며 엔티티를 구분하여 함수들을 보기쉽게 나누는 점을 새롭게 알게되었습니다

[도메인 중심 구조]
* 프로젝트가 도메인(비즈니스 로직)에 집중되고, 각 도메인이 독립적으로 성장해야 할 때 적합.
* 새로운 도메인을 추가하거나, 기능별 유지보수를 할 때 유리.

[레이어 중심 구조]
* 기능이 간단하거나, 여러 도메인 간에 공통된 레이어가 많을 때 적합.
* 규모가 작은 프로젝트 또는 단순한 CRUD 작업에 적합.

[기능 중심 구조]
* 팀이 여러 모듈을 병렬로 개발하고, 각 모듈이 독립적이어야 할 때 적합.
* 모노레포 스타일이나, 팀 간 분리된 책임이 중요한 프로젝트에서 추천.

크게 세가지 관점에서 정리하였고 이번 과제는 레이어 느낌이 났지만 뭔가 기능에 대한 느낌이 커서 도메인 중심 구조로 진행했습니다

구현을 하는 것도 어렵지만 시작전 구조를 잡는것도 그에 못지않게 많은 시간을 투자해야된다는 것을 배웠습니다

---

과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들

Q1) react-query를 이용하여 데이터를 받아서 화면을 구성할 때 useState를 쓰는 경우가 어떤경우가 있을까요 ?
Q2) 1번 질문에 이어서 만약 전역상태처리와 관련 될 경우 어떤식으로 hooks를 관리해야하는지 궁금합니다.

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

1. https://github.com/LESANF/front_4th_chapter2-2/tree/main/src/refactoring/models

- 이번 과제를하면서 정말 많이 구조를 변경했는데 models아래에서 관심사에따른 폴더를 생성하고 
   action으로 한번더 감싸서 기능에 대한 처리를 묶어봤어요. 
   헬퍼함수들을 모아서도 구성해봤지만 제입장에서는 cart를 구성하는 로직들이 모여있는게 좋아보여서 
   최종적으로 위와같은 구조로 구성했는데 이게 괜찮은 분할인지 궁금합니다.

2. react-query를 사용하여 데이터를 관리할 때 useState로 관리하는 경우가 어떤 경우일까요 ?

레퍼런스를 찾지못하였는데 아래의 코드에서 data를 바로쓰는게 아니라 페칭성공시 useState로 관리하는 경우가 있던데

어떤경우에 이런식으로 처리하는지 궁금해요

const { isPending, error, data } = useQuery({...})....

// data를 바로 사용하지않고 페칭에 대한 성공시 setState에 값을 갱신하는 경우...