TIL - 20250917

0917 Full-Stack: SSE Real-time Notifications and Spring AI Integration

---

✅ 1. 백엔드(BE): SSE를 이용한 단방향 실시간 알림 시스템 구축

• WebSocket이 양방향 통신에 적합하다면, SSE(Server-Sent Events)는 서버에서 클라이언트로의 단방향 데이터 스트리밍에 특화된 기술입니다. 이를 활용하여 사용자에게 실시간 알림을 보내는 기능을 구현했습니다.

➕ 주요 개념

1. SSE (Server-Sent Events):

   • 개념: 일반적인 HTTP 연결을 기반으로, 서버가 클라이언트에게 지속적으로 텍스트 기반의 이벤트를 보낼 수 있는 HTML5 표준 기술입니다.
   • 특징:
     • 단방향 (Server → Client): 서버만이 메시지를 보낼 수 있습니다.
     • 자동 재연결: 클라이언트의 연결이 끊어지면 브라우저가 자동으로 재연결을 시도합니다.
     • HTTP 기반: WebSocket과 달리 별도의 프로토콜이 아니므로 기존 인프라와 호환성이 좋습니다.
   • SseEmitter: Spring에서 SSE 연결을 표현하는 객체입니다. 컨트롤러는 각 클라이언트마다 SseEmitter 객체를 생성하고, 이 객체를 통해 데이터를 전송(send())합니다.

2. 알림 서비스 구현 (NotificationService):

   • 역할: 어떤 사용자에게 어떤 알림을 보낼지를 결정하고, 해당 사용자의 SseEmitter를 찾아 데이터를 전송하는 중앙 서비스입니다.
   • 구독 관리: 사용자가 알림을 구독하면(GET /api/notifications/subscribe), NotificationController는 NotificationService를 통해 해당 사용자의 SseEmitter를 생성하고 서버 메모리에 저장합니다.
   • 이벤트 기반 알림 전송: WebSocketEventsListener와 같은 다른 서비스에서 특정 이벤트(e.g., "스터디룸에 새 사용자 입장")가 발생하면, NotificationService를 호출합니다. 서비스는 해당 스터디룸의 모든 참여자에게 알림을 보내도록 SseEmitter를 통해 데이터를 스트리밍합니다.

---

✅ 2. 백엔드(BE): Spring AI를 이용한 LLM 통합

• Spring AI 프로젝트를 도입하여, 애플리케이션에 대규모 언어 모델(LLM)의 강력한 기능을 손쉽게 통합했습니다. 이를 통해 코드 리뷰, 개념 설명 등 지능적인 기능을 제공할 수 있게 되었습니다.

➕ 주요 개념

1. Spring AI:

   • 개념: Spring 애플리케이션에서 AI 모델(OpenAI의 GPT, Google의 Gemini 등)을 쉽게 사용할 수 있도록 추상화된 API와 통합 기능을 제공하는 Spring의 공식 프로젝트입니다.
   • 장점: 특정 AI 공급업체에 대한 종속성을 줄여줍니다. ChatClient라는 공통 인터페이스를 통해 코드를 작성하면, 설정을 바꾸는 것만으로 OpenAI에서 Gemini로 또는 그 반대로 쉽게 전환할 수 있습니다.

2. ChatClient:

   • Spring AI의 핵심 인터페이스로, LLM과 대화(Chat)하는 기능을 추상화합니다.
   • AIConfig 클래스에서 ChatClient를 Spring Bean으로 등록하고, application.yml에 API 키, 모델명, 온도(temperature), 최대 토큰 등 LLM의 동작을 제어하는 설정을 주입합니다.

3. AI 서비스 및 컨트롤러 구현:

   • AIService: ChatClient를 주입받아 실제 AI 모델과 통신하는 비즈니스 로직을 담당합니다. "코드 리뷰를 위한 프롬프트", "개념 설명을 위한 프롬프트" 등 각 기능에 맞는 프롬프트 엔지니어링이 이 서비스에서 이루어집니다.
   • AIController: 프론트엔드로부터 요청을 받아 AIService를 호출하고, AI 모델이 생성한 응답을 클라이언트에게 전달하는 API 엔드포인트를 제공합니다. (e.g., POST /api/ai/code-review)

---

✅ 3. 프론트엔드(FE): 실시간 알림 및 AI 어시스턴트 UI 구현

• 백엔드에서 제공하는 실시간 알림과 AI 기능을 사용자가 실제로 경험할 수 있도록 UI와 상태 관리 로직을 구현했습니다.

➕ 주요 개념

1. SSE 클라이언트 구현:

   • 브라우저에 내장된 EventSource API를 사용하여 SSE 서버에 연결하고, 서버로부터 오는 이벤트를 수신합니다.
   • NotificationStatus 컴포넌트를 만들어, SSE 연결 상태(연결 중, 연결됨, 끊김)를 사용자에게 시각적으로 피드백하고, 수신된 알림을 화면에 표시하는 로직을 구현했습니다.

2. AI 어시스턴트 UI:

   • AIAssistantFab (Floating Action Button): 화면 우측 하단에 떠 있는 버튼으로, 사용자가 언제든지 AI 어시스턴트를 호출할 수 있게 합니다.
   • AIAssistantPanel: 실제 채팅이 이루어지는 패널 UI입니다. 사용자가 패널을 드래그하여 위치를 옮기거나 최소화할 수 있도록 하여 사용자 경험을 향상시켰습니다.
   • Zustand 전역 상태 관리: AI 패널의 열림/닫힘 상태, 채팅 메시지 목록 등 복잡한 상태를 Zustand 스토어를 통해 전역적으로 관리하여, 다른 컴포넌트와의 상호작용을 용이하게 했습니다.

3. Heartbeat (주기적인 상태 전송):

   • 사용자가 스터디룸에 참여 중임을 서버에 주기적으로 알리기 위해, 프론트엔드에서 일정 시간 간격으로 "하트비트(heartbeat)" 메시지를 WebSocket을 통해 전송하는 로M. 이를 통해 서버는 사용자의 온라인 상태를 더 정확하게 파악할 수 있습니다.

---

📌 요약

• 백엔드는 SSE(Server-Sent Events) 기술을 도입하여, 서버에서 클라이언트로 실시간 알림을 보내는 단방향 데이터 스트리밍 기능을 구현했습니다.
• Spring AI 프로젝트를 통해 LLM(대규모 언어 모델)을 애플리케이션에 손쉽게 통합했으며, ChatClient라는 추상화된 인터페이스를 통해 코드 리뷰, Q&A와 같은 지능형 API를 구축했습니다.
• 프론트엔드는 브라우저의 EventSource API로 SSE 알림을 수신하고, 드래그 가능한 AI 어시스턴트 패널을 구현하여 사용자 경험을 향상시켰습니다.
• Zustand를 이용한 전역 상태 관리를 통해 복잡한 AI 채팅 UI의 상태를 효율적으로 처리했습니다.