피드로 돌아가기
Building a Real-Time World Cup 2026 Bracket Predictor with Vanilla JS and GitHub Actions
Dev.toDev.to
Infrastructure

GitHub Actions 기반 Serverless Sync로 API Rate Limit 극복한 실시간 예측 시뮬레이터

Building a Real-Time World Cup 2026 Bracket Predictor with Vanilla JS and GitHub Actions

Ryo Kurita2026년 6월 24일4intermediate

Context

무료 API의 분당 10회 요청 제한으로 인한 실시간 데이터 업데이트 병목 발생. 클라이언트 직접 호출 시 Rate Limit 초과 및 서비스 중단 위험이 존재하는 구조적 한계 직면.

Technical Solution

  • GitHub Actions Cron Job을 활용한 Python 기반 데이터 동기화 파이프라인 구축으로 API 요청 횟수 최적화
  • 외부 API 데이터를 정적 JSON 파일로 변환 후 리포지토리에 Push 하여 정적 호스팅 기반의 Cache 레이어 구현
  • ELO 기반의 Poisson-like 시뮬레이션 알고리즘을 통한 승률 계산 및 현실적인 경기 스코어 생성 로직 설계
  • FIFA Annex C의 15가지 경우의 수를 Lookup Dictionary로 매핑하여 복잡한 3위 진출팀 브래킷 동적 갱신
  • 수학적 탈락 필터링 로직을 통한 후보군 실시간 제거로 데이터 처리 효율성 제고
  • Framework 없이 Vanilla JS와 CSS3만 사용하여 60fps Parallax 효과 및 최소한의 런타임 오버헤드 달성

1. 외부 API의 Rate Limit 제약 시, GitHub Actions 등을 활용한 정적 파일 기반의 중간 캐싱 레이어 검토

2. 복잡한 비즈니스 룰(예: FIFA Annex C) 처리 시 조건문 나열보다 Lookup Table/Dictionary 매핑 방식 적용

3. 고성능 애니메이션과 즉각적인 초기 로딩이 필수적인 서비스의 경우 무거운 Framework 대신 Vanilla JS 채택 고려

원문 읽기