처음 배우는 아키텍처, FSD 구조에 도전하며

이번 과제를 통해 처음으로 아키텍처에 대해 진지하게 고민해보는 시간을 가졌습니다.
항상 components, utils, hooks 폴더만을 나눠 사용하는 방식에 익숙했던 제게
FSD(Feature-Sliced Design) 구조는 낯설고 어렵게 느껴졌습니다.

하지만 그만큼, 기존에 생각해본 적 없던 전역 상태 관리 기반의 계층적 구조를 직접 설계해보며
프론트엔드 설계에 대한 감각을 기를 수 있는 기회가 되었습니다.

처음에는 모든 게 뒤죽박죽이었지만, 과제 초반부터 절차를 명확히 세우고 순서대로 진행하며
구조화된 사고와 개발 과정을 연습하게 되었습니다.

🔹 과제 목표

Zustand와 TanStack Query를 활용해 상태 관리와 서버 통신 로직을 모듈화하고,
FSD 구조에 맞춰 기능 단위의 분리 및 책임 명확화를 실현한다.

🔹 진행 순서

1. Zustand 설치 및 초기 store 작성
2. shared/ui 하위에 공통 컴포넌트 분리
3. 전역 Type/interface 정리
4. 기존 useState 기반 상태 → Zustand 상태로 전면 교체
5. UI 요소 분리
   → PostTable, PostFilters, PostDialogs, CommentList, UserModal 등
6. API 호출 함수 분리 → entities/api 디렉토리로 이동
7. React Query 적용
   → usePostsQuery, useAddPostMutation 등 래퍼 훅 정의
8. 기능 단위(feature) 중심으로 API/Hook/Component 구조 정비
9. widgets 폴더에 공통 유틸 및 Pagination 컴포넌트 설계
10. 최종적으로 PostManager.tsx는 단순 조립 역할만 수행하도록 리팩토링

🔹 아쉬웠던 점

가장 헷갈렸던 건 entities와 features의 경계였습니다.
테오 코치님이 1시간 넘게 설명해주셨지만, 완전히 체화되진 못했습니다.

• entities는 도메인 중심의 CRUD 로직 중심으로
• features는 사용자 중심의 복합 기능 및 UI 중심으로 나누려 했지만...
  막상 구현하다 보니 경계가 자주 흐려졌고, 기준을 유지하는 데 어려움이 있었습니다.

🔹 얻은 인사이트

아키텍처는 단순히 폴더 구조를 나누는 것이 아니라,
책임을 분리하고 협업과 유지보수성을 고려한 설계 철학이라는 것을 체감했습니다.

무엇보다도,

처음엔 GPT가 뒤죽박죽 알려줘서 더 혼란스러웠지만,
결국 제가 직접 고민하고 방향을 정해보며 구조를 잡은 경험이 큰 공부가 되었습니다.

이번 과제를 계기로, 그동안 관심조차 없었던 프론트엔드 아키텍처에 흥미를 느끼게 되었고,
앞으로 꾸준히 공부하며 다양한 아키텍처 방식을 익히고 싶다는 목표도 생겼습니다.