기술 블로그 모음 서비스에 실시간 트렌드 기능을 구현했다. 기존에는 단순히 정적인 API 호출을 통해 인기 게시글을 가져왔지만, Server-Sent Events(SSE)를 도입해 실시간으로 데이터를 갱신하도록 개선했다.
트렌드 섹션은 조회수와 인기도를 기반으로 게시글의 순위를 결정한다. SSE를 통해 서버로부터 실시간으로 순위 데이터를 전달받으면, 프론트엔드에서는 부드러운 애니메이션과 함께 시각화해 사용자에게 보여준다. 개발자 커뮤니티 Denamu에서 실시간으로 주목받는 기술 콘텐츠를 확인할 수 있게 구현하고자 했다.
이 글에서는 SSE 도입 배경과 구현 과정을 기술적으로 설명하고, 적용 과정에서 마주친 문제들과 해결 방법을 공유하고자 한다.
SSE$_{Server-Sent \space Events}$는 서버에서 클라이언트로 단방향 실시간 데이터를 전송하게 해주는 웹 표준 기술이다. WebSocket과 달리 단방향 통신만을 지원하지만, 구현이 더 간단하고 HTTP 프로토콜을 그대로 사용할 수 있다.
트렌드 기능을 구현할 때 두 가지 방식을 고려했다.
일단 API는 백엔드 개발자분들이 열심히 만들어주셨음
연결해보면서 어떻게 클라이언트에서 SSE를 통해 실시간으로 최신글을 보여줄 수 있는지 알아보자