Apache Kafka는 분산 스트리밍 플랫폼으로, 대량의 실시간 데이터를 안정적으로 처리하기 위한 도구입니다. Vue.js는 사용자 인터페이스를 구축하기 위한 프론트엔드 프레임워크로, 데이터의 효율적인 표현을 제공합니다. 이번 글에서는 Vue.js와 Apache Kafka를 연동하는 방법에 대해 알아보겠습니다.

1. Kafka와 Vue.js 설치

우선 Kafka와 Vue.js를 개발 환경에 설치해야합니다. Kafka의 경우 공식 웹사이트에서 다운로드 받을 수 있습니다. 설치를 완료한 후 Kafka 서버를 실행합니다.

Vue.js의 경우 Node.js와 npm이 설치되어 있어야합니다. 설치가 필요한 경우 Node.js 공식 웹사이트에서 다운로드할 수 있습니다. 설치가 완료되었다면, Vue.js를 설치하기 위해 명령 프롬프트에서 다음 명령어를 실행합니다:

npm install -g @vue/cli

2. Kafka 클라이언트 라이브러리 설치

Vue.js에서 Kafka를 사용하기 위해서는 Kafka 클라이언트를 설치해야합니다. Vue.js에서는 kafkajs 라이브러리를 사용할 수 있습니다. 프로젝트 폴더로 이동한 후 다음 명령어를 실행하여 kafkajs를 설치합니다:

npm install kafkajs

3. Vue.js 애플리케이션 개발

이제 Vue.js 애플리케이션을 개발할 차례입니다. Vue.js 프로젝트를 생성하려면 명령 프롬프트에서 다음 명령어를 실행합니다:

vue create my-app

명령어를 실행하면 프롬프트에서 몇 가지 설정을 선택해야합니다. 필요한 설정을 선택한 후, Vue.js 애플리케이션을 개발하기 위한 초기 설정이 완료됩니다.

4. Kafka 연동

Vue.js 애플리케이션에 Kafka를 연동하기 위해 다음과 같은 단계를 따릅니다:

4.1. Kafka 클라이언트 생성

Vue.js 앱의 진입 파일 (예 : main.js)에서 Kafka 클라이언트를 생성합니다:

import { Kafka } from 'kafkajs';

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

4.2. Kafka 주제에 메시지 전송

메시지를 Kafka 주제로 전송하기 위해 다음과 같은 코드를 추가합니다:

const producer = kafka.producer();

async function publishMessage(topic, message) {
  await producer.connect();
  await producer.send({
    topic: topic,
    messages: [{ value: message }]
  });
  await producer.disconnect();
}

// 예시 메시지 전송
publishMessage('my-topic', 'Hello Kafka!');

4.3. Kafka 주제로부터 메시지 수신

메시지를 Kafka 주제로부터 수신하기 위해 다음과 같은 코드를 추가합니다:

const consumer = kafka.consumer({ groupId: 'my-group' });

async function consumeMessages(topic) {
  await consumer.connect();
  await consumer.subscribe({ topic });
  await consumer.run({
    eachMessage: async ({ topic, partition, message }) => {
      console.log({
        value: message.value.toString(),
        partition,
        offset: message.offset
      });
    },
  });
}

// 예시 메시지 수신
consumeMessages('my-topic');

결론

이제 Vue.js와 Apache Kafka를 연동하는 방법을 알게 되었습니다. 이러한 연동을 통해 Vue.js 애플리케이션에서 실시간 데이터를 효율적으로 처리할 수 있습니다. 자세한 내용은 kafkajs 라이브러리의 문서를 참조하시기 바랍니다.