David Brain

Web Starter Kit

3 min read

ID: key_26_03_01_15_21_05_45_24900 Created date: Jan 15 2026 Thursday, 3rd 21:05

연관 문서

1. 프레임워크 및 코어 (The Core)

  • Framework: Next.js 14/15+ (App Router)

    • Server Components (RSC): 민감한 로직이나 데이터 페칭을 서버에서 처리하여 클라이언트로 보내는 JS 양을 최소화합니다.

    • Server Actions: 폼 제출이나 데이터 변경 시 별도의 API 엔드포인트 없이 서버 함수를 직접 호출하여 개발 속도를 높입니다.

  • Language: TypeScript (Strict 모드) - 엔터프라이즈급 안정성 확보.

  • Runtime: Node.js 20+ (LTS).

2. 데이터 페칭 및 상태 관리 (Data Layer)

  • Server Side: Next.js 기본 fetch (캐싱 및 재검증 로직 활용).

  • Client Side: TanStack Query (React Query) v5

    • 사용자 인터랙션이 많은 부분(마이페이지, 관리자 대시보드)에서 백엔드(Spring Boot) API와 연동할 때 사용합니다.

  • Global State: Zustand (가볍고 직관적인 클라이언트 상태 관리).

3. UI/UX 및 스타일링 (Design System)

  • Styling: Tailwind CSS (Utility-first).

  • Component Library: Shadcn UI

    • 직접 코드를 소유하므로 외주 고객의 까다로운 디자인 커스텀 요구에 즉각 대응 가능합니다.

  • Icons: Lucide React.

  • Animations: Framer Motion (스크롤 애니메이션, 페이지 전환).

4. 보안 및 인증 (Security & Auth)

  • Auth: NextAuth.js (Auth.js)

    • Spring Boot 백엔드의 JWT 인증과 연동하거나, 소셜 로그인(구글, 카카오)을 프론트에서 직접 처리할 때 사용합니다.

  • Middleware: 로그인하지 않은 유저가 접근하면 안 되는 페이지(마이페이지, 설정)를 서버 단계에서 원천 차단합니다.

5. 인프라 및 배포 (Deployment)

  • Platform: Vercel (Next.js에 최적화) 또는 Docker를 통한 self-hosting.

  • SEO: Metadata API를 활용한 동적 메타 태그 생성 (공유하기 시 썸네일 자동 생성 등).

  • Image Optimization: Next.js 내장 Image 컴포넌트를 사용하여 이미지 용량 자동 최적화 (Lighthouse 점수 관리).

연관 메일

Graph View