프로젝트 소개
메타버스 게임 운영사의 어드민 서비스입니다. 게임 운영에 필요한 데이터 관리와 사용자 관리 기능을 제공합니다.
핵심 기술
주요 기술 스택
Front-End
ReactTypeScriptMaterial UIViteAxios
트러블슈팅
Mutex Lock 기반 대기 큐로 토큰 중복 갱신 방지
문제
Token 만료 시점에 여러 요청이 동시에 발생하면, 각 요청이 개별적으로 갱신을 시도해 중복 재발급 요청이 서버로 전달됐습니다.
해결
OS의 뮤텍스 개념을 Axios Interceptor에 적용했습니다. 첫 요청이 갱신을 시작하면 isRefreshing 플래그로 락을 걸고, 이후 요청들은 큐에 대기시킵니다. 갱신 완료 후 새 토큰으로 대기 요청을 일괄 재실행합니다.
결과
재발급 요청을 1회로 최적화하고, 사용자는 인증 만료로 인한 끊김 없이 서비스를 이용할 수 있게 됐습니다.
문제
서비스 규모가 커지면서 콜드 스타트와 빌드 시간이 늘어나 개발 생산성이 저하됐습니다.
해결
CRA에서 Vite로 빌드 도구를 마이그레이션했습니다.
결과
콜드 스타트 8초 → 3초, 빌드 30초 → 10초로 단축됐습니다.