[8팀 조영수] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍

[JYPPAP]

배포 링크

https://jyppap.github.io/front_5th_chapter2-2/index.refactoring.html

과제의 핵심취지

• 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과 라이브러리 훅과의 계층의 성격이 다르다는 것을 이해하고 적용했는가?

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

과제 셀프회고

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

최대한 읽기 편한 상태로 만드는 것이 목표입니다.
내용을 읽을 때 기능에 대해서 연상이 가능한 변수와 함수 명을 사용하는 것을 목표로 했습니다.
계산 함수라면 일단 model 폴더로 분류하였고, hook 에서 사용할 수 있도록 하였습니다.

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

현재 코드는 컴포넌트에서 props로 데이터 및 함수를 넘겨주고 있는 상태 입니다.
이 부분을 context 나 jotai 와 같은 것들을 활용해서 코드를 변경해보지 못한 것이 아쉬웠습니다.

또한 관리자 페이지 쪽의 작업을 하지 못한 것도 아쉬운 것 같습니다.

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

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

현재 AI를 이용해서 과제를 해결하고 있는데 이 방향이 맞는지 잘 모르겠습니다.

1. 과제에 대해서 생각을 정리해서 AI에게 이런 방향으로 작업하는게 맞는지 물어보기
2. 아는 부분만 조금 작성해보고 AI에게 설명의 형태로 답변 요청하기(코드 X)
3. 받은 답변을 보고 아는 부분만 작성해본 뒤 맞는지 AI에게 물어보기
4. 잘 모르겠다면 단계별로 주석의 형태로 만들어달라고 요청하기
5. 그래도 모르겠다면 AI에게 만들어달라고 요청한 뒤 해당 코드 분석

위와 같은 형태로 몇몇 과제를 하고 있는데 이런 방향이 옳은 방향인지 잘 모르겠습니다.

export const initFlashSaleFeature = (products) => {
  // TODO: FlashSaleService 인스턴스 생성

  // TODO: ProductUI 인스턴스 생성 (필요한 선택자 전달)

  // TODO: 초기 UI 설정
  // - 상품 목록 업데이트

  // TODO: 이벤트 구독 설정
  // - 'flashSale' 이벤트에 handleFlashSale 메서드 연결

  // TODO: 번개세일 타이머 시작

  // TODO: 정리 함수 반환 (앱 종료 시 리소스 정리용)
  // - 이벤트 리스너 제거
  // - 서비스 정리 함수 호출
};

4번의 예시로 2-1 과제에서는 위와 같이 만들어달라고 요청한 뒤 내용을 채워넣는 형태로 작업을 했었습니다.