[6팀 박창수] Chapter 3-3 기능 중심 아키텍처와 프로젝트 폴더 구조#20
Open
changsu1993 wants to merge 10 commits intohanghae-plus:mainfrom
Open
[6팀 박창수] Chapter 3-3 기능 중심 아키텍처와 프로젝트 폴더 구조#20changsu1993 wants to merge 10 commits intohanghae-plus:mainfrom
changsu1993 wants to merge 10 commits intohanghae-plus:mainfrom
Conversation
- Claude Code 설정 파일 추가 - .claude/commands/ - 슬래시 커맨드 13개 - .claude/agents/ - 서브에이전트 10개 - .claude/skills/ - 스킬 8개 (21개 참조 파일) - CLAUDE.md - 프로젝트 컨텍스트 문서
- 의존성 추가: zustand, @tanstack/react-query, @tanstack/react-query-devtools - path alias 설정 (@/*) - tsconfig.app.json, vite.config.ts - FSD 폴더 구조 생성: - app/providers - widgets (posts-table, post-detail, user-profile) - features (add-post, edit-post, delete-post, post-search, post-filter, pagination, comment 기능들) - entities (post, comment, user, tag) - shared (ui, api, lib, store)
- Post 타입: Post, PostWithAuthor, PostsResponse, CreatePostRequest, UpdatePostRequest - Comment 타입: Comment, CommentsResponse, CreateCommentRequest, UpdateCommentRequest - User 타입: User, UsersResponse, UserSummary - Tag 타입: Tag, TagsResponse - 각 엔티티 model/index.ts barrel export 생성
- shared/ui: 기존 컴포넌트 이동 및 타입 추가 - Button, Input, Textarea - Card, CardHeader, CardTitle, CardContent - Select, SelectTrigger, SelectContent, SelectItem - Dialog, DialogContent, DialogHeader, DialogTitle - Table, TableHeader, TableBody, TableRow, TableHead, TableCell - shared/api: API 클라이언트 및 query keys - apiClient (get, post, put, patch, delete) - queryKeys (posts, comments, users, tags) - app/providers: QueryProvider (TanStack Query 설정)
- Post 엔티티: postApi, usePosts/useSearchPosts/usePostsByTag, PostTableRow - Comment 엔티티: commentApi, useComments, CommentItem - User 엔티티: userApi, useUser/useUsers, UserAvatar - Tag 엔티티: tagApi, useTags - 각 엔티티별 barrel export (index.ts)
- features/post-filter/model/store.ts: 필터 스토어 - searchQuery, selectedTag, sortBy, sortOrder - features/pagination/model/store.ts: 페이지네이션 스토어 - skip, limit, nextPage, prevPage - shared/store/useUIStore.ts: UI 상태 스토어 - 다이얼로그 상태 (add/edit post, add/edit comment, user modal) - 선택된 항목 (selectedPost, selectedComment, selectedUserId)
Post 기능: - add-post: 게시물 추가 다이얼로그 - edit-post: 게시물 수정 다이얼로그 - delete-post: 게시물 삭제 mutation hook - post-search: 검색 입력 컴포넌트 - post-filter: 태그 필터, 정렬 필터 UI - pagination: 페이지네이션 UI Comment 기능: - add-comment: 댓글 추가 다이얼로그 - edit-comment: 댓글 수정 다이얼로그 - delete-comment: 댓글 삭제 mutation hook - like-comment: 댓글 좋아요 mutation hook
- posts-table: 게시물 테이블 위젯 - 게시물 목록 테이블 UI - 태그 클릭, 사용자 클릭, 상세보기/수정/삭제 액션 - post-detail: 게시물 상세 위젯 - PostDetailDialog: 게시물 상세 다이얼로그 - CommentsList: 댓글 목록 (추가/수정/삭제/좋아요) - user-profile: 사용자 프로필 위젯 - 사용자 정보 다이얼로그 (이름, 이메일, 주소, 직장 등)
- PostsManagerPage 708줄 → 150줄로 대폭 간소화 - 모든 상태 관리를 Zustand 스토어로 이동 - 모든 서버 상태를 TanStack Query로 관리 - FSD 레이어 조합 방식으로 변경: - shared/ui: UI 컴포넌트 - entities: Post, Comment, User, Tag 데이터 - features: 검색, 필터, 페이지네이션, CRUD - widgets: 테이블, 다이얼로그 - components/index.tsx를 shared/ui 재export로 변경 - 빌드 성공 확인
모든 mutation hooks에 낙관적 업데이트 패턴 적용: 1. onMutate: 쿼리 취소 → 이전 데이터 스냅샷 → 캐시 업데이트 2. onError: 에러 발생 시 이전 데이터로 롤백 3. onSettled: 항상 쿼리 무효화하여 서버와 동기화 Post 기능: - useAddPost: 새 게시물 낙관적 추가 - useUpdatePost: 게시물 낙관적 수정 - useDeletePost: 게시물 낙관적 삭제 Comment 기능: - useAddComment: 새 댓글 낙관적 추가 - useUpdateComment: 댓글 낙관적 수정 - useDeleteComment: 댓글 낙관적 삭제 - useLikeComment: 좋아요 낙관적 업데이트 UI 개선: - 모든 버튼에 isPending 상태 표시 - 로딩 중 버튼 비활성화
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
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.
과제 체크포인트
기본과제
목표 : 전역상태관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 FSD 폴더 구조 적용하기
체크포인트
심화과제
목표: 서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기
체크포인트
최종과제
과제 셀프회고
이번 과제를 통해 이전에 비해 새롭게 알게 된 점이 있다면 적어주세요.
본인이 과제를 하면서 가장 애쓰려고 노력했던 부분은 무엇인가요?
아직은 막연하다거나 더 고민이 필요한 부분을 적어주세요.
이번에 배운 내용 중을 통해 앞으로 개발에 어떻게 적용해보고 싶은지 적어주세요.
챕터 셀프회고
클린코드: 읽기 좋고 유지보수하기 좋은 코드 만들기
결합도 낮추기: 디자인 패턴, 순수함수, 컴포넌트 분리, 전역상태 관리
응집도 높이기: 서버상태관리, 폴더 구조
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문