[조수연] Payment 미션 Step2 (한번 더 리팩토링!...ing)

[suyeon1218]

구현하면서 어려웠던 점

• Primitive UI 를 제대로 이해하지 못했다는 아쉬움이 남아 한번더 리팩토링을 진행했습니다! 우선 cardList 페이지와 cardRegist 페이지만 리팩토링 하여 올려두었습니다! ㅠㅠ... 면접일정이 모두 끝나고 나면 다시 재도전 해야겠어요.
• 배포링크

컴포넌트 구조 변경

• FSD 아키텍쳐를 적용했습니다.
• page, slice, layer 의 3 depth 로 이뤄져 있는데 ui 같은 경우 layer 에서도 추가 depth가 필요하지 않나 싶어서... 확신은 없지만 일단 사용해 보았습니다!
• widgets, features 의 역할이 특히 헷갈려서 파일을 여기저기로 옮겨보는 시도를 한다고 도중에 시간을 많이 잡아 먹었습니다. 조금 더 자세히 공부할 필요가 있다고 생각합니다... ㅠㅠ
• 제가 잡아둔 체계라서 이해가 가는 건진 모르겠지만... 어떤 ui나 util 함수를 가져올 때 '이건 어느 폴더에 있겠다' 라는 생각이 바로바로 들었던 것 같아요.

Primitive UI

• 기능을 제공하고 스타일은 외부에서 부여하는 형식으로 컴포넌트를 재작성 했습니다.
• 그런데 Headless UI와는 어떤 차이점이 있는지 잘 몰라서... 이것도 더 공부할 영역입니다.
• ark ui 스타일과 chakra ui 를 조금 섞어서 만들어 보려고 했어요. 구조같은 건 chakra를 참조하고 Component.Root 와 같은 이름은 ark ui의 네이밍에서 따왔습니다.
• 이전이랑 비교했을 때 크게 변한 게 없는 것 같은데도 컴포넌트를 유연하게 잘 사용했다는 착각(?) 이 들었어요.
• 원래는 PropsWithChildren 과 CSSProperties 를 모두 일일이 작성했는데 ComponentProps 하나면 정리가 다 돼서 편리했습니다.
• 더불어 react-hook-form 도 뭔가 좀 더 사용하기 편리해진 느낌...? 이 듭니다. 저번보다 react-hook-form 라이브러리의 삽질을 훨씬 절 하게 됐어요.

궁금한 점 & 리뷰받고 싶은 점

FSD 아키텍쳐

• 이건 제가 공부를 더 해야하는 부분이지만... entities 에선 도메인 데이터를 담당하는데, 도메인 데이터를 어떻게 분리하는지 감이 잘 안와요. 저희 프로젝트에선 도메인 데이터가 CreditCard 만 있는 게 맞을까요?

• features 폴더는 사용자의 비즈니스 시나리오를 담당합니다! 예시로 댓글이 있다면 댓글 쓰기, 댓글 삭제 등이 이에 해당한다고 해요. 저희 프로젝트에선 카드 등록 (추가) / 카드 관리 (삭제, 편집) 으로 나눠봤는데... 이 시나리오로 나누는 게 맞는지 궁금합니다. ㅠㅠ