software

React.js에 실시간 ZEGOCLOUD SDK 통합

발행: (2025년 12월 13일 오전 02:04 GMT+9)
5 min read
원문: Dev.to

Source: Dev.to

소개

비디오 통화와 실시간 스트리밍은 오늘날 애플리케이션에서 필수 기능이 되었으며, ZEGOCLOUD API는 통합 과정을 놀라울 정도로 간단하게 만들어 줍니다. 최소한의 코드로 전체 실시간 스트리밍 기능을 구현하고, 별도의 방을 만들고, 인앱 채팅을 추가하는 등 다양한 작업을 할 수 있습니다. ZEGOCLOUD는 새 계정당 10,000분의 무료 사용 시간을 제공하므로 테스트나 기본 버전 출시에 안성맞춤입니다.

프로젝트 규모와 관계없이 ZEGOCLOUD는 부드러운 개발 경험을 제공합니다. 이 가이드는 실시간 스트리밍 앱을 단계별로 만드는 과정을 안내합니다. 여기서 제공하는 코드 스니펫이나 ZEGOCLOUD 공식 문서의 예제를 따라 하면 됩니다.

ZEGOCLOUD

유연성은 React에만 국한되지 않습니다. ZEGOCLOUD는 Next.js, Angular, Vue는 물론 WordPress와 일반 HTML까지 다양한 최신 프레임워크를 지원하며, 각 프레임워크에 맞는 코드 예제가 제공됩니다.

이 튜토리얼을 마치면 불필요한 복잡함 없이 효율적으로 만든 React 기반 실시간 스트리밍 애플리케이션을 손에 넣을 수 있습니다. 바로 시작해 볼까요? 🚀

프로젝트 설정 및 사전 준비

1️⃣ Node.js

머신에 Node.js가 설치되어 있는지 확인하세요. 설치되지 않았다면 전역으로 설치합니다:

npm install -g nodejs

설치된 버전을 확인하고 필요하면 업데이트합니다:

node -v          # 설치된 버전 확인
npm update nodejs   # 필요 시 Node.js 업데이트

React와 Vite 설정하기

  1. 새 폴더(예: live-stream-app-react)를 만들고 편집기(VS Code 등)에서 엽니다.
  2. 폴더에서 터미널을 열고 다음을 실행합니다:
npm create vite@latest .
  1. 첫 번째 프롬프트에서 React를 선택하고, 원하는 경우 JavaScript 또는 TypeScript를 선택합니다. Vite가 필요한 모든 패키지와 의존성을 설치합니다.

3️⃣ ZEGOCLOUD 계정 가입 (무료)

ZEGOCLOUD SDK를 사용하려면 무료 계정을 만들고 App ID와 App Sign을 받아야 합니다:

🔗 ZEGOCLOUD에 가입하기

가입 후 테스트 및 배포용으로 10,000분의 무료 사용 시간을 받게 됩니다.

시작하기: React에서 ZEGOCLOUD로 실시간 스트리밍 앱 만들기

1단계: ZEGOCLOUD SDK 설치

npm install @zegocloud/zego-uikit-prebuilt

2단계: AppID와 ServerSecret 가져오기

ZEGOCLOUD에 로그인하고 개발자 콘솔로 이동한 뒤 AppID와 ServerSecret을 복사합니다. 이 값들은 비공개로 유지하고 절대 공개하지 마세요.

3단계: React에서 SDK 초기화

App.jsx(또는 App.tsx) 파일을 열고 다음 코드를 추가합니다:

import * as React from "react";
import { ZegoUIKitPrebuilt } from "@zegocloud/zego-uikit-prebuilt";

function randomID(len) {
  let result = "";
  const chars =
    "12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP";
  const maxPos = chars.length;
  len = len || 5;
  for (let i = 0; i  {
    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom({
      container: element,
      scenario: {
        mode: ZegoUIKitPrebuilt.LiveStreaming,
        config: { role },
      },
      sharedLinks,
    });
  };

  return (
    
  );
}

Note: YOUR_APP_ID와 YOUR_APP_SECRET을 ZEGOCLOUD 콘솔에서 받은 값으로 교체하세요.

4단계: 앱 실행

개발 서버를 시작합니다:

npm run dev

이제 실시간 스트리밍 앱이 정상적으로 실행됩니다! 🎉

결론

축하합니다! 🎉 React와 ZEGOCLOUD를 활용해 완전한 실시간 스트리밍 앱을 성공적으로 구축했습니다.

다음 튜토리얼에서는 Next.js, 추가 React 기능, 그리고 기타 프론트엔드 개발 주제를 다룰 예정이니 기대해 주세요.

코딩 즐겁게!

Back to Blog

관련 글

더 보기 »