[12팀 김예솔] Chapter 2-3. 관심사 분리와 폴더구조

[yesol123]

과제 체크포인트

기본 과제

목표 : 전역 상태 관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 FSD 폴더 구조 적용하기

• 전역 상태 관리를 사용해서 상태를 분리하고 관리하는 방법에 대한 이해
• Context API, Jotai, Zustand 등 상태 관리 라이브러리 사용하기
• FSD(Feature-Sliced Design)에 대한 이해
• FSD를 통한 관심사의 분리에 대한 이해
• 단일 책임과 역할이란 무엇인가?
• 관심사를 하나만 가지고 있는가?
• 어디에 무엇을 넣어야 하는가?

체크포인트

• 전역 상태 관리를 사용해서 상태를 분리하고 관리했나요?
• Props Drilling을 최소화했나요?
• shared 공통 컴포넌트를 분리했나요?
• shared 공통 로직을 분리했나요?
• entities를 중심으로 type을 정의하고 model을 분리했나요?
• entities를 중심으로 ui를 분리했나요?
• entities를 중심으로 api를 분리했나요?
• feature를 중심으로 사용자 행동(이벤트 처리)를 분리했나요?
• feature를 중심으로 ui를 분리했나요?
• feature를 중심으로 api를 분리했나요?
• widget을 중심으로 데이터를 재사용 가능한 형태로 분리했나요?

심화과제

목표: 서버 상태 관리 도구인 TanstackQuery를 이용하여 비동기 코드를 선언적인 함수형 프로그래밍으로 작성하기

• TanstackQuery의 사용법에 대한 이해
• TanstackQuery를 이용한 비동기 코드 작성에 대한 이해
• 비동기 코드를 선언적인 함수형 프로그래밍으로 작성하는 방법에 대한 이해

체크포인트

• 모든 API 호출이 TanStack Query의 useQuery와 useMutation으로 대체되었는가?
• 쿼리 키가 적절히 설정되었는가?
• fetch와 useState가 아닌 선언적인 함수형 프로그래밍이 적절히 적용되었는가?
• 캐싱과 리프레시 전략이 올바르게 구현되었는가?

과제 셀프 회고

과제에서 좋았던 부분

• Zustand를 사용해 전역 상태를 분리하고 props drilling 없이 주요 상태들을 공유할 수 있었던 점이 좋았습니다.
• 처음에는 폴더 구조가 너무 많아져서 혼란스러웠지만, FSD 구조대로 entities, features, widgets, shared로 나눠가며 역할 단위로 코드를 나누는 감각을 익힐 수 있었습니다.
• PostFilter, PostsTable, PostDialog 같은 컴포넌트를 widgets에 위치 시키면서 재사용성을 고려하게 되었고, 단순히 화면에 필요한 컴포넌트를 그리는 것 이상의 고민을 하게 되었습니다.

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

• useQuery와 useMutation을 통해 API 호출의 로딩 상태나 성공/실패 후처리를 선언적으로 처리할 수 있다는 걸 경험했습니다. 기존에는 fetch + useState + useEffect로 로직이 분산 되었지만, 이제는 상태, 캐싱, 에러 처리까지 통합적으로 관리할 수 있게 되었습니다.
• 단순히 폴더만 나눈다고 FSD가 되는 게 아니라, 실제 데이터 흐름, UI, 비즈니스 로직이 어디에 속하는지 판단하는 능력이 더 중요하다는 걸 느꼈습니다.
• 기능 단위가 아닌 역할 단위로 나누는 연습이 꼭 필요하다는 점을 체감했습니다.

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

• Post 작성 기능을 하다가 분리를 지나치게 신경 쓰다 보니 기능 완성에 집중하지 못해 마무리하지 못한 점이 아쉬웠습니다.
• Dialog나 모달 상태를 useModalStore에서 관리했는데, 너무 많은 Dialog가 한 페이지에서 열릴 수 있다 보니 상태 충돌이 생기거나 조건 분기가 복잡해졌습니다. 이럴 땐 어떤 식으로 관리 구조를 개선하는 게 좋을지 궁금합니다.
• entities와 features의 구분이 처음엔 명확하지 않았습니다. 예를 들어, Post에 대한 타입과 api는 entities로 두고, 실제 글쓰기 로직은 features로 두었지만, UI나 Form 관련 코드는 어디에 둬야 할지 아직도 조금 헷갈립니다.

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

• 현재 Zustand로 상태를 분리하긴 했지만, Modal이나 Dialog 상태처럼 다양한 케이스를 관리할 때 더 좋은 패턴이 있는지 궁금합니다.
  예: 다이얼 로그 마다 상태를 따로 만들어야 할지, 하나의 전역 상태로 다룰지
• Post 관련 로직을 entities, features, widgets로 분리했는데, 지금 구조가 FSD의 의도에 맞게 잘 나눠진 것인지 리뷰 받고 싶습니다.
• Tanstack Query 사용 시, useQuery 키 설정을 ["posts", filter]처럼 했는데, 이 키 전략이 괜찮은지, 혹시 더 나은 전략이 있을지 조언 받고 싶습니다.
• 글쓰기 기능을 완성하지 못했는데, 분리와 설계에 너무 집중하다 보니 기능 개발이 느려졌습니다. 실제 실무에서도 이런 밸런스를 어떻게 잡아야 할지 조언 부탁 드립니다.