기술 스택

🖥 프론트엔드

핵심 프레임워크

• Next.js 15 - React 기반 풀스택 프레임워크
  • App Router 사용
  • Turbopack으로 빠른 개발 환경
  • 서버 사이드 렌더링 (SSR) 지원
  • 정적 사이트 생성 (SSG) 지원

UI 라이브러리

• React Bootstrap - 반응형 UI 컴포넌트
  • 빠른 프로토타이핑
  • 일관된 디자인 시스템
  • 모바일 우선 반응형 디자인

개발 도구

• TypeScript - 타입 안전성
• ESLint - 코드 품질 관리
• Prettier - 코드 포매팅 (추가 예정)

🗄 백엔드

API 개발

• Next.js API Routes - 서버리스 API
• Prisma - 데이터베이스 ORM (추가 예정)
• NextAuth.js - 인증 시스템 (추가 예정)

데이터베이스

• PostgreSQL - 메인 데이터베이스 (추가 예정)
• Redis - 캐싱 및 세션 저장 (추가 예정)

☁️ 배포 및 인프라

호스팅

• Vercel - Next.js 최적화된 배포 플랫폼
• Supabase - 백엔드 서비스 (데이터베이스, 인증)

CDN 및 스토리지

• Vercel Edge Network - 글로벌 CDN
• Supabase Storage - 파일 저장소

🔧 개발 환경

패키지 관리

• npm - 패키지 매니저
• Node.js 18+ - 런타임 환경

코드 관리

• Git - 버전 관리
• GitHub - 코드 저장소 및 CI/CD

📊 분석 및 모니터링

추가 예정

• Google Analytics - 웹 분석
• Sentry - 에러 트래킹
• Vercel Analytics - 성능 모니터링

🔄 상태 관리

추가 예정

• Zustand - 경량 상태 관리 라이브러리
• React Query - 서버 상태 관리

💅 스타일링

현재

• Bootstrap 5 - CSS 프레임워크
• React Bootstrap - React 컴포넌트

추가 고려사항

• Sass/SCSS - CSS 전처리기
• CSS Modules - 스타일 격리

🧪 테스트

추가 예정

• Jest - 단위 테스트
• React Testing Library - 컴포넌트 테스트
• Playwright - E2E 테스트

📱 모바일 대응

PWA (Progressive Web App)

• Service Worker - 오프라인 지원
• Web App Manifest - 앱스러운 경험
• Push Notifications - 알림 기능