프론트엔드는 화려한 화면을 만들기 위한 것이 아니다

chap04의 frontend는 매우 단순하다.

복잡한 프론트엔드 프레임워크도 없고, 화면도 크지 않다.

하지만 이 단순한 화면은 중요한 역할을 한다.

지금까지 백엔드 안에서만 보던 주문 흐름을 사용자 입장에서 관찰하게 해 준다.

즉, 이 장의 프론트엔드는 “예쁜 화면”이 아니라 “흐름을 눈으로 확인하는 화면”이다.

사용자는 주문을 요청하고 기다린다

frontend/index.html의 핵심 흐름은 단순하다.

1. 사용자가 JWT 토큰을 입력한다.
2. 브라우저가 토큰에서 사용자 ID를 읽는다.
3. WebSocket에 연결한다.
4. /topic/orders/{userId}를 구독한다.
5. 주문 생성 API를 호출한다.
6. 주문 완료 알림이 오면 화면에 표시한다.

여기서 중요한 점은 주문 요청과 주문 완료 알림이 같은 순간에 끝나지 않는다는 것이다.

주문 생성 API는 “주문을 시작했다”는 의미에 가깝다.

반면 주문 완료 알림은 재고 차감, 배송 처리, 주문 완료까지 뒤쪽 흐름이 끝났다는 의미에 가깝다.

프론트엔드는 두 통로를 함께 사용한다

이 화면은 HTTP와 WebSocket을 함께 사용한다.

HTTP는 사용자가 명령을 보낼 때 사용한다.