OnlineMemo - Frontend Refactoring

→  60x Speed Improvement

Project

• README.md
• FullStack Repo

Refactor

• Github PR
• Before Code  /  After Code
• Backend Refactor

 Contents

1.   📄 Summary
2.   📗 API
3.   📈 Performance

📄 Summary

API 데이터 처리 방식 변경

• Backend 리팩토링에 따라 요청 및 응답 데이터 타입과 네이밍 수정.
• API를 상위 컴포넌트에서 호출하고, props로 하위 컴포넌트에 전달하는 방식으로 전환.
• API 호출 횟수를 최소화하고 구조를 개선하여 데이터 흐름이 최적화됨.

Axios Interceptor 적용

• API 호출 시 JWT 토큰을 헤더에 자동으로 추가하여 인증 프로세스를 간소화.
• JWT 토큰 만료 시, 자동으로 재발급 요청을 처리하고 새 토큰을 재세팅.

Refesh Token 추가 운용

• 기존 방식인 JWT Access Token만 운용 시, 6시간의 짧은 로그인 유지시간을 가지며 보안에 취약함.
• Access Token 만료 시, Refresh Token으로 재발급 받아 2주동안 로그인 유지가 가능하도록 보안을 강화.
• Access Token  →  Access Token + Refresh Token 함께 운용.

📗 API

Before	After
-  불필요하게 많은 API 호출로 성능 저하 발생 -  사용자에게 userId가 자주 노출되어 보안성 저하	-  RestFul URI 및 API 개수 단축으로 성능 향상 -  Security Context 정보로 userId를 대체하여 보안성 향상

📈 Performance

Benchmark

Before (MemoPage - 30 memos)	After (MemoPage - 30 memos)
-  FE : 각각의 모든 하위 컴포넌트에서 API 다중 호출 -  Result :  Request = 91번  &  Finish Time = 11.27s	-  FE : 상위 컴포넌트에서 API 호출 후 하위로 props 전달 -  BE : 전체적인 비즈니스 로직 및 쿼리 개선 -  Result :  Request = 2번  &  Finish Time = 193ms →  불과 30개의 메모임에도, 무려 58.4배의 성능 개선 →  Prod 재배포 시, 최소 60배 이상의 속도 향상 예상