오늘날 대부분의 웹 애플리케이션에는 React, Vue, Angular 같은 무거운 JavaScript 프레임워크가 들어있습니다. 그렇다면 10개의 인터랙티브 웹 게임을 포함하는 PuzzleVault를 만들면서 왜 이 모든 것을 무시하고 순수 바닐라 JavaScript, HTML5, CSS3만으로 사이트를 구축했을까요?
이 결정은 현대 웹 게임의 두 가지 장벽인 성능 오버헤드와 모바일 접근성을 해결하기 위한 계산된 엔지니어링 선택이었습니다.
1. 제로 로딩 시간과 초소형 코드
React 기반 SPA에 방문하면 수 메가바이트의 JavaScript를 다운로드해야 합니다. PuzzleVault는 바닐라 JS로 작성하여 전체 핵심 페이로드가 100 KB 미만입니다. SortStack이나 PatternPop 클릭 시 50밀리초 이내에 초기화됩니다.
2. 렌더 사이클의 완벽한 제어
React의 Virtual DOM은 데이터 테이블에는 훌륭하지만 60 FPS 게임에는 미세 끊김을 유발합니다. MergeChain 같은 실시간 물리 게임에서 바닐라 JS는 requestAnimationFrame()과 Canvas API에 직접 접근하여 기기의 네이티브 새로고침 속도와 완벽히 동기화합니다.
3. 의존성 지옥 회피
W3C 표준 네이티브 웹 API에만 의존하므로 코드가 부패하지 않습니다. Math.random()은 10년 전이나 오늘이나 동일하게 동작합니다. 빌드 도구, Webpack, Node 모듈을 제거하여 유지보수가 최소화됩니다.
4. 배터리 수명 극대화
순수 바닐라 로직은 리액티브 상태 스토어의 복잡한 메모리 할당 오버헤드가 없어 가비지 컬렉터가 덜 동작하고, CPU 스파이크가 줄어 배터리를 보존합니다.
결론
프레임워크는 엔터프라이즈 소프트웨어에 훌륭하지만, 즉각적이고 성능 좋은 인터랙티브 퍼즐 사이트에는 불필요한 무게를 추가합니다. 바닐라 JS는 PuzzleVault가 빠르고 접근 가능하고 자체 포함된 상태를 유지하도록 보장합니다.