Spring Boot와 React을 이용하여 구현한 웹 애플리케이션
웹 서비스 링크: https://la.classtest.site/
프레젠테이션 링크 : https://writhing-fish-ggqnac6.gamma.site/
https://github.com/pandahwang/la-front-end
Java, Javascript, Typescript, SpringBoot, React, TailwindCSS, AWS RDS, EC2, Route53, ALB, ACM, Redis, Docker, Github Actions(CI/CD), Nginx
- 서버: AWS EC2 (Ubuntu)
- SSL 인증 : ACM을 이용하여 SSL 인증
- 로드밸런서: AWS Load Balancer를 이용해 HTTP(80) 요청을 인증된 HTTPS(443)로 리다이렉트하며, HTTPS는 EC2로 연결되도록 설정
- DNS : AWS Route53를 이용해 도메인 등록 [자세히 알아보기]
- Docker : Docker Compose로 Spring Boot와 Redis 서버를 함께 구동
- 리버스 프록시: Nginx로 EC2 80포트에 접근하는 요청을 /api 경로는 8080포트(Spring Boot)로,
나머지 요청은 3000 포트(React)로 포워딩 [자세히 알아보기] - CI/CD : Github Actions 사용하여 CI/CD 기능 구현 [자세히 알아보기]
- Spring Boot: JAR 파일로 빌드 후, 내장된 Apache Tomcat으로 배포
- React: npx Serve를 이용해 배포
[팀구현 기능]
○ 사용자의 성향을 분석하여 가장 적합한 5가지 직업을 추천.
○ 로스트아크 직업 통계와 테스트 결과 통계 조회.
○ 테스트 결과와 의견을 공유하는 댓글 기능.
○ 댓글 수정, 삭제 기능 및 직업명으로 검색하는 기능.
[담당역할 상세]
● 프로젝트 팀장 담당
● 직업별 성향 기준치 설계 [자세히 알아보기]
● 테스트 질문 설계 [자세히 알아보기]
● 외부 api를 이용한 로스트아크 전체 직업 통계 저장 및 조회 기능 구현
● 백엔드와 프론트엔드 데이터 바인딩
● 댓글 데이터 캐싱 기능 구현 [자세히 알아보기]
● 인프라 구축 및 배포 총괄
/api/statistics/alluser [GET] : 로스트아크 전체 직업 통계를 조회합니다.
/api/statistics/alluser[PUT] : 외부 API로부터 전체 직업 통계를 받아와 데이터를 갱신합니다.
매일 00시 00분에 데이터를 주기적으로 로스트아크 정보 제공 사이트 loagg.com 로부터 통계 데이터를 받아와 DB에 저장합니다.
갱신 기능 작동 흐름
- loagg.com API로부터 JSON 데이터를 받아와 파싱하여 JSON 배열로 변환합니다. [과정]
- 데이터 가공
2-1. 가져온 데이터 중 직업별 데이터만 추출합니다.
2-2. 추출한 데이터에서 미전직 직업을 필터링하여 제거합니다. - 가공한 데이터를 Reflection 클래스를 이용해 [동적 메서드]를 사용하여 alluser 테이블에 데이터를 저장합니다.
Redis를 활용한 캐싱 전략으로 성능을 크게 개선했습니다. [자세히 알아보기]
댓글 조회 기능에 @Cacheable 어노테이션을 사용해 Look Aside + Write Around 전략을 적용하였습니다.
k6를 이용한 성능 테스트 결과, Redis 캐싱 적용 전 87.9 TPS에서 적용 후 26,562.8 TPS로 초당 처리량이 약 300배 향상되었습니다.
Postman을 통한 응답 속도 테스트에서는 캐싱 적용 후 응답 속도가 10배 개선되었습니다.
댓글 데이터 변동 시 @CacheEvict로 캐시를 모두 삭제해 조회 시 다시 갱신하는 방식을 사용했습니다.
이를 통해 데이터베이스 접근을 최소화하고 빠른 응답 시간을 확보하였습니다.