ENGINEERING · 환율계산기 기술 소개
예쁜 화면이 아니라 실제로 돌아가는 구조로 신뢰를 만듭니다. 데이터가 어떻게 흐르고, 무엇을 어디에 두었는지 정리했습니다.
기술 스택
STACK프론트엔드
Thymeleaf SSR서버→브라우저 실시간 푸시(SSE)Vanilla JS
백엔드
Java 21Spring Boot헥사고날 아키텍처WebClient
데이터
MySQLRedis (캐시 + Pub/Sub)
인프라
Kubernetes무중단 블루-그린 배포
데이터 흐름
ARCHITECTURE요청이 들어와 화면에 반영되기까지의 경로입니다. 내부 호스트명·인증정보는 제외한 추상 구조입니다.
클라이언트서비스데이터스토어외부 API게이트웨이⇢ 별도 계층 호출(점선)
- 브라우저 → 환율 서비스 (SSR · API · SSE) (SSR · REST · SSE 구독)
- 환율 서비스 (SSR · API · SSE) → MySQL · 환율/회차 (읽기/쓰기)
- 환율 서비스 (SSR · API · SSE) → 외부 환율 데이터 API (시세 조회)
- 환율 서비스 (SSR · API · SSE) → Redis Pub/Sub (갱신 이벤트 발행)
- Redis Pub/Sub → 환율 서비스 (SSR · API · SSE) (전 인스턴스 팬아웃)
- 환율 서비스 (SSR · API · SSE) → 브라우저 (SSE 실시간 푸시)
- 브라우저 → API Gateway (로그인·게시판)
- API Gateway → member · board 공통 서비스 (JWT 검증)
설계 포인트
01
밀어주는 데이터
클라이언트가 주기적으로 묻지 않습니다. 새 시세가 들어오면 Redis Pub/Sub로 모든 서버에 퍼뜨려 SSE로 즉시 밀어줍니다.
02
소스 교체 가능 설계
외부 환율 데이터 공급처를 인터페이스로 추상화해, 소스가 바뀌어도 핵심 로직은 그대로입니다.
03
로그인 없는 흐름
결과를 보기 전 로그인을 요구하지 않습니다. 로그인·게시판은 별도 공통 서비스(API Gateway 경유)로 분리했습니다.
구조는 그만, 직접 돌려보는 게 빠릅니다.
환율계산기을(를) 열어 직접 확인해 보세요.