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

[keyonnaise]

과제 체크포인트

기본과제

• React의 hook 이해하기

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

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

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

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

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

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

심화과제

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

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

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

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

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

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

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

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

과제 셀프회고

1챕터와 다르게 2챕터는 과제의 명확한 목표 지점이 정해져 있지 않아서 힘들었다.
이번 과제 같은 경우로 기본 과제의 경우 테스트 통과라는 명확한 목표점이 있어 보며 달리기 좋았는데, 심화 과제의 경우 목표들이 두루뭉술하여 길을 잃기 쉬었고 실제로 몇 번 길을 잃어 시간을 많이 버린 것 같다.
그래서 아직도 요번 과제를 완료 했는지 못했는지 판단이 잘 서지 않는다...

과제에서 좋았던 부분

특히 msw를 활용해서 api 모킹을 하는 부분이 재밌었다.
예전에 useQuery를 보며 공부 했던 기억을 떠올리며 커스텀 훅을 구현했는데, useQuery()와 같이 데이터와 비동기 상태를 반환해주는 훅이다.

// useAsync.ts

interface AsyncState<TData> {
  data: TData | null;
  error: Error | null;
  idling: boolean;
  loading: boolean;
  succeed: boolean;
  failed: boolean;
}

const handlers = {
  initial<TData>(initialData: TData | null = null): AsyncState<TData>{
    // ...생략
  }

  load<TData>(initialData: TData | null = null): AsyncState<TData>{
    // ...생략
  }

 success<TData>(data: TData): AsyncState<TData>{
    // ...생략
  }

  error<TData>(error: Error): AsyncState<TData> {
    // ...생략
  }
}

interface Options<TData extends any> {
  initialData?: TData;
  asyncFn: () => Promise<TData>;
}

export const useAsync = <TData = any>({ initialData, asyncFn: _asyncFn }: Options<TData>) => {
  // ...생략
}

대강 이렇게 생긴 훅이다.
다만 아쉬운 점은 간단한 캐싱 관련 로직도 넣어 볼 수 있을 것 같은 데 넣지 못한 점이랑 initialValue가 있을 경우 data의 타입이 TData | null 이 아닌 `TData로 고정되게 하고 싶은데 좀 더 타입스크립트를 공부해봐야겠다.

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

이번 챕터는 과제를 하면서 새롭게 알게 된 점이라기 보다 이미 알고 있는 사실을 좀 더 깊이 있게 다시 알게 된 것 같다는 느낌이 크다.
얼마나 내가 대충 알고 있었는지 자기반성도 하게 되고... 이제 과제도 마무리 했으니 다른 분들 코드 보면서 놓친 부분을 찾아보는 시간을 가져야겠다.

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

이번 과제를 하면서 기본과제 디렉토리, localstorage를 활용한 심화과제 디렉토리, msw를 활용한 심화과제 디렉토리 총 3개의 디렉토리를 만들게 되었다. 처음에는 하나의 디렉토리에서 잘 비비면 잘 해결할 수 있을 줄 알았는데 결국 해내지 못했다. 혹시 이럴 경우 좋은 해결 방법이 있는지 궁금하다.