Zustand의 장점
Redux보다 훨씬 간결한 API
비동기 상태 관리도 손쉽게 가능 (ex. zustand + tanstack-query 조합)
subscribe 기반으로 필요할 때만 리렌더링 -> 성능 최적화
React Context보다 빠름 (컨텍스트 리렌더링 이슈 없음)
❌ 대규모 프로젝트에서의 문제점
전역 상태가 많아질 경우 Store가 커질 위험 → 모듈화 필요
Store 간 의존성이 증가하면 관리 어려움 → 여러 개의 Store로 분리 필요
Middleware (Redux DevTools, Persist 등) 설정이 다소 부족
💡 대안
Zustand + TanStack Query
비동기 데이터는 TanStack Query, 클라이언트 상태는 Zustand
서버에서 불러오는 데이터 (예: 사용자, 빌더 데이터)는 TanStack Query에 저장하고,
UI 상태(예: 현재 선택된 요소, 드래그 중인 요소)는 Zustand에서 관리
Zustand + Jotai
Zustand로 전역 상태 관리하고, Jotai로 로컬 상태 (컴포넌트별) 관리
Zustand 대신 Redux Toolkit + RTK Query
프로젝트가 정말 대규모라면 Redux Toolkit + RTK Query 조합이 더 나을 수도 있음
Zustand보다 관리할 수 있는 데이터 구조가 체계적
➡ 결론:
Zustand를 써도 되지만, "아임웹 같은 대규모 사이트"라면 Zustand + TanStack Query 또는 Redux Toolkit + RTK Query 조합을 고려하는 게 좋아요.
Framer Motion은 React에서 가장 널리 쓰이는 애니메이션 라이브러리 중 하나
성능 최적화가 좋고, Tailwind와 함께 사용하기도 좋음
기본적인 애니메이션을 만들 때 매우 직관적 (whileHover, animate, exit 등)
❌ Framer Motion의 단점
GSAP보다 더 복잡한 애니메이션을 만들기 어렵다
(예: 스크롤 기반 애니메이션, 고급 타이밍 제어)
Vue, Svelte 지원 X → 다른 프레임워크에서 사용 어려움
💡 대안 라이브러리
GSAP (GreenSock)
성능이 가장 뛰어나고, 애니메이션 제어력이 강함
스크롤 기반 효과, 복잡한 타이밍 컨트롤이 필요할 때 좋음 (ex. Lottie 연동)
단점: React와 함께 쓰려면 추가 설정 필요 (useRef, useEffect 활용)
Motion One
Framer Motion보다 가볍고, 애니메이션을 더 빠르게 실행
Vanilla JS 기반이지만 React에서도 사용 가능
➡ 결론:
Framer Motion이 여전히 가장 무난한 선택이지만, 복잡한 애니메이션이 많다면 GSAP 고려
가볍게 가고 싶다면 Motion One
FSD
App Layer (앱 전역 설정)
providers (Zustand, TanStack Query, Router 등)
styles (Global CSS, Tailwind 설정)
config (환경 변수, API 주소 등)
Shared Layer (재사용 가능한 유틸/컴포넌트)
ui (버튼, 카드, 모달 등 공통 UI)
lib (axios, zustand, form validation, hooks 등)
assets (이미지, 아이콘)
api (Axios 인스턴스, API 관련 코드)
Entities Layer (도메인 개념)
entities/user
entities/template
entities/builder
Features Layer (독립적인 기능 단위)
features/auth
features/drag-drop
features/preview
Widgets Layer (대형 UI 컴포넌트)
widgets/Sidebar
widgets/Header
widgets/PageBuilder
Pages Layer (라우트 페이지)
pages/Login
pages/Dashboard
pages/Builder
/src
/app
/providers
/styles
/config
/shared
/ui
/lib
/api
/assets
/entities
/user
/template
/builder
/features
/auth
/drag-drop
/preview
/widgets
/Sidebar
/Header
/PageBuilder
/pages
/Login
/Dashboard
/Builder
- 상태 관리
Zustand + TanStack Query or Redux Toolkit + RTK Query (대규모 추천)
전역 상태: Zustand or Redux
서버 상태: TanStack Query - 애니메이션
기본 애니메이션: Framer Motion
복잡한 애니메이션: GSAP - 폴더 구조
Feature-Sliced Design (FSD)
src/ 내부를 app, shared, entities, features, widgets, pages 로 분리
