유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Build and Deploy a Full-Stack Hotel Website with Astro & Sanity

Dev Lawrence

2025. 8. 15.

0

#frontend
#backend
  • Sanity를 사용하여 호텔 웹사이트의 room 스키마를 생성하고 데이터를 채웠습니다. 🛏️
  • room 상세 페이지를 업데이트하고 TypeScript 오류를 수정했습니다. 🐛
  • Sanity types를 import하여 오류를 해결하고 이미지 렌더링 전 존재 여부를 확인했습니다. 🖼️
  • getStaticPaths 함수에서 preendtrue로 설정하여 동적 페이지의 사전 렌더링 문제를 해결했습니다. ⚙️
  • Sanity 클라이언트를 사용하여 room 데이터를 가져오고 slug를 기반으로 특정 room을 조회했습니다. 🔑
  • GROQ 쿼리를 사용하여 Sanity에서 필요한 room 필드(ID, 이름, slug, 설명, 카테고리, 이미지 등)를 가져왔습니다. 📝
  • room 상세 페이지에서 Sanity 데이터를 기반으로 콘텐츠를 동적으로 렌더링했습니다. 🔄
  • 이미지 URL 생성을 위해 urlForImage 함수를 사용하고, 이미지 및 썸네일 존재 여부를 확인했습니다. 🔗
  • 편의 시설(amenities)의 사용 가능 여부에 따라 필터링하여 렌더링했습니다. ✅
  • Sanity 스키마에서 데이터를 변경하면 웹사이트에 즉시 반영되는 것을 확인했습니다. ⚡
  • 특별 참고 사항 필드 관련 오류는 데이터 내보내기 문제로 발생했으며, 튜토리얼을 따라온 경우 발생하지 않아야 합니다. ⚠️
  • 다음 비디오에서는 예약 스키마를 만들고 예약 컴포넌트를 업데이트하며 첫 예약을 생성할 예정입니다. 📅

Recommanded Videos