AI 요약관련 정보

• Synhack은 실시간 로컬 데이터 기반의 경쟁적인 코딩 게임 플랫폼으로, CSS 배틀과 UI 코딩에 유용합니다. 🎮
• 이 프로젝트는 Sentry.io 핵 위크를 위해 제작되었으며, Sentry는 에러 추적 및 문제 해결에 유용한 기능을 제공합니다. 🐛
• Synhack 플랫폼은 참가자들이 로컬 환경에서 코딩하고, 변경 사항이 실시간으로 웹사이트에 반영되는 방식으로 작동합니다. 💻
• 관객들은 실시간으로 코딩 과정을 지켜보고 투표할 수 있으며, 심판은 배틀 진행을 관리할 수 있습니다. 🧑‍⚖️
• 이 플랫폼은 CSS 배틀의 비효율성과 제한적인 UI 코딩 환경을 개선하기 위해 설계되었습니다. 🛠️
• 기술 스택으로는 PostgreSQL 데이터베이스, Drizzle ORM, ZeroSync 로컬 데이터 동기화가 사용되었습니다. 💽
• Drizzle 스키마를 ZeroSync와 연결하는 패키지를 사용하여 스키마 관리를 간소화했습니다. 🔗
• 인증은 GitHub OAuth를 사용하며, UI는 SvelteKit으로 구축되었습니다. 🔑
• 파일 시스템 API를 활용하여 로컬 파일 변경 사항을 실시간으로 반영합니다. 📁
• 앱의 기능은 CSS 스타일링 전에 HTML과 JavaScript 로직을 먼저 구현하는 방식으로 개발되었습니다. ✨
• 사용자는 배틀을 선택하고, 새로운 배틀을 생성하거나, 공개/비공개 매치를 설정할 수 있습니다. ⚔️
• 배틀 참가자는 초대 링크를 통해 참여하고, 로비에서 준비 상태를 설정할 수 있습니다. 🤝
• 잠금(Lock-in)을 하면 파일 시스템에 폴더가 생성되고, 필요한 파일(HTML, CSS)이 자동으로 생성됩니다. 📂
• 파일 시스템 접근 권한은 앱 실행 시 요청되며, IndexDB에 저장됩니다. 🔑
• 코드 변경 사항은 데이터베이스에 저장되고, ZeroSync를 통해 실시간으로 UI에 반영됩니다. 🔄
• 심판은 배틀 시작 및 종료를 관리하고, 코딩 화면을 통해 실시간 변경 사항을 확인할 수 있습니다. 👀
• ZeroSync는 데이터 변경 사항을 효율적으로 동기화하여 UI 업데이트를 최적화합니다. ⚡