[VIBE][JS] 클로드와 함께하는 SSE 예제

SCV·2025년 9월 22일
0
post-thumbnail

SSE 예제 파일 : https://github.com/scv-c/example_sse
※파일 업로드 방법을 몰라 링크 전달


밑바탕

나는 항상 게임을 만들어 보고 싶었다. 그러나 게임은 종합 예술이다.
무언가 하나를 하려면 아래와 같은 질문이 쏟아진다.

  • 데이터는 어떻게..?
  • 캐릭터 이미지는?
  • UI/UX는?
  • 컬러감은?
  • 로고는?
  • 기능들은?
  • 사용할 기술들은?
  • 배경 음악은?
  • 옵션들은?
  • CS는 어찌?
    ...중략...

아, 아이디어가 있으면 뭐하나. 해보고 싶은게 있어서 뭐하나. 생각이 뻗어나가니 어디서부터 해야할지 감이 안 잡혀서 막막하기만 하고 하는게 아무 것도 없다.

그래서 "궁금헀던 것부터 하나씩 해논 다음, 먼 미래에 모듈화까지 해보자!" 생각했다.
그럼 나중에 하나씩 끌어다가 가져다 쓰면 되니까 ...

그럼 당장 해보고 싶었던 것이 무엇인가?


계기

모든 게임에는 알람 설정이 존재한다. 모든 알람은 공지사항, 이벤트성, 노출성 등.. 여러 멘트가 항시 노출된다. 이것은 어떻게 만들었을까? 어떻게 하면 효과적으로 만들까?

공지 해야할 메세지가 있으면, 서버가 배치로 돌아서 읽고 뿌려? 근데 누구한테? 접속해있는 사람들한테만 가야할텐데.
접속한 사람들은 어떻게 봐? 요청을 따로 해야 받는 거 아닌가? 그러면 서로 다른 시간대에 알람을 보는건가? 굳이 로그인 안 한 사람이 알람 사항을 봐야하나? 푸쉬 알람이면 몰라도...


어떤 방식이든 제일 궁금한 건, "제일 쉬운 방법은 뭐야? 그래서 어떻게 만드는데? 어떻게 해야 동작해? 코드는 어떻게 생겼을까?" 이다.

  1. Pub/Sub 패턴을 사용한 뭐 시기 뭐시기..?
  2. 멘트를 미리 다 작성한 다음, 배치성으로 일정 시간마다 유저 개개인이 보게끔 ..?
  3. 클라이언트가 일정 시간마다 서버에 알람 존재 유무를 확인한 다음, 있다면 응답받아 노출하게..?
  4. FCM에 뭐 연결한다음 뭐시기 뭐시기...
    ...

뭐가 제일 좋은 방법인진 모르겠으나, SSE(Server-Sent-Events)방식이 있다는 것을 알게 되었다.

이것만 할 줄 알면 "서버가 현재 접속한 유저들에게 쉽게 일괄적으로 메세지를 전파할 수 있는 기능"을 아는 놈으로 된다.

코드 한줄 한줄의 심도깊은 해석과 딥한 설계 및 구조는 이 글의 목적성과 전혀 다르기에 생략한다.


SSE 원리

기본적으로 통신은 [클라이언트가 요청하면, 서버가 응답한다]
SSE는 [보내고 싶은게 있을 때 서버가 응답한다]

claude답변

내가 확인한 글은 두 개다.

  1. https://boseong.dev/post/2025-09-05-sse-deep-dive
  2. https://hamait.tistory.com/792

바이브 코딩

클로드에게 예제 만들어 달라하니 기깔나게 만들어준다.

"현재 연결된 클라이언트들한테 보낸다" 는, "현재 활성화된 세션 수(클라이언트 수)"도 복잡할 것 없이 알 수 있다는 것일테니, 그것을 볼 수 있는 관리자 화면도 요청했다. 그랬더니 아래와 같이 알려준다.


결과물

항상 느끼는 건데, 클로드가 만들어준 UI/UX는 조금 말랑말랑한 느낌이 난다. Radius를 너무 주는 것 같다. 이럴 필요는 없는데..

아무튼 동작은 잘 한다. 저 확장 아이디어를 하게되면 또 기록용 포스팅을 남겨야겠다.

관리자화면

클라이언트화면

profile
노동자

0개의 댓글