[3팀 김나연] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍

[Blue-Kite]

과제 체크포인트

기본과제

• React의 hook 이해하기

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

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

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

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

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

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

심화과제

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

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

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

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

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

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

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

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

과제 셀프회고

컴포넌트에서 로직을 분리하고자 노력했으나 적절했는지 자신이 없어졌습니다. 컴포넌트 분리와 테스트 코드를 더 충실히 작성하지 못한 것은 아쉽습니다. 초반에 작성했던 훅은 그냥 함수랑 다른 게 없는 거 같아서 고민했는데 훅은 특정한 상태를 관리하는 함수라는 이야기를 듣고 수정해 보았습니다.

• 나름의 리펙토링의 기준

1. 직접적으로 entity를 다루는 부분은 가능하면 컴포넌트가 아닌 hook에서 하자
2. hook에서 상태를 관리하자
3. 입력받은 대로 처리하면서 딱히 화면에 변화가 생기게 하지 않는다면 계산 함수다...?

과제에서 좋았던 부분

• Custom hook과 함수형 프로그래밍에 대해 고민하는 과정

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

• 코딩에서 컴포넌트, 함수, 데이터의 관심사와 의존성을 고민하는 것의 중요성을 배웠습니다.

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

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

[BongjoonKim]

간단한 비즈니스 로직은 그냥 onChange={}안에 넣는 것도 좋은 생각인 것 같아요!
AdminPage.tsx에는 컴포넌트의 역할만 주고 함수 로직들은 따로 useAdminPage.ts나 useAdmin.ts에 넣어서 함수를 AdminPage.tsx에 불러오는 방식으로 했으면 어떨까 하는 생각이 듭니당!

[BongjoonKim]

validation 구조를 잘 잡으셔서 조건 거는 부분이 저보다 더 깔끔하게 코딩된 것 같아요. 참고하겠습니당