문제 상황

Next.js의 서버 컴포넌트(SSR)와 클라이언트 컴포넌트(CSR) 환경에서 JWT 토큰 자동 갱신 로직을 구현하는 과정에서 어려움을 겪었습니다.

• 클라이언트에서 401 에러 시 토큰 갱신은 구현했지만, 서버 컴포넌트에서 쿠키를 직접 수정할 수 없는 문제
• 서버 컴포넌트는 클라이언트의 커스텀 fetch 함수를 사용할 수 없어 별도 갱신 로직 필요
• 페이지 이동 시 만료된 토큰으로 인한 인증 에러 발생

해결 방법

1) 클라이언트 갱신 로직

• 커스텀 fetch 함수로 401 에러 감지 및 자동 토큰 갱신 API 호출
• 새 토큰을 HttpOnly Cookie에 이중 암호화하여 저장
• Bearer 헤더에 새 토큰을 담아 원래 요청 순차적으로 재실행

2) 서버 컴포넌트 갱신 로직

• middleware.ts 활용: 모든 페이지 진입 시 쿠키에서 토큰 추출 및 검증
• 토큰 만료 시간 체크(exp claim 확인)
• 만료 임박(5분 이내) 또는 만료 시 자동 갱신 API 호출
• NextResponse.next()의 cookies.set()으로 새 토큰 쿠키 업데이트

결과

• 클라이언트/서버 컴포넌트 모두에서 자동 토큰 갱신 구현
• 사용자가 갱신 과정을 인지하지 못하는 seamless한 UX 제공
• 토큰 만료로 인한 인증 에러 방지 및 안정적인 인증 상태 유지

문제 상황

프리퀀시 스탬프 계산 쿼리의 응답 시간이 30초~1분까지 소요되어 사용자 경험에 심각한 문제가 발생했습니다.

• 복잡한 JOIN과 서브쿼리로 인한 성능 저하
• 대량의 데이터 처리 시 응답 지연
• 실시간 조회가 필요한 기능에서 사용 불가능한 수준

해결 방법

• 메인 테이블 구조 변경 및 인덱스 재설계
• 불필요한 JOIN 조건 제거 및 최적화
• 실행 계획(Execution Plan) 분석을 통한 병목 지점 파악
• 서브쿼리를 CTE(Common Table Expression)로 변환

결과

• 쿼리 응답 시간 30초~1분 → 3초 이내로 단축 (90% 개선)
• 실시간 조회 기능 정상 작동
• 사용자 만족도 크게 향상

문제 상황

메시지 전송 시 DB Sequence 조회로 인한 지연이 발생하여 사용자 체감 속도가 느렸습니다.

• 메시지 전송 → DB Sequence 조회(50-100ms) → 저장 → 응답
• 실시간 채팅 특성상 즉각적인 피드백 필요
• 메시지 생성 때마다 DB 조회로 인한 부하

해결 방법

1) 낙관적 업데이트 (Next.js)

• 메시지 전송 즉시 임시 ID(UUID)로 UI에 먼저 표시
• React Query의 Optimistic Update 활용
• 서버 응답 받으면 임시 ID → 실제 ID로 교체

2) Sequence 사전 조회 시스템 (Spring Boot)

• 메모리에 Sequence를 미리 조회해서 Queue에 보관
• ConcurrentLinkedQueue로 Thread-Safe 구현
• Queue 크기 20개 미만 시 비동기로 50개 조회, 0개 시 동기 조회
• AtomicBoolean으로 조회 중복 방지

결과

• 메시지 ID 생성 시간 50ms → 1ms 미만으로 단축
• 낙관적 업데이트로 사용자 체감 지연 완전 제거