DORANGG - 리그 오브 레전드 AI 코칭 도우미 웹앱

📍주제

• DORAN.GG: 리그 오브 레전드 AI 코칭 도우미 웹앱 개발
• Spring Boot + React 기반 풀스택 프로젝트, Riot API 연동 및 AI 코칭 기능 구현

Github: DORAN.GG

💬 배운 기술 / 지식

• Spring Boot 3계층 구조 (Controller, Service, Repository) 기반 API 설계 및 구현
• JWT 기반 인증 및 Spring Security Role/권한 관리
• Riot API 연동, 매치 데이터 저장 및 AI 기반 분석
• WebSocket/STOMP 기반 실시간 오픈채팅 구현
• Next.js + TailwindCSS로 Dashboard, Community, AI 위젯 프론트 구현
• DTO/ResponseEntity 활용, Jakarta Validation 적용, 데이터 무결성 관리
• ERD 작성, 데이터 정규화, JPA 단방향 연관관계 설계
• AI 모델 활용 (OpenAI API) + 게임 데이터 기반 추천 및 하이라이트 생성
• 배포/인프라: AWS EC2, RDS, ElastiCache, Vercel, Cloudflare

🧩 설명

• 회원 시스템 (Member)
  • 회원가입/로그인/프로필 관리, JWT 인증 적용
  • 탈퇴 시 Redis 블랙리스트 처리로 토큰 사용 불가 상태 보장
• Todo & Goals
  • 개인 목표 관리, 상태값: 시작 전 / 진행 중 / 완료 / 실패
  • 체크리스트 기반 진행 확인, CRUD 및 체크 히스토리 기록
• Riot API 연동 (RiotUser, Match, MatchStatSummary)
  • 사용자 전적 수집, 최근 20경기 요약, AI 전략 추천 및 빌드 제안
  • AI 하이라이트 코멘트 생성 및 Dashboard 위젯 표시
• Community & Open Chat
  • 게시글 CRUD, 비로그인 조회 가능, JWT 인증 적용
  • WebSocket/STOMP 기반 실시간 채팅, 최근 200개 메시지 우선 로드
• AI 기반 도란봇
  • 유저 전적 기반 전략/빌드 추천 및 일일 요약 문구 제공
  • 서버 성능 고려하여 중복 요청 제한, 피드백 사운드 제공
• 마이페이지 / 보안
  • 회원 정보 관리, JWT 인증/인가, 세션 및 쿠키 활용
  • Spring Security 기반 최소 권한 원칙, 민감 정보 분리

🚀 주요 개념 및 개발 가이드

📄 API 명세서 작성

• 클라이언트-서버 통신 정의, 요청 URL, HTTP 메서드, 요청/응답 JSON 포맷, 상태 코드 명확화

🏗️ 3계층 구조

• Controller → Service → Repository 역할 분리
• 유지보수성 및 확장성 확보

🔄 JPA(Entity) & 단방향 연관관계

• 테이블 구조 매핑, 단방향 연관관계 설계
• ERD 작성과 데이터 정규화로 무결성 유지

📦 DTO & ResponseEntity

• 데이터 구조 분리 및 HTTP 상태 코드 관리

✅ 입력값 검증 (Jakarta Validation)

• @NotBlank, @Email, @Valid 적용
• 잘못된 요청 데이터 차단

🔐 인증/인가

• JWT 발급/검증, Role 기반 접근 제어
• Redis 블랙리스트로 토큰 무효화 처리

🧭 AI 분석

• 최근 전적 20개 기반 전략/빌드 추천
• 하이라이트 요약 코멘트 생성

💡 느낀 점 및 개선할 점

• Riot API와 AI를 통합한 서비스 설계 경험, 실무 감각 향상
• 풀스택 구현으로 프론트-백엔드 연동, WebSocket 실시간 처리 경험
• ERD와 단방향 연관관계 설계, 데이터 정규화 이해도 증가
• AI 모델과 게임 데이터를 연계해 실시간 분석/추천 구현 가능
• 개선점: 배포 시 서브 도메인 및 SSL 인증서 관리, 프론트/백엔드 https 완전 분리 필요

🧾 사용된 주요 기술 / 라이브러리

• Backend: Spring Boot, Spring MVC, Spring Data JPA, Spring AI, Spring Security, JWT, Redis, WebSocket/STOMP
• Frontend: Next.js, React, TailwindCSS
• DB: MySQL, Redis
• Infra / Deployment: AWS EC2, RDS, ElastiCache, Vercel, Cloudflare
• Dev Tools: IntelliJ, Git, Postman, ERD Cloud, Zep

🏷️ 필수 키워드

Spring Boot

React

Next.js

JWT

Riot API

AI

WebSocket

Dashboard

Todo

Community

Full-Stack

ERD

DTO

ResponseEntity

Validation

OpenAI API