N-CBT

2024.10 ~ present

Github (FE) : https://github.com/ghkdusghd/NCBT-FRONT

Github (BE) : https://github.com/ghkdusghd/NCBT-BACK

네이버 클라우드 자격증 (NCP 기술자격증) 시험을 준비하는 수험생들을 위한 서비스입니다. NCP 문제은행의 모든 문항과 해설을 제공하며, CBT 모의고사 기능으로 실제 시험과 유사한 환경에서 문제를 풀고 자동으로 채점할 수 있습니다. 네이버 클라우드, Vercel 을 통해 배포하여 약 3개월간 운영했으며 현재는 종료된 상태입니다. UI 재설계 및 JPA 기반으로 ORM 마이그레이션을 진행중이며, V2 버전은 6월 중 재배포할 예정입니다.

주요 역할 .

✨ RestfulAPI 개발, Security 와 JWT 를 결합한 인증 인가 시스템 개발

✨ 비효율적인 쿼리를 개선하여 통신 속도 향상 (68%)

✨ React 로 API 통합 및 UI 구현, 화면 렌더링 속도 개선

✨ Apache 를 활용한 배포 아키텍처 구성 : Apache 를 앞단에 Reverse Proxy 로 배치하여 로드밸런싱, SSL 처리, 보안적인 이점을 갖도록 설계

기술 스택 .

✨ Java, Spring Boot, MyBatis

✨ React, Chart.js

✨ MySQL

✨ Naver Cloud, Docker

프로젝트 아키텍처 V1 .

스크린샷 2025-01-16 오후 1.22.10.png

코드 레벨 아키텍처 V1 .

성장 경험 .

1️⃣ Spring @Async 를 활용한 비동기 처리로 API 응답 시간 단축 (11.6ms → 2.6ms로 약 77% 개선)

AS-IS	문제 오류 API 에서는 문제 오류가 접수되면 JavaMailSender 로 관리자에게 메일을 전송하는데, 전송이 완료될때까지 기다려야 해서 약 3~5초정도 페이지가 정지된 채로 노출되는 문제가 발생했습니다.
TO-BE	메일이 전송 중에도 사용자가 페이지를 자유롭게 이동할 수 있도록 메일 전송 로직을 비동기 방식으로 처리했습니다. Spring 의 @Async 어노테이션을 활용한 멀티 스레드 기반으로 구현했습니다.
회고	@Async 는 간편하게 비동기 처리를 구현할 수 있다는 장점이 있으나, 장애 복원력이 약하고 처리 실패 시 추적이 어렵다는 한계가 있습니다. 추후 사용자 수 증가에 따라 작업 안정성이 중요해지면 RabbitMQ 기반 아키텍처로의 전환을 고려해도 좋겠다는 생각이 들었습니다.

2️⃣ 테이블 JOIN 으로 비효율적인 쿼리 개선 (69ms → 22ms로 약 68% 개선)

AS-IS	랭킹 기능 개발 중 기존에는 두 개 테이블에서 각각 데이터를 조회하는 두 번의 쿼리를 사용하는 방식으로 구현했는데, JOIN 으로 통합 조회하는 것이 더 효율적일 것이라는 생각이 들었습니다. 그래서 성능 테스트를 통해 어떤 방식이 더 효율적인지 검토 후 결정하기로 했습니다.
TO-BE	🔍 성능 테스트 과정 및 결과
1. 10만 건의 테스트 데이터 생성

유의미한 결과를 도출하기 위해서는 대용량 데이터를 기반으로 한 테스트가 적절하다고 판단하여 10만 건의 테스트 데이터를 생성했습니다. 2. MySQL Workbench에서 Duration Time 기준으로 테스트
Workbench에서 쿼리를 실행한 뒤, Duration Time(실행 시간)을 기준으로 비교했습니다.
단일 JOIN 쿼리 실행 : 28ms (76% 감소)
복수 개의 쿼리 실행 : 120ms 3. Postman 을 활용한 API 단위 테스트
Workbench 는 쿼리 캐시 등의 영향으로 결과가 왜곡될 수 있다고 판단하여 Postman 을 통해 실제 API 요청 기반 테스트도 함께 진행했습니다.
단일 JOIN 쿼리 실행 : 22ms (68% 감소)
복수 개의 쿼리 실행 : 69ms | | 회고 | 약 68% 성능 개선 효과를 보았으나 일반적으로 DB 성능 최적화 문서나 커뮤니티에서 이야기하는 범용적인 결과이기도 합니다. 현재 상태도 나쁘진 않지만 대용량 환경을 고려하면 복잡한 서브 쿼리를 제거하거나 인덱스를 추가하는 것도 방법일 수 있겠다는 생각이 들었습니다. |

트러블 슈팅 .

1️⃣ React 상태 관리 중 발생한 무한 렌더링 이슈 해결

| AS-IS | 🔥 문제 1 토큰 재발급 성공 후에도 useEffect 가 반복 실행되어 무한 렌더링 발생 🔥 문제 2 브라우저 재접속 시 refresh token 은 존재하지만 재발급 로직 미실행 | | --- | --- | | TO-BE | ✅ 해결 1 useEffect 의존성 배열을 제거하여 렌더링 루프를 방지 ✅ 해결 2 컴포넌트 최초 마운트 시 반드시 재발급 로직이 실행되도록 개선 | | 회고 | 개발자가 의도한대로 useEffect 가 실행되려면 조건을 정확히 지정하는 것이 중요하다고 실감했습니다. token 이 없으면 재발급 로직이 실행되지 않도록 조건문을 추가했고, 추가로 useEffect 내부에서 실행하는 값이 변경될 때마다 컴포넌트가 불필요하게 리렌더링되는 경우가 있어서 해당 로직을 외부 함수로 분리하는 방식으로 개선했습니다. |