[6팀 현채은] Chapter 3-3 기능 중심 아키텍처와 프로젝트 폴더 구조 #26
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
chen4023
changed the title
- @tanstack/react-query, @tanstack/react-query-devtools 추가 - axios dependencies로 이동 - tsconfig.app.json에 @/* path alias 설정 - vite.config.ts에 resolve alias 설정
- shared/api: axios 인스턴스 설정 - shared/ui: Button, Card, Dialog, Table, Select, Input, Textarea 분리 - shared/ui/layout: Header, Footer 분리 - shared/lib: highlightText 유틸리티 분리
- entities/post: types, dto, keys, api, hooks 분리 - entities/comment: types, dto, keys, api, hooks 분리 - entities/user: types, dto, keys, api, hooks 분리 - entities/tag: types, dto, keys, api, hooks 분리 - Query keys factory pattern 적용 - Request/Response DTO 분리
- features/post: add, edit, delete mutations - features/comment: add, edit, delete, like mutations - AddPostDialog, EditPostDialog 분리 - AddCommentDialog, EditCommentDialog 분리 - 낙관적 업데이트 적용
- widgets/posts-table: PostsTable 컴포넌트 - widgets/post-detail-dialog: PostDetailDialog, CommentsList - widgets/user-modal: UserModal 컴포넌트
- pages/posts-manager: PostsManagerPage 재구성 - app/providers: QueryProvider 설정 - app/App.tsx: Provider 연결 - 기존 components, pages, App.tsx, index.tsx 삭제
- .github/workflows/deploy.yml 추가 - vite.config.ts에 production base path 설정 - production 환경에서 dummyjson.com 직접 호출
- Zustand store 추가 (usePostsFilterStore, usePostDialogStore, useUserModalStore) - features/post/search: SearchInput 분리 - features/post/filter: TagFilter, SortFilter 분리 - features/post/pagination: Pagination 분리 - PostsManagerPage Props Drilling 제거 (7개 → 1개) - widgets에서 직접 store 접근으로 결합도 감소
- features/post/search/model/store.ts: 검색 상태 - features/post/filter/model/store.ts: 필터 상태 - features/post/pagination/model/store.ts: 페이지네이션 상태 - features/post/dialog/model/store.ts: 다이얼로그 상태 - features/user/modal/model/store.ts: 사용자 모달 상태 - 기존 통합 store.ts 삭제 - 각 feature가 자체 상태를 관리하도록 응집도 향상
- Create features/post/list/api/usePostsData.ts - Encapsulate posts query selection logic (posts, tagPosts, searchPosts) - Move sorting logic from page to hook - Return posts, total, isLoading - Simplify PostsManagerPage.tsx (124 lines → 63 lines) - Remove direct query calls and sorting logic - Use single usePostsData() hook for data - Move PostsManagerPage.tsx from ui/ folder to root Benefits: - Single responsibility: Page handles layout, hook handles data - Reusability: usePostsData can be used in other pages - Testability: Hook can be tested independently
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
과제 체크포인트 (토요일에 보완하겠습니다 ㅠㅠ)
배포 링크 : https://chen4023.github.io/front_7th_chapter3-3/
기본과제
목표 : 전역상태관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 FSD 폴더 구조 적용하기
체크포인트
심화과제
목표: 서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기
체크포인트
최종과제
과제 셀프회고
이번 과제를 통해 이전에 비해 새롭게 알게 된 점이 있다면 적어주세요.
fsd에 대한 개념은 알고있었지만, 실제 적용해 본 경험은 없었습니다.
사실 이전까지 fsd는 폴더구조를 중점으로 UI나 관심사를 분리하는 관점으로만 생각했다가, 의존성 방향을 단방향으로 맞춰야 한다는 것은 처음 알게 되었습니다.
상위 레이어가 하위 레이어를 참조하는 규칙을 지키게 되면, 자연스럽게 하나의 도메인을 기반으로 사용자의 액션이나 흐름이 읽혀질 수 있다는 점을 깨달을 수 있었습니다. 그치만 하나의 도메인에만 속해있는 것이 아닌 다른 도메인과 집합형태로 사용되는 경우는 아직까지 경계가 모호한 것 같다는 생각이 들었습니다.
ex. PostTable -> product + user 와 같은 집합.
본인이 과제를 하면서 가장 애쓰려고 노력했던 부분은 무엇인가요?
건강 이슈로 이번주는 시간이 없어서 아직 많은 고민을 해보지 못했습니다 ㅠ
아직은 막연하다거나 더 고민이 필요한 부분을 적어주세요.
이번에 배운 내용 중을 통해 앞으로 개발에 어떻게 적용해보고 싶은지 적어주세요.
챕터 셀프회고
클린코드: 읽기 좋고 유지보수하기 좋은 코드 만들기
결합도 낮추기: 디자인 패턴, 순수함수, 컴포넌트 분리, 전역상태 관리
응집도 높이기: 서버상태관리, 폴더 구조
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문
Widget과 Feature의 경계: PostsTable처럼 entities와 features를 조합하는 컴포넌트를 widget으로 분류했는데, 이 기준이 적절한지 피드백 부탁드립니다.
Zustand Store 분리 단위: 현재 searchStore, filterStore, paginationStore, postDialogStore, userModalStore로 나눴는데, 너무 세분화된 건 아닌지 궁금합니다. 혹은 더 합치거나 나눠야 할 부분이 있을까요?
TanStack Query 키 설계: 계층적 키 구조가 실무에서도 일반적으로 사용되는 패턴인지, 혹시 더 나은 방법이 있다면 알려주시면 감사하겠습니다.