로튼 토마토에서 영감을 받은 영화 리뷰 웹사이트입니다.
효율적인 모던 웹 애플리케이션 개발을 위해 Next.js 15.0.0-rc와 PandaCSS를 활용하였습니다.
https://rotten-bananas.vercel.app
- 정적 사이트 생성 (SSG): SSG를 구현하여 페이지를 빠르게 제공
- 데이터 캐싱: Next.js의 데이터 캐싱을 활용하여 불필요한 API 호출을 최소화하고 캐싱된 데이터를 사용하여 사용자의 상호작용에 빠르게 응답
- 이미지 최적화: Next.js의 이미지 최적화 기술을 사용하여 이미지 품질을 유지하면서 빠른 로딩 시간 보장
- 검색 바가 포함된 전역 레이아웃: 쉬운 탐색을 위해 검색 바 컴포넌트가 포함된 일관된 전역 레이아웃 설계 및 구현
- 스트리밍 컴포넌트: 시간이 오래 걸리는 API 응답에 의존하는 컴포넌트에 스트리밍을 활용하여 사용자의 체감 성능 개선
- 로딩 상태 및 오류 처리: 폼 제출 및 기타 사용자 상호작용에 대한 로딩 상태와 오류 처리 구현하여 명확한 피드백 제공
- 인터셉팅 라우트를 이용한 모달: Next.js의 인터셉팅 라우트를 활용하여 클라이언트 사이드에서 렌더링되는 페이지에 대한 모달을 표시함으로써 부드럽고 앱과 같은 경험 제공
동적 메타데이터: 각 페이지에 대한 메타데이터를 설정하여 검색 엔진 최적화 및 소셜 미디어 공유 기능 제공
PandaCSS: 애플리케이션 전반에 걸쳐 효율적이고 유지보수가 용이한 스타일링을 위해 PandaCSS가 제공하는 recipes, patterns 등 강력한 기능 사용하여 스타일링
- KR/EN 다국어 기능
- 리뷰 작성시 평점 기록