<aside> 💡 이번 프로젝트에 사용할 기술 스택과 선정 이유를 작성하는 공간입니다.

</aside>

프레임워크 / 언어

<aside> 💡

Next.js (App Router) + React + JavaScript

• 사용 패턴
  • 서버 컴포넌트 기본, 브라우저 상태/UI가 필요한 경우에만 "use client" 최소화
  • Hydration Prefetching을 활용하여 초기 구간은 SSR로 처리 → SEO 최적화 + 첫 로딩 속도 향상 목표
• 선정 이유
  • 파일 기반 라우팅과 SSR/SSG 지원으로 개발 생산성과 SEO 최적화 모두 가능
  • 이미지/폰트 최적화 기능 내장
    • 특히 ‘최애의 포토’처럼 사진 렌더링이 많은 서비스에서 로딩 속도와 품질 개선 효과 기대
  • 풍부한 배포·모니터링 생태계 (Vercel 등)로 운영 편의성 우수 </aside>

스타일

<aside> 💡

CSS Modules

• 선정 이유
  • 클래스명이 컴포넌트 단위로 자동 네이밍·캡슐화되어 전역 충돌 방지
  • 러닝 커브가 낮고 기존 React/Next.js 프로젝트와 호환성 우수
  • 전역 스타일은 최소화(app/globals.css)
• 규칙
  • 파일명: 컴포넌트명.module.css
  • 클래스명: 카멜케이스
  • 재사용 색상, 폰트 크기 등은 전역 변수로 정의
  • 전역 스타일은 리셋/기본값 정도만 유지 </aside>

API (fetch 기준)

<aside> 💡

• 방식: REST + JSON, fetch
• 인증: HttpOnly 쿠키, credentials: 'include'
• 베이스 URL: .env → NEXT_PUBLIC_API_URL

폴더 구조

utils/
  api/
    myGallery.js        // 도메인별 API 모듈
    mySale.js

</aside>

상태 관리

<aside> 💡

TanStack React Query(v5) + useState/useReducer(로컬 UI만)

선정 이유

• 서버 상태 캐싱/동기화·리트라이·에러 핸들링을 기본 제공 → 비즈니스 로직에 집중
• SSR 프리패칭 + 하이드레이션으로 초기 로딩/SEO 최적화에 유리
• 요청/응답 표준과 잘 맞물려 에러 UX 일관화 가능

사용 원칙

• 서버 상태는 React Query, 순수 UI 상태만 useState/useReducer
• 초기 구간은 SSR 프리패칭 + Hydration 사용, 이후는 캐시 활용

Query Key 규칙

• 리스트: ['sales', 'list', { page, filters }]
• 상세: ['sales', 'detail', id]
• 파생 데이터도 도메인 첫 키 고정(sales, mySale 등)

SSR & Hydration

• 서버에서 prefetchQuery → dehydrate → 클라이언트 HydrationBoundary
• 첫 진입은 SSR 데이터로 즉시 렌더, 클라이언트 전환 시 불필요한 재요청 방지 </aside>

배포 플랫폼

<aside> 💡

Vercel (프론트, Next.js 전용)

• 이유: Next.js와 완벽 호환, PR마다 Preview 배포
• 규칙:
  • 18:00 PR → Preview 확인 → 승인 시 main 머지로 Prod 배포
  • HTTPS + CORS 설정으로 백엔드(4000)와 쿠키 인증 연동 </aside>