React와 Kafka를 활용한 실시간 푸시 알림 시스템 구축 경험 — 5개월 간의 도전과 70% 사용자 참여율 증가 사례 분석

실시간 푸시 알림 시스템은 사용자와의 소통을 강화하고, 서비스의 가치를 높이는 중요한 요소다. 이번 글에서는 React와 Kafka를 활용하여 실시간 푸시 알림 시스템을 구축한 경험을 공유하고자 한다. 5개월간의 개발 과정에서 마주한 트레이드오프와 함정을 중심으로 이야기를 전개해보겠다.

요구사항 분석과 아키텍처 설계

시작 단계에서 가장 먼저 해야 할 일은 요구사항을 명확히 정리하는 것이다. 사용자에게 어떤 정보를 실시간으로 전달할지, 얼마나 많은 트래픽을 처리할 수 있어야 하는지 등을 고려해야 했다. 또한, 알림의 유형에 따라 사용자에게 중요한 정보만을 전달하는 것이 필요했다.

이 과정에서 Kafka를 선택한 이유는 높은 처리량과 내구성 때문이다. 하지만 Kafka를 도입하면서 발생한 문제 중 하나는 초기 설정이 복잡하다는 점이었다. 특히, 토픽과 파티션의 설정이 잘못되면 성능 저하를 초래할 수 있기 때문에 신중하게 접근해야 했다.

React와 WebSocket 연동

React는 사용자 인터페이스를 구축하는 데 강력한 도구다. 하지만 실시간 통신을 구현하기 위해 WebSocket과 연동하는 과정에서 몇 가지 어려움이 있었다. WebSocket의 연결 상태를 관리하는 것이 중요한데, 연결이 끊어지면 사용자 경험에 큰 영향을 미칠 수 있다.

예를 들어, 다음과 같은 코드로 WebSocket을 설정할 수 있다.

import React, { useEffect, useState } from 'react';

const NotificationComponent = () => {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    const socket = new WebSocket('ws://your-websocket-url');

    socket.onmessage = (event) => {
      const newNotification = JSON.parse(event.data);
      setNotifications((prev) => [...prev, newNotification]);
    };

    return () => {
      socket.close();
    };
  }, []);

  return (
    <div>
      {notifications.map((notif, index) => (
        <div key={index}>{notif.message}
      ))}
    
  );
};

  ;