웹 개발 실무 기술 A to Z # 18 - 실시간 데이터 스트리밍: Kafka, WebSockets, Firebase Realtime Database 활용

웹 개발 실무 기술 A to Z

웹 애플리케이션에서 실시간 데이터 처리 및 스트리밍은 사용자 경험을 향상시키고, 빠른 데이터 전송을 가능하게 합니다.
✔️ Kafka → 대량의 데이터를 실시간으로 처리하는 메시지 브로커
✔️ WebSockets → 클라이언트-서버 간 양방향 통신
✔️ Firebase Realtime Database → 실시간 데이터 동기화

이번 글에서는 Kafka, WebSockets, Firebase Realtime Database를 활용하여 실시간 기능을 구현하는 방법을 설명하겠습니다.

---

1. 실시간 데이터 스트리밍이 필요한 이유

✔️ 사용자 인터페이스 반응 속도 개선 → 실시간 알림, 채팅 기능 등
✔️ 데이터 업데이트를 즉시 반영 → 주식 거래, 스포츠 경기 실시간 업데이트
✔️ 서버 리소스 절약 → 불필요한 API 요청 제거 (폴링 방식 대체)

✅ 실시간 기능을 적용하면 사용자 경험이 향상되고 시스템 효율성 증가!

---

2. Apache Kafka – 대규모 데이터 스트리밍

2-1. Apache Kafka란?

✔️ 대량의 데이터를 실시간으로 처리하는 분산 메시지 브로커
✔️ 로그 데이터, IoT 센서 데이터, 트랜잭션 로그 등 실시간 이벤트 처리에 활용
✔️ 프로듀서(Producer), 컨슈머(Consumer), 브로커(Broker)로 구성

---

2-2. Kafka 설치 및 실행

(1) Kafka 다운로드 및 실행

wget https://downloads.apache.org/kafka/3.0.0/kafka_2.13-3.0.0.tgz
tar -xzf kafka_2.13-3.0.0.tgz
cd kafka_2.13-3.0.0

(2) Zookeeper 및 Kafka 실행

bin/zookeeper-server-start.sh config/zookeeper.properties &
bin/kafka-server-start.sh config/server.properties &

✅ Kafka가 실행되면 메시지를 실시간으로 송수신 가능!

---

2-3. Kafka 프로듀서 & 컨슈머 구현 (Node.js)

(1) Kafka 패키지 설치

npm install kafkajs

(2) 메시지 전송 (Producer)

const { Kafka } = require("kafkajs");

const kafka = new Kafka({ clientId: "my-app", brokers: ["localhost:9092"] });
const producer = kafka.producer();

const run = async () => {
  await producer.connect();
  await producer.send({
    topic: "message-topic",
    messages: [{ value: "Hello, Kafka!" }],
  });

  await producer.disconnect();
};

run();

(3) 메시지 수신 (Consumer)

const consumer = kafka.consumer({ groupId: "test-group" });

const run = async () => {
  await consumer.connect();
  await consumer.subscribe({ topic: "message-topic", fromBeginning: true });

  await consumer.run({
    eachMessage: async ({ message }) => {
      console.log(`Received message: ${message.value.toString()}`);
    },
  });
};

run();

✅ Kafka를 사용하면 대량의 데이터를 효율적으로 실시간 처리 가능!

---

3. WebSockets – 클라이언트-서버 실시간 양방향 통신

3-1. WebSockets 개념

✔️ HTTP 기반의 지속적인 양방향 연결 방식
✔️ 채팅, 실시간 알림, 협업 도구 등에 사용
✔️ Polling 방식보다 네트워크 부하 감소

---

3-2. WebSockets 서버 구현 (Node.js + Socket.io)

(1) 패키지 설치

npm install socket.io express

(2) WebSockets 서버 코드

const express = require("express");
const http = require("http");
const { Server } = require("socket.io");

const app = express();
const server = http.createServer(app);
const io = new Server(server);

io.on("connection", (socket) => {
  console.log("A user connected");

  socket.on("message", (msg) => {
    console.log("Received message:", msg);
    io.emit("message", msg);
  });

  socket.on("disconnect", () => {
    console.log("User disconnected");
  });
});

server.listen(3000, () => console.log("WebSocket server running on port 3000"));

✅ WebSockets를 사용하면 실시간 채팅 및 알림 기능 구현 가능!

---

3-3. WebSockets 클라이언트 코드

const socket = io("http://localhost:3000");

socket.on("message", (msg) => {
  console.log("New message:", msg);
});

socket.emit("message", "Hello, WebSockets!");

✅ WebSockets을 사용하면 서버와 클라이언트 간 실시간 데이터 전송 가능!

---

4. Firebase Realtime Database – 실시간 동기화

4-1. Firebase Realtime Database란?

✔️ 클라이언트 간 데이터를 실시간으로 동기화할 수 있는 Firebase 서비스
✔️ 웹 & 모바일 애플리케이션에서 실시간 데이터 처리가 필요할 때 적합
✔️ Firestore와 차이점: Firestore는 구조화된 쿼리 지원, Realtime Database는 빠른 실시간 업데이트에 강점

---

4-2. Firebase 설정 및 데이터 저장

(1) Firebase 패키지 설치

npm install firebase-admin

(2) Firebase 초기화 (firebase.js)

const admin = require("firebase-admin");
const serviceAccount = require("./firebase-key.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://your-project-id.firebaseio.com",
});

const db = admin.database();

(3) 실시간 데이터 저장 및 구독

const ref = db.ref("messages");

// 데이터 저장
ref.push({ username: "Alice", message: "Hello, Firebase!" });

// 데이터 변경 감지
ref.on("child_added", (snapshot) => {
  console.log("New message:", snapshot.val());
});

✅ Firebase Realtime Database를 활용하면 실시간 데이터 업데이트 구현 가능!

---

5. 실시간 데이터 스트리밍 적용 전후 비교

5-1. 적용 전

• Polling 방식 사용 → 서버 부하 증가
• 데이터 변경 사항을 즉시 반영하지 못함
• 사용자 경험 저하 → 실시간 피드백 부족

5-2. 적용 후

✔️ Kafka로 대량의 데이터 실시간 처리
✔️ WebSockets으로 서버-클라이언트 간 실시간 데이터 전송
✔️ Firebase Realtime Database로 클라이언트 간 실시간 동기화

✅ 실시간 기술을 적용하면 사용자 경험 및 시스템 효율성 극대화 가능!

---

6. 마무리 및 다음 글 예고

이번 글에서는 Kafka, WebSockets, Firebase Realtime Database를 활용한 실시간 데이터 스트리밍 방법을 살펴봤습니다.
다음 글에서는 **AI 및 머신러닝을 활용한 웹 애플리케이션 최적화 (TensorFlow.js, OpenAI API, Chatbots)**을 소개하겠습니다.

다음 글 예고: "AI & 머신러닝 기반 웹 애플리케이션 – TensorFlow.js, OpenAI API, Chatbots 활용" 🚀