TrollGG

프로젝트 설명

Spring Boot의 MVC 아키텍처와 외부 REST API 연동을 학습하기 위해 OP.GG를 클론 코딩한 프로젝트이다. 서버 측에서는 HttpURLConnection으로 Riot Games API(summoner-v4)를 호출하여 소환사 정보를 조회하고, Gson으로 JSON 응답을 파싱하여 DTO에 매핑한 뒤 JSP 뷰에 ModelAndView로 전달한다. 클라이언트 측에서는 jQuery AJAX로 5개 Riot API 엔드포인트(match-v5, league-v4, spectator-v4, champion-mastery-v4, Data Dragon)를 직접 호출하여 최근 20경기 전적, 솔로/자유 랭크 정보, 인게임 실시간 관전 데이터, 챌린저 상위 40명 랭킹을 동적으로 렌더링한다. MyBatis Mapper XML로 소환사 데이터를 MariaDB에 저장·조회하는 영속 계층을 구현했으며, VersionCheck 유틸리티 클래스로 Data Dragon CDN의 패치 버전을 자동 감지하여 챔피언·아이템·스펠 이미지 경로를 동적으로 관리한다.

주요 내용

• Riot Games API 6개 엔드포인트 연동, 전적·인게임·랭킹 서비스 구축
• 서버-클라이언트 하이브리드 API 호출 구조 설계
• MyBatis 동적 SQL 기반 소환사 검색 및 데이터 캐싱
• Chart.js 승률·KDA·포지션 통계 시각화 대시보드
• Data Dragon CDN 패치 버전 자동 동기화 유틸리티

담당 기능

• 소환사 전적 검색 — 서버 측 HttpURLConnection으로 summoner-v4 API 호출 후 Gson 파싱, 클라이언트 측 jQuery AJAX로 match-v5 API에서 최근 20경기 매치 데이터 조회 및 동적 렌더링
• 매치 상세 정보 — 10명 참가자별 챔피언·스펠·룬·아이템·KDA·CS·피해량 표시, 팀별 오브젝트(바론·드래곤·타워) 및 총 킬·골드 비교, 킬콤보(더블~펜타킬) 표시
• 인게임 실시간 정보 — spectator-v4 API로 현재 진행 중인 게임의 10명 참가자 챔피언·스펠·룬·티어·숙련도 상위 3챔피언 및 밴 정보 조회
• 챌린저 랭킹 페이지 — league-v4 API로 챌린저 리그 전체 소환사를 LP 기준 정렬, 상위 40명의 프로필·티어·LP·승률·레벨·숙련도 챔피언 표시
• 승률 통계 시각화 — Chart.js 도넛 차트로 승/패 비율 표시, 모스트 챔피언 3개 및 선호 포지션 2개의 승률·KDA 통계 산출
• Data Dragon CDN 버전 자동 감지 — VersionCheck 유틸리티로 Riot Data Dragon realms API를 호출하여 챔피언·아이템·스펠·프로필 아이콘 이미지 경로의 패치 버전을 동적 관리

깨달은 점

• 💡 HttpURLConnection으로 외부 REST API를 직접 호출하고 Gson으로 JSON 응답을 파싱하는 과정에서, HTTP 통신의 기본 흐름(URL 생성→연결→스트림 읽기→파싱)과 예외 처리의 중요성을 체득 — 이후 RestTemplate, WebClient 등 고수준 HTTP 클라이언트의 설계 원리를 이해하는 기반이 됨
• 💡 Spring Boot의 Controller-Service-Mapper 3계층 구조를 직접 구현하며 MVC 패턴에서 각 계층의 역할 분리(요청 라우팅, 비즈니스 로직, 데이터 접근)를 학습하고, ModelAndView를 통한 서버 사이드 렌더링 흐름을 이해
• 💡 MyBatis Mapper XML의 동적 SQL(<if> 태그)과 parameterType/resultType 매핑을 활용하여 소환사 검색 시 공백 제거 LIKE 쿼리를 구현하며, ORM 없이도 SQL을 직접 제어하는 데이터 접근 패턴을 경험
• 💡 Riot Games API의 다중 엔드포인트(summoner-v4, match-v5, league-v4, spectator-v4, champion-mastery-v4)를 조합하여 하나의 완성된 서비스를 구축하며, API 키 관리, Rate Limit 대응, 리전별 엔드포인트 분리(kr.api vs asia.api) 등 외부 API 연동의 실무적 고려사항을 학습

기술 스택

프로젝트 이미지