🧩 프레임워크 / 언어

• Next.js (React 기반)

  Next.js는 서버 사이드 렌더링(SSR)과 정적 생성(Static Generation)을 지원하여 검색 엔진 최적화(SEO)에 강력한 이점을 제공합니다. 또한, 이미지 최적화 기능과 자동 메타 태그 설정 등의 내장 기능을 통해 Google Lighthouse 성능 점수 향상에도 유리합니다.

  • SSR: 서버에서 HTML을 미리 생성하여 클라이언트에 전달하는 방식
  • 정적 생성: 미리 HTML 파일을 생성하여 배포하는 방식
  • SEO: 검색 엔진에서 웹사이트의 순위를 높이기 위한 최적화 과정
    • REACT는 CSR 방식을 사용하는데에 비해 NEXT는 SSR 방식이 사용 가능

🎨 스타일

• Tailwind CSS

  최애의 포도에서는 스타일 일관성과 컴포넌트 중심 개발의 효율성을 높이기 위해 Tailwind CSS를 선택하였습니다. Tailwind는 별도의 CSS 파일 없이 클래스만으로 직관적인 스타일링이 가능하며, 빠르게 UI를 구성할 수 있어 개발 속도를 높이는 데 유리합니다. 또한 반응형 디자인이나 상태별 스타일(hocus, disabled 등)도 간결하게 구현할 수 있어 유지보수에 용이하며, 팀원 간 스타일 가이드 없이도 통일된 UI를 구성할 수 있다는 점에서 협업에도 적합하다고 판단했습니다.

⚙️ 상태 관리

• React Context API는 전역 상태 관리에 최적화되어 있으며, 로그인 상태, 포인트 관리 등은 Context를 통해 손쉽게 처리할 수 있습니다.
  • 컴포넌트 트리 전체에서 상태를 공유할 수 있게 해주기 때문에 React Context API가 전역 상태 관리에 최적화 되어 있음
• React Query는 서버 상태 관리와 관련된 복잡한 비동기 요청을 효율적으로 처리하는 데 강력한 도구로, 포토카드 거래 시스템과 같은 서버와의 데이터 통신을 최적화하는 데 적합합니다.
  • React Query는 서버에서 받은 데이터를 자동으로 캐싱, 데이터가 오래되거나 변경된 경우 자동으로 리패칭하여 항상 최신 상태를 유지하기 때문에 최적화에 적합

☁️ 배포 플랫폼

• Vercel

  Next.js의 공식 배포 플랫폼으로, Git 연동을 통한 자동 배포, CDN 기반 성능 최적화, 서버리스 기능 지원 등 프론트엔드 중심의 개발 환경에 최적화되어 있습니다.

🤝 협업

• Figma + GitHub + Notion

  Figma를 통해 UI 시안을 공유하고, GitHub를 통한 Pull Request 기반의 코드 협업, Notion을 이용한 일정 관리 및 문서화로 협업 효율을 극대화합니다.