[12팀 금정민] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍

[KumJungMin]

배포 링크

• https://kumjungmin.github.io/front_5th_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는 분리되어 있나요?

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

심화과제

• 재사용 가능한 Custom UI 컴포넌트를 만들어 보기

• 재사용 가능한 Custom 라이브러리 Hook을 만들어 보기

• 재사용 가능한 Custom 유틸 함수를 만들어 보기

• 그래서 엔티티와는 어떤 다른 계층적 특징을 가지는지 이해하기

• UI 컴포넌트 계층과 엔티티 컴포넌트의 계층의 성격이 다르다는 것을 이해하고 적용했는가?

• 엔티티 Hook과 라이브러리 훅과의 계층의 성격이 다르다는 것을 이해하고 적용했는가?

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

[KumJungMin]

커밋 메시지와 type이 올바르게 작성되었나?

이전 과제에 피드백해주신 걸 오늘 확인하여, 이번 과제 기준으로 GPT에서 피드백 요청해보았습니다

어떤 부분을 잘못 쓰고 있는지(answer by. GPT)

현재 타입	제안 타입	설명
remove:	refactor: 또는 chore:	코드 삭제도 리팩터링 작업의 일종이므로 refactor: 로, 혹은 단순 정리라면 chore: 로 변경
move:	refactor: 또는 chore:	파일·폴더 이동 역시 기능 변화가 없으므로 refactor: 또는 chore: 로 통일
type:	refactor:	타입 변경·통일은 코드 구조를 개선하는 작업이니 refactor: 가 더 적합

어떻게 수정해야할지(answer by. GPT)

remove / move / type 은 표준 타입이 아니므로,
코드 구조 변경(삭제·이동·타입 변경)은 refactor: 로 통일하는 것이 명확합니다. Conventional Commits
만약 “순수하게 정리(chore)” 성격이 강하다면 chore: 를 대신 사용할 수도 있습니다.
이렇게 하면 모든 커밋이 Conventional Commits 스펙에 부합하게 됩니다.

Before	After
remove: useDiscount 제거하기	refactor: useDiscount 로직 제거하기
move: ui 폴더 위치 변경하기	refactor: ui 컴포넌트 폴더 이동하기
type: type을 interface로 통일하기(props에 한해)	refactor: props 타입을 interface로 통일하기

style과 refactor를 구분하는 기준(answer by. GPT)

타입	목적	예시
style	오직 코드 포맷팅·스타일만 변경 — 문법·기능에 영향 없음	- 공백·들여쓰기 수정 - 세미콜론·따옴표 스타일 통일 - Linter 자동 포맷팅 적용
refactor	기능 추가(feat), 버그 수정(fix)이 아니면서 코드 구조·설계 개선	- 함수·변수명 리네이밍 - 모듈·폴더 이동 - 중복 로직 합치기 - 컴포넌트 분할·병합