도구/살펴방/기술 소개
ENGINEERING · 살펴방 기술 소개

살펴방, 이렇게 만들었습니다.

예쁜 화면이 아니라 실제로 돌아가는 구조로 신뢰를 만듭니다. 데이터가 어떻게 흐르고, 무엇을 어디에 두었는지 정리했습니다.

기술 스택

STACK
프론트엔드
React 19TypeScriptViteReact QueryZustand
백엔드
Java 21Spring BootAPI Gateway (JWT 인증)
데이터
MySQL
인프라
Kubernetes무중단 블루-그린 배포

데이터 흐름

ARCHITECTURE

요청이 들어와 화면에 반영되기까지의 경로입니다. 내부 호스트명·인증정보는 제외한 추상 구조입니다.

피드백·알림브라우저 (React SPA)랜딩·공유 페이지 (SSR)API Gateway (JWT · 헤더 주입)살펴방 백엔드MySQL · 매물/체크/공유board · message 공통 서비스
클라이언트서비스게이트웨이데이터스토어 별도 계층 호출(점선)
  • 브라우저 (React SPA)랜딩·공유 페이지 (SSR) (최초 진입 (SEO·OG))
  • 브라우저 (React SPA)API Gateway (JWT · 헤더 주입) (모든 API 호출)
  • API Gateway (JWT · 헤더 주입)살펴방 백엔드 (인증 후 전달)
  • 살펴방 백엔드MySQL · 매물/체크/공유 (읽기/쓰기)
  • 살펴방 백엔드board · message 공통 서비스 (피드백·알림)

설계 포인트

01
게이트웨이 단일 관문

모든 API가 API Gateway를 거칩니다. 인증(JWT)과 사용자 식별 헤더 주입을 한곳에서 처리해 백엔드는 비즈니스에 집중합니다.

02
비회원 → 회원 이관

로그인 없이 쓴 기록을 로그인 시 계정으로 옮겨, 가입 부담 없이 시작하고 나중에 보존합니다.

03
공유 가능한 결과

체크·비교 결과를 링크로 공유할 수 있어 혼자가 아니라 함께 결정합니다.

구조는 그만, 직접 돌려보는 게 빠릅니다.
살펴방을(를) 열어 직접 확인해 보세요.