3일 만에 뚝딱! React, Canvas, Firebase로 만든 웹 게임
by DD
5개월 전
조회수 14
React와 Canvas API를 활용하여 3일 만에 웹 팬게임 개발
Firebase Realtime Database를 사용하여 실시간 멀티플레이어 구현 및 100명 동시 접속 지원
useEffect 의존성 최적화를 통해 렌더링 성능 86% 향상 달성
React와 Canvas API를 활용한 게임 렌더링
React의 상태 관리와 Canvas API를 결합하여 게임 화면을 구성했다. 구체적으로 requestAnimationFrame을 사용하여 60fps의 안정적인 렌더링을 구현했다. 따라서 useEffect 의존성 최적화를 통해 불필요한 리렌더링을 방지하고, 성능 향상을 달성했다.
Firebase Realtime Database를 활용한 멀티플레이어 구현
Firebase Realtime Database를 사용하여 실시간 멀티플레이어 기능을 구현했다. onDisconnect를 활용하여 접속/종료를 감지하고, 플레이어 위치 동기화를 실시간으로 처리했다. 반면, 동시성 문제와 데이터 일관성 유지를 위한 추가적인 노력이 필요했다.
성능 최적화: 440fps에서 60fps로 개선
과도한 useEffect 의존성으로 인한 렌더링 문제를 해결했다. 구체적으로 useRef를 사용하여 state 변경에 따른 불필요한 리렌더링을 방지했다. 따라서 렌더링 성능 86% 향상을 달성하고, 부드러운 게임 플레이를 제공할 수 있게 되었다.
