프로젝트 일지

[Spring Boot Web Chatting] chatforyou.io : star 100개 달성 후기 및 SSE 적용 일지

TerianP 2025. 3. 18.
728x90

1. 시작하면서

이번에도 거의 2달...만에 포스팅을 쓰게 되었습니다ㅠ.ㅠ 사실 이번에는 정말정말 변명꺼리도 없는게 이것저것 게임 신작이 워낙 많이 나와서 그거하면서 노느라고  '써야지 써야지'하면서 그냥 넘어가버려서 결국 이제야 남기게 되었습니다.

 

이번 글은 조금 짧게 그리고 아주 아주 중요한 내용을 포스팅 해볼까합니다. 하나는 github 레포에 대한 것이구 하나는 프로젝트에 SSE 라는 조금 새롭고 신선한 기능 적용에 대한 일지입니다.


2.  Spring-WebSocket-WebRTC-Chatting : 깃허브 별 100개 달성

100개 별 달성!

작년 8월쯤 이었나? 깃 레포에 별이 90개 정도 되었을때 이제 곧 100개를 달성 할 수 있겠네! 하면서 조금 기대하고 있었습니다. 그런데 생각보다 별 하나하나 쌓이는게 오래걸리더라구요. 그래도 언젠가는 100개를 꼭 달성하고, 이렇게 블로그에 포스팅을 남기겠다!! 라고 마음먹고 있었는데 드디어 제 꿈이 이뤄졌습니다.

 

사실 깃허브에서 별 받은게 뭐가 자랑이냐? 또 100개는 별거 아니야 그래도 1k 정도는 찍어야지! 라고 이야기하실지도 모르겠습니다. 물론 이게 마냥 틀린말은 아니라고 생각합니다. 결국 github 에 repo 를 만들고 코드를 공유하는 것은 별을 받는것이 목표가 아니라는 것은 알고있습니다....만 그래도 너무 좋은걸요ㅋㅋㅋㅋ

 

비록 별거 아닐 수 있지만, 누군가 꾸준히 내가 만든 작품에 관심을 갖고있고 또 그것이 표시되는 것을 보면서 개발하면서 느꼈던 것과는 다른 새로운 느낌의 성취감을 느낄 수 있었습니다. 내가 노력한게 정말 아무것도 아니거나 의미가 전혀 없는 아니었구나 하는 안도감도 함께 있었습니다. 또 한편으로는 앞으로 더욱 열심히 해야겠다 라는 생각는데 무려 100명이나 관심을 갖고 지켜보고 있구나...라는게 조금은 부끄러웠고, 부끄러움만큼 더 새로운 의미로 다가왔기 때문입니다. 

새는 알에서 태어나기 위해 투쟁한다.
삶을 살아가는 나는 매 순간 나의 세계를 마주해야할 것이다. 언젠가는 포기하는 순간도 있을 것이고 멈춰서는 순간도 있을 것이라고 생각한다. 그럼에도 나는 알을 깨고 새로운 세계와 마주할 수 있는 새가 되고 싶다.

 

벌써 저 프로젝트를 시작한지 거의 3년이 다 되어가고 있더라구요. 빠르다면 빠르고, 느리다면 느린 그런 시간이었습니다. 다만 많은 것을 배우고 그것을 다 해보기에는 범인인 제게는 정말 짧은 시간이었습니다. 그럼에도 나의 세계에서 꾸준히 발버둥치고, 부딪히다보면 결국 나의 옛 세계를 지나 새로운 세계로 도착 할 수 있다는 걸 깨달을 수 있는 소중한 시간이기도 했습니다. 뭣보다 2년 전에 썼던 나와의 약속을 잘 지키고 있구나...라는 생각에 아주 뿌듯하기도 했습니다.

 

여튼 관심갖고 봐주셔서 너무나도 감사합니다! 앞으로도 재미있는걸 잔뜩 만들면서 업데이트 해보겠습니다ㅋㅋ


3. SSE 적용하기 : Server Sent Event

그러나 오랜만에 글에서 이렇게 끝나면 아쉽고 개발이야기를 안 할 수가 없죠ㅋㅋ 이번에는 프로젝트에 SSE 를 적용한 내용을 가져와봤습니다.  물론 SSE 에 대한 전체 코드는 아니고, 전체 내용을 정리하지는 않았습니다. 아직 부족한 부분이 많거든요ㅠㅠ 다만 살짝 맛보기로 어떻게 적용되었는지 정도는 보여드릴 수 있지 않을까합니다.

 

영상에 앞서 간단하게 설명하자면, Server-Sent Events(SSE)는 서버가 클라이언트에 실시간 데이터를 일방향으로 전송할 수 있도록 하는 HTML5 표준 기술로서 주요 특징은 아래와 같습니다.

  • 일방향 통신: 클라이언트가 서버에 한 번 연결하면, 서버는 지속적으로 데이터를 스트리밍하여 전송합니다.
  • HTTP 기반: 특별한 HTTP 헤더(Content-Type: text/event-stream)를 사용하여 데이터를 전달하며, 별도의 프로토콜을 사용하지 않아 구현이 비교적 간단합니다.
  • 자동 재연결: 연결이 끊어지면 클라이언트가 자동으로 재연결을 시도하여 안정적인 데이터 전송을 유지합니다.
  • 실시간 업데이트: 뉴스 피드, 채팅, 알림 등 실시간 데이터 업데이트가 필요한 애플리케이션에 유용합니다.

보면 알겠지만 주로 사용하는 기능은 실시간 알림, 대시보드 데이터 업데이트, 채팅 및 실시간 댓글 등 주로 실시간으로 일어나는 이벤트에 대해서 서버 측에서 클라이언트에게 정보를 전달해주기 위해 사용합니다.

제 경우도 마찬가지 였는데 프로젝트를 진행하며  SSE 에 대한 관심은 "방 생성 혹은 입장, 종료 시 어떻게 실시간으로 클라이언트에게 실시간으로 보이도록 만들 수 있을까?" 에 대한 물음에서 시작했습니다. 사실 처음에는 웹 소켓을 생각했었는데 고작 대시보드 업데이트하는데 웹 소켓을 들고 있어야하는 필요가 있을까? 라는 의문으로 귀결되었고, 결과적으로 SSE 로 방향을 전환하게 되었습니다.

 

아래 영상처럼 새로고침 없이 실시간으로 방 리스트가 업데이트 되는 것을 알 수 있습니다. 클라이언트 입장에서는 주기적으로 화면이 업데이트 되는구나하는 느낌을 받을 수 있습니다. 이걸 조금만 응용하면 대시보드 옆에 접속중 유저나 친구목록에서 친구 입장, 방 초대 등 여러 이벤트에 대응할 수 있지 않을까? 생각되네요.

배속 빠르게해서 봐주세요ㅠ.ㅠ

 

 

댓글