[7팀 박희정] Chapter 3-3 기능 중심 아키텍처와 프로젝트 폴더 구조

[Pheejung]

https://pheejung.github.io/front_7th_chapter3-3/?limit=10&sortOrder=asc

과제 체크포인트

기본과제

목표 : 전역상태관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 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가 정상적으로 작동하는가?

최종과제

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

과제 셀프회고

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

이번 과제를 통해 FSD(Feature-Sliced Design) 아키텍처를 처음으로 적용해보면서 관심사 분리의 중요성을 깊이 이해하게 되었습니다. 특히 entities와 features의 개념적 차이를 명확히 구분하는 것이 어려웠지만 조금이나마 fsd 아키텍처를 알게 된 주차였던 것 같습니다.

entities와 features의 개념
entities (비즈니스 엔티티):

• 도메인 모델과 직접적으로 관련된 것들
• User, Post, Comment, Tag 같은 비즈니스 객체
• 해당 엔티티의 기본적인 타입 정의, API 호출, 데이터 변환 로직
• 예: src/entities/post/, src/entities/user/ - 게시물과 사용자라는 비즈니스 개념 그 자체

features (사용자 기능/액션):

• 구체적인 사용자 행동과 비즈니스 로직
• CRUD 작업, 검색, 필터링, 정렬 등의 기능 구현
• UI 컴포넌트와 이벤트 핸들러의 조합
• 예: src/features/post/list/ - 게시물 목록 표시 기능, src/features/post/editor/ - 게시물 작성/수정 기능

** 적용된 FSD 폴더 구조:**

src/
├── app/                           # 애플리케이션 레벨
│   ├── App.tsx                    # 메인 앱 컴포넌트
│   ├── QueryProvider.tsx          # React Query 프로바이더
│   └── main.tsx                   # 앱 진입점
├── entities/                      # 비즈니스 엔티티
│   ├── comment/
│   │   ├── api.ts                 # 댓글 API 함수들
│   │   └── types.ts               # 댓글 타입 정의
│   ├── post/
│   │   ├── api.ts                 # 게시물 API 함수들
│   │   └── types.ts               # 게시물 타입 정의
│   ├── tag/
│   │   ├── api.ts                 # 태그 API 함수들
│   │   └── types.ts               # 태그 타입 정의
│   └── user/
│       ├── api.ts                 # 사용자 API 함수들
│       └── types.ts               # 사용자 타입 정의
├── features/                      # 사용자 기능/액션
│   ├── post-comments/             # 게시물 댓글 기능
│   │   ├── index.ts               # 익스포트 파일
│   │   ├── model/                 # 비즈니스 로직
│   │   │   ├── index.ts
│   │   │   └── useComments.ts     # 댓글 관련 훅
│   │   └── ui/                    # UI 컴포넌트
│   ├── post-detail/               # 게시물 상세보기 기능
│   ├── post-editor/               # 게시물 작성/수정 기능
│   ├── post-list/                 # 게시물 목록 기능
│   │   ├── index.ts               # 익스포트 파일
│   │   ├── model/                 # 비즈니스 로직
│   │   │   ├── attachAuthorsToPosts.ts
│   │   │   ├── index.ts
│   │   │   ├── usePosts.ts        # 게시물 관련 훅
│   │   │   ├── usePostsMutation.ts # 게시물 변이 훅
│   │   │   └── usePostsQuery.ts   # 게시물 쿼리 훅
│   │   └── ui/                    # UI 컴포넌트
│   │       ├── PostsControls.tsx  # 검색/필터 컨트롤
│   │       └── PostsTable.tsx     # 게시물 테이블
│   └── user/                      # 사용자 관련 기능
├── pages/                         # 페이지 컴포넌트
│   └── PostsManagerPage.tsx       # 게시물 관리 메인 페이지
├── shared/                        # 공유 리소스
│   ├── assets/                    # 공유 정적 파일
│   ├── hooks/                     # 공유 훅
│   │   ├── __tests__/             # 훅 테스트
│   │   ├── index.ts
│   │   ├── usePagination.ts       # 페이지네이션 훅
│   │   └── useToggle.ts           # 토글 훅
│   ├── lib/                       # 유틸리티 라이브러리
│   │   ├── fetch.ts               # fetch 유틸리티
│   │   ├── highlight.tsx          # 하이라이트 유틸리티
│   │   └── queryKeys.ts           # React Query 키 정의
│   ├── store/                     # 전역 상태
│   │   └── postAtoms.ts           # Jotai atoms
│   └── ui/                        # 공유 UI 컴포넌트
│       ├── Footer.tsx
│       ├── Header.tsx
│       ├── button/
│       │   └── Button.tsx
│       ├── card/
│       │   └── Card.tsx
│       ├── dialog/
│       │   └── Dialog.tsx
│       ├── index.tsx              # UI 컴포넌트 익스포트
│       ├── input/
│       │   └── Input.tsx
│       ├── layout/
│       ├── pagination/
│       ├── select/
│       │   └── Select.tsx
│       ├── table/
│       │   └── Table.tsx
│       ├── textarea/
│       │   └── Textarea.tsx
│       └── toast/
├── widgets/                       # 재사용 가능한 위젯
│   └── post/
│       ├── hooks/
│       ├── index.ts
│       ├── model/
│       └── ui/
├── assets/                        # 정적 파일
├── index.css
├── index.tsx
└── main.tsx

실제 프로젝트에서 보면

• entities/post는 Post 타입과 기본 API 함수들을 담당
• features/post는 게시물 목록 표시, 검색, 필터링, CRUD 작업 등의 구체적인 사용자 인터랙션 담당

이러한 구분을 통해 코드의 재사용성과 유지보수성이 크게 향상되겠구나 라는 걸 알았습니다.

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

가장 애썼던 부분은 FSD 구조를 올바르게 적용하는 것이었습니다.

1. 폴더 구조 설계: 각 파일이 어느 계층에 속해야 하는지 결정하는 과정이 어려웠습니다. "이 컴포넌트는 shared인가 feature인가?", "이 로직은 entities에 속하는가 features에 속하는가?"라는 고민을 많이 했습니다.

2. 관심사 분리: 하나의 큰 컴포넌트를 여러 계층으로 나누는 작업이 특히 힘들었습니다. PostsManagerPage.tsx가 800줄이 넘는 거대한 컴포넌트였는데, 이를 entities, features, shared로 적절히 분리하는 과정에서 많은 시행착오를 겪었습니다.

3. TanStack Query 구현: 사실 TanStack Query 서버 상태관리로 적용을 했지만 왜인지 모른 에러로 인해 시행착오를 많이 겪었습니다. 초기 구현을 AI 코드 예제로 급히 적용하면서 캐시 동기화와 키 설계에서 오류가 발생했습니다. 결국에는 수정하지 못한채로 원복을 하여 배포를 하는 과정이 있었습니다.

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

1. shared와 features의 경계: shared/ui에 있는 컴포넌트들이 features에서 어떻게 재사용되어야 하는지, 그리고 어느 정도까지 shared로 분리해야 하는지에 대한 기준이 아직 모호합니다.

2. 상태 관리의 위치: 전역 상태를 어느 계층에서 관리해야 하는지 아직 고민이 됩니다. entities에서 관리해야 할 도메인 상태와 features에서 관리해야 할 UI 상태의 구분이 필요할 것 같습니다.

3. TanStack Query: 시간이 없어 제대로 들여다보지 못하고 ai의 도움을 받아 작성을 했는데 그래서인지 에러가 나는 상황이었습니다. 그래서 좀 더 공부를 해야할 것 같습니다.

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

이번에 배운 FSD 구조와 관심사 분리를 앞으로의 프로젝트에 적극적으로 적용하고 싶습니다:

1. 팀 협업 효율화: 지금 회사에서 다른 개발자들이 코드를 쉽게 이해하고 기여할 수 있도록 명확한 폴더 구조와 네이밍 컨벤션을 적용하고 싶습니다.

2. 재사용성 극대화: entities와 shared 계층을 잘 설계하여 여러 features에서 재사용할 수 있는 컴포넌트와 로직을 만들고 싶습니다.

챕터 셀프회고

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

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

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

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

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

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

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

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

과제를 하면서 제 역량의 한계를 더 명확히 보게 됐습니다. 시니어 직전으로 인정받기 위해 제가 만들어야 할 구체적 결과물은 무엇이고, 4~5년차에게 요구되는 기준(역할·기술·협업)은 어디까지인지 궁금합니다.