AS Application
Next.js 애플리케이션 with FSD(Feature Sliced Design) 아키텍처
기술 스택
- 프레임워크: Next.js 15 + TypeScript
- 스타일링: Tailwind CSS
- 상태관리: Zustand
- 데이터 페칭: TanStack Query (React Query)
- 폼 관리: React Hook Form + Zod
- 테이블: TanStack Table
- HTTP 클라이언트: Axios
- 날짜 처리: Day.js
프로젝트 구조 (FSD)
as/
├── app/ # Next.js App Router (라우팅)
│ ├── layout.tsx
│ ├── page.tsx
│ ├── globals.css
│ └── providers.tsx
├── shared/ # 공통 코드 레이어
│ ├── api/ # API 클라이언트 설정
│ ├── config/ # 환경 설정
│ ├── lib/ # 유틸리티 라이브러리
│ ├── types/ # 공통 타입 정의
│ └── ui/ # 공통 UI 컴포넌트
├── entities/ # 비즈니스 엔티티
├── features/ # 비즈니스 기능
└── widgets/ # 복합 UI 블록
FSD 레이어 설명
1. Shared
- 프로젝트 전체에서 재사용되는 코드
- 비즈니스 로직 없음
- API 클라이언트, 유틸리티, UI 컴포넌트 등
2. Entities
- 비즈니스 엔티티 (예: User, Product, Order)
- 엔티티 모델, 타입, API 호출
3. Features
- 사용자 시나리오와 기능 (예: 로그인, 상품 검색)
- 한 가지 기능에 집중
4. Widgets
- 여러 features와 entities를 조합한 복잡한 UI 블록
- 독립적으로 작동 가능한 UI 컴포넌트
5. App
- Next.js App Router
- 라우팅 및 전역 providers 설정
시작하기
# 의존성 설치
npm install
# 개발 서버 실행
npm run dev
# 프로덕션 빌드
npm run build
# 프로덕션 서버 실행
npm start
환경 변수
.env.local 파일 생성:
NEXT_PUBLIC_API_URL=http://localhost:3000/api
코드 규칙
- TypeScript 사용 (strict mode)
- 함수형 컴포넌트 사용
- Named exports 선호
- Tailwind CSS 사용
- ESLint + Prettier 적용