[5팀 오새듬] Chapter 3-3 기능 중심 아키텍처와 프로젝트 폴더 구조

[Toeam]

https://toeam.github.io/front_7th_chapter3-3/

과제 체크포인트

기본과제

목표 : 전역상태관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 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가 아닌 선언적인 함수형 프로그래밍이 적절히 적용되었는가?
• 캐싱과 리프레시 전략이 올바르게 구현되었는가?
• 낙관적인 업데이트가 적용되었는가?
• 에러 핸들링이 적절히 구현되었는가?
• 서버 상태와 클라이언트 상태가 명확히 분리되었는가?
• 코드가 간결하고 유지보수가 용이한 구조로 작성되었는가?
• TanStack Query의 Devtools가 정상적으로 작동하는가?

최종과제

• 폴더구조와 나의 멘탈모데일이 일치하나요?
• 다른 사람이 봐도 이해하기 쉬운 구조인가요?

과제 셀프회고

src/
├── shared/
│ ├── api/
│ │ └── client.ts # 공통 API 클라이언트
│ ├── config/
│ │ └── constants.ts # 공통 상수
│ ├── lib/
│ │ ├── queryClient.ts # QueryClient 설정 (TanStack Query 준비)
│ │ ├── queryKeys.ts # 쿼리 키 팩토리 (TanStack Query 준비)
│ │ ├── dateUtils.ts # 날짜 포맷팅 유틸리티
│ │ ├── highlightText.tsx # 텍스트 하이라이트 유틸리티
│ │ └── urlUtils.ts # URL 파라미터 관리 유틸리티
│ └── ui/ # 공통 UI 컴포넌트 (Button, Card, Dialog, Input, Select, Table, Textarea, Avatar, Badge, Text 등)
│
├── entities/
│ ├── post/
│ │ ├── api/
│ │ │ └── postApi.ts # Post API 함수
│ │ ├── model/
│ │ │ ├── store.ts # PostStore (Zustand) - 서버 상태 관리
│ │ │ └── types.ts # Post, PostAuthor 타입
│ │ └── ui/ # PostAuthor, PostRow, PostTag
│ ├── comment/
│ │ ├── api/
│ │ │ └── commentApi.ts # Comment API 함수
│ │ ├── model/
│ │ │ ├── store.ts # CommentStore (Zustand) - 서버 상태 관리
│ │ │ └── types.ts # Comment 타입
│ │ └── ui/ # CommentItem
│ └── user/
│ ├── api/
│ │ └── userApi.ts # User API 함수
│ ├── model/
│ │ ├── store.ts # UserStore (Zustand) - 서버 상태 관리
│ │ └── types.ts # User 타입
│ └── ui/
│
├── features/
│ ├── post/
│ │ ├── model/
│ │ │ ├── usePostList.ts # 게시물 목록 조회 (Store 사용)
│ │ │ ├── usePostSearch.ts # 게시물 검색 (Store 사용)
│ │ │ ├── usePostSort.ts # 게시물 정렬 (로컬 상태 + 정렬 로직)
│ │ │ ├── useTagFilter.ts # 태그 필터링 (Store 사용)
│ │ │ ├── usePostCreate.ts # 게시물 생성 (Store 사용)
│ │ │ ├── usePostUpdate.ts # 게시물 수정 (Store 사용)
│ │ │ ├── usePostDelete.ts # 게시물 삭제 (Store 사용)
│ │ │ ├── usePostFilters.ts # URL 파라미터 및 필터 상태 관리
│ │ │ ├── usePostPagination.ts # 페이지네이션 로직
│ │ │ ├── usePostCreateModal.ts # 게시물 생성 모달 상태 관리
│ │ │ ├── usePostEditModal.ts # 게시물 수정 모달 상태 관리
│ │ │ └── usePostDetailModal.ts # 게시물 상세 모달 상태 관리
│ │ └── ui/ # PostSearchInput, PostSortControls, PostTagFilter, PostPagination
│ ├── comment/
│ │ └── model/
│ │ ├── useCommentList.ts # 댓글 목록 조회 (Store 사용)
│ │ ├── useCommentCreate.ts # 댓글 생성 (Store 사용)
│ │ ├── useCommentUpdate.ts # 댓글 수정 (Store 사용)
│ │ ├── useCommentDelete.ts # 댓글 삭제 (Store 사용)
│ │ └── useCommentLike.ts # 댓글 좋아요 (Store 사용)
│ └── user/
│ └── model/
│ ├── useUserDetail.ts # 사용자 상세 조회 (Store 사용)
│ └── useUserModal.ts # 사용자 모달 상태 관리
│
├── widgets/
│ ├── post-list/
│ │ └── ui/
│ │ └── PostList.tsx # 게시물 목록 위젯
│ ├── post-detail/
│ │ └── ui/
│ │ └── PostDetail.tsx # 게시물 상세 위젯
│ ├── post-create-modal/
│ │ └── ui/
│ │ └── PostCreateModal.tsx # 게시물 생성 모달 위젯
│ ├── post-edit-modal/
│ │ └── ui/
│ │ └── PostEditModal.tsx # 게시물 수정 모달 위젯
│ ├── comment-list/
│ │ └── ui/
│ │ └── CommentList.tsx # 댓글 목록 위젯
│ └── user-modal/
│ └── ui/
│ └── UserModal.tsx # 사용자 정보 모달 위젯
│
└── pages/
└── PostsManagerPage.tsx # 게시물 관리 페이지

---

관심사의 분리?
- 특정 계층이 구분 가능한 하나의 명확한 역할만을 수행하도록 설계하여 코드의 가독성과 유지보수성을 향상시키고자 하는 행위
- **명확한 하나의 기준으로 선명하게 분리되는게 중요**


## Layer
-  총 7개의 계층 
	- app :  애플리케이션의 전체적인 설정과 초기화 담당 (글로벌 스타일 설정, 라우팅 설정 등)
	- pages : 실제 페이지를 구성하는 컴포넌트들 (홈ㅁ페이지, 상품목록페이지 등)
	- widgets : 재사용 가능한 복잡한 UI블록(헤더 네비게이션, 상품검색 필터, 댓글 위젯 등)
	- features : 특정 비즈니스 기능을 담당(상품 정렬 기능, 좋아요 버튼, 리뷰 작성 폼 등)
	- entities : 비즈니스 엔티티와 관련된 로직( 상품 모델, 사용자모델, 주문모델, 리뷰모델 등)
	- shared : 공통으로 사용되는 유틸리티와 UI컴포넌트 (UI 버튼, 인풋 컴포넌트, 날짜 포맷팅 유틸 등)
- 상위 레이어는 하위레이어에 의존할 수 있지만 반대는 불가능 
- 모든 레이어는 shared 레이어를 사용할 수 있음


- entitiy : 순수한 비즈니스 데이터와 로직을 포함. 기획이 변해도 변하지 않을 데이터 기반 코드
- feature : 사용자의 액션과 관련된 비즈니스 로직, 정책에 따른 비즈니스 로직, 기획 변경에 따라 수정될 수 있음
- widget : features, entity를 사용할 뿐 읽기 전용, 자체적인 비즈니스 로직이 없음


## atomic design의 모호한 문제점

// 이건 Molecule? Organism?
const ProductCard = () => (

{/* Atom */} {/* Atom */} {/* Atom? Molecule? */} {/* Atom */}

) ```

1. Molecule과 Organism의 경계가 모호
2. 비즈니스 로직의 위치가 불명확하다

atomic design은 ui를 기준으로 잡다보니 경계가 모호하고 도메인 간 의존성을 찾기가 힘들다.

entities

• Entity끼리는 서로 import할 수 없다.

이번 과제를 통해 이전에 비해 새롭게 알게 된 점이 있다면 적어주세요.

본인이 과제를 하면서 가장 애쓰려고 노력했던 부분은 무엇인가요?

아직은 막연하다거나 더 고민이 필요한 부분을 적어주세요.

이번에 배운 내용 중을 통해 앞으로 개발에 어떻게 적용해보고 싶은지 적어주세요.

챕터 셀프회고

클린코드와 아키테쳑 챕터 함께 하느라 고생 많으셨습니다!
지난 3주간의 여정을 돌이켜 볼 수 있도록 준비해보았습니다.
아래에 적힌 질문들은 추억(?)을 회상할 수 있도록 도와주려고 만든 질문이며, 꼭 질문에 대한 대답이 아니어도 좋으니 내가 느꼈던 인사이트들을 자유롭게 적어주세요.

클린코드: 읽기 좋고 유지보수하기 좋은 코드 만들기

• 더티코드를 접했을 때 어떤 기분이었나요? ^^; 클린코드의 중요성, 읽기 좋은 코드란 무엇인지, 유지보수하기 쉬운 코드란 무엇인지에 대한 생각을 공유해주세요

결합도 낮추기: 디자인 패턴, 순수함수, 컴포넌트 분리, 전역상태 관리

• 거대한 단일 컴포넌트를 봤을때의 느낌! 처음엔 막막했던 상태관리, 디자인 패턴이라는 말이 어렵게만 느껴졌던 시절, 순수함수로 분리하면서 "아하!"했던 순간, 컴포넌트가 독립적이 되어가는 과정에서의 깨달음을 들려주세요

응집도 높이기: 서버상태관리, 폴더 구조

• "이 코드는 대체 어디에 둬야 하지?"라고 고민했던 시간, FSD를 적용해보면서의 느낌, 나만의 구조를 만들어가는 과정, TanStack Query로 서버 상태를 분리하면서 느낀 해방감(?)등을 공유해주세요

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

feature에 구성을 엔티티 파일 명을 작성하고 그 하위에 model,ui로 분류를 했는데 model에서 UsePostList이렇게 기능을 명시해주는 파일만 생성했는데 하위에 post-list폴더를 만들고 그안에 usePostList를 만드는 방법과 고민을 했는데 현재 프로젝트는 작은 프로젝트니 굳이 하위 폴더를 생성안해도 될 것 같아서 이런 방식으로 했는데 막상 만들고 나니 폴더를 만들걸 그랫나? 하는 생각이 들었는데 다시 생각해보면 기능이 커져도 폴더가 늘어나는 것 뿐인데 기능을 명시적으로 파일명을 작성하는 거랑 크게 차이가 있을까? 하는 생각이 듭니다. 머리로는 폴더를 생성하는게 맞는 것 같은데 굳이 라는 생각이 듭니다