몇 분 안에 React 앱에 실시간 협업을 추가하세요

어느 날 아는 사람이 다음과 같은 메시지를 보냈습니다.

"휴가 기간 동안 아들에게 Zoom을 통해 투자 수익이 어떻게 나타나는지 설명하려고 했는데, 우리 둘 다 Google 문서 같은 도구에서 작업할 수 있었다면 정말 쉬웠을 것입니다."

도전이 승인되었습니다!

지난 며칠 동안 저는 여러 매개변수를 기반으로 투자 수익을 예측할 수 있는 투자 수익 시뮬레이터를 만드는 재미를 느꼈습니다.
인터넷은 그러한 웹사이트로 가득 차 있지만 이 웹사이트에서는 공동 작업 기능을 삽입할 수 있는 방법과 사람들을 하나로 모으는 방법

을 탐구하고 싶었습니다.

이 가이드에서는 백엔드 코드를 작성하거나 웹 소켓을 처리하지 않고도 단 10분 만에 일반 React 앱에 실시간 협업을 추가할 수 있는 방법을 살펴보겠습니다. 보너스로 공동 웹사이트에서 사용자 경험을 향상할 수 있는 방법도 알아볼 것입니다!

이 프로젝트의 전체 소스 코드는 GitHub에서 확인할 수 있습니다

들어가자!

출발점: 기초 구축

공동작업 기능을 살펴보기 전에 견고한 기반이 필요했습니다. 저는 사용자가 투자 매개변수를 입력할 수 있는 싱글 플레이어 버전을 만드는 것부터 시작했습니다. 그런 다음 이러한 입력은 투자 수익 예측을 생성하고 표시하는 계산 엔진에 공급됩니다.

빠르게 시작하고 실행하기 위해 bolt.new를 사용했습니다. 나는 그것이 나에게 준 깔끔한 디자인과 허용 가능한 시작점에 얼마나 빨리 도달했는지에 깊은 인상을 받았습니다. 엄청나게 빠른 시작에도 불구하고 여전히 일부 계산 논리를 미세 조정하고 UI를 원하는 대로 조정해야 했습니다.

---

애플리케이션을 협업적으로 만들기

싱글플레이어 버전이 완성되면서 공동작업에 관심을 돌렸습니다. 이 프로젝트는 제가 지난 몇 달 동안 Multisynq에서 개발해 온 오픈 소스 라이브러리인 React Together를 테스트할 수 있는 완벽한 기회를 제공했습니다.

React Together는 백엔드 설정이나 소켓 연결 관리의 복잡성 없이 공동 작업 기능을 활성화하는 후크와 구성 요소를 제공합니다. 구현 프로세스는 간단했지만 라이브러리의 향후 버전에서 해결해야 할 몇 가지 개선 영역이 드러났습니다.

이제 앱에 실시간 공동작업을 추가하는 3단계를 살펴보겠습니다. 타이머를 시작하시겠습니까?

1단계: React Together 컨텍스트 설정

첫 번째 단계는 애플리케이션을 React Together 컨텍스트 제공자로 래핑하는 것입니다. 이 구성 요소는 모든 상태 동기화 및 세션 관리를 배후에서 처리합니다.

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <strictmode>
    <reacttogether sessionparams="{{" appid: import.meta.env apikey:>
      <app></app>
    </reacttogether>
  </strictmode>,
)

React Together는 API 키가 필요한 애플리케이션 동기화를 위해 Multisynq의 인프라를 사용합니다. multisynq.io/account에서 무료 API 키를 얻을 수 있습니다. 걱정하지 마세요. 이러한 키는 공개되어야 합니다. 어떤 도메인에서 키를 사용할 수 있는지 제어할 수 있기 때문입니다.

모든 사용자가 웹사이트에 들어가면 자동으로 동일한 세션에 연결되도록 React Together를 구성할 수 있습니다. 사실 이렇게 하면 2단계 가이드가 되지만 저는 협업이 선택되는 Google Docs 스타일 접근 방식을 선택했습니다. 사용자는 버튼 클릭을 통해 명시적으로 세션을 생성하거나 세션에 참여할 때까지 연결이 끊어진 상태로 유지됩니다. 이 가이드의 세 번째 단계에서 세션 관리를 다루겠습니다!

2단계: 사용자 간 상태 동기화

React Together가 설정되면 다음 단계는 사용자 간 상태를 동기화하는 것입니다. 이 프로세스는 매우 간단합니다. React의 useState 후크를 React Together의 useStateTogether 후크로 교체하기만 하면 됩니다.

useStateTogether 후크는 useState와 유사하게 작동하지만 추가 rtKey 매개변수가 필요합니다. 이 키는 애플리케이션 전체의 상태를 고유하게 식별하여 DOM 계층 구조가 뷰포트마다 다를 수 있는 반응형 레이아웃에서도 적절한 동기화를 보장합니다.

변신된 모습은 다음과 같습니다.

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <strictmode>
    <reacttogether sessionparams="{{" appid: import.meta.env apikey:>
      <app></app>
    </reacttogether>
  </strictmode>,
)

// Before
import { useState } from 'react'

export default function Calculator() {
  const [startingAmount, setStartingAmount] = useState(20000);
  const [years, setYears] = useState(25);
  const [returnRate, setReturnRate] = useState(10);
  const [compoundFrequency, setCompoundFrequency] = useState("annually");
  const [additionalContribution, setAdditionalContribution] = useState(500);
  const [contributionTiming, setContributionTiming] = useState("beginning");
  const [contributionFrequency, setContributionFrequency] = useState("month");

  // ...
}

이 접근 방식의 장점은 애플리케이션이 이전과 동일하게 계속 작동한다는 것입니다. 유일한 차이점은 이제 연결된 모든 사용자 간에 상태 업데이트가 동기화된다는 것입니다.

3단계: 세션 관리 추가

마지막 단계는 사용자가 공동작업 세션을 만들고, 참여하고, 나갈 수 있는 방법을 추가하는 것입니다. 저는 모든 사람이 세션 컨트롤을 쉽게 볼 수 있도록 계산기 위의 헤더 섹션을 통해 이를 구현하기로 결정했습니다.

React Together는 네 가지 필수 후크를 제공하여 이를 간단하게 만듭니다.

• useIsTogether: 현재 세션에 있는지 알려줍니다
• useCreateRandomSession: 새로운 비공개 세션을 생성합니다
• useLeaveSession: 현재 세션 연결을 끊습니다
• useJoinUrl: 다른 사람들이 참여할 수 있도록 공유 가능한 URL을 제공합니다

다음은 헤더 구성요소의 단순화된 버전입니다(클래스 이름만 제거했습니다).

// After
import { useStateTogether } from 'react-together'

export default function Calculator() {
  const [startingAmount, setStartingAmount] = useStateTogether("startingAmount", 20000);
  const [years, setYears] = useStateTogether("years", 25);
  const [returnRate, setReturnRate] = useStateTogether("returnRate", 10);
  const [compoundFrequency, setCompoundFrequency] = useStateTogether("compoundFrequency", "annually");
  const [additionalContribution, setAdditionalContribution] = useStateTogether("additionalContribution", 500);
  const [contributionTiming, setContributionTiming] = useStateTogether("contributionTiming", "beginning");
  const [contributionFrequency, setContributionFrequency] = useStateTogether("contributionFrequency", "month");

  // ...
}

이제 구현을 통해 사용자는 클릭 한 번으로 공동 작업 세션을 시작할 수 있습니다. 누군가 공유 URL을 사용하여 참여하면 다른 모든 사람과 동일한 상태가 즉시 표시되며 모든 변경 사항은 모든 참가자에게 실시간으로 동기화됩니다.

그렇습니다. 쉽고 간단하게 작동합니다! 게다가 10분 안에 끝낼 수 있어요!!

---

협업 경험 강화

기본 동기화는 잘 작동했지만 뭔가 기분이 좋지 않았습니다. 누가 변경했는지 표시하지 않고 페이지에서 요소가 '저절로' 변경되고 있었습니다. 이는 협업 애플리케이션에서 흔히 발생하는 문제이며, Google Docs와 같은 도구는 다른 사용자가 보고 편집하는 위치를 보여줌으로써 이 문제를 해결합니다.

진정한 협업은 단순히 상태를 동기화하는 것이 아니라 존재감을 만들어내는 것입니다. 효과적으로 협력하려면 사용자가 서로를 '보아야' 합니다.

처음에는 사용자들이 서로의 마우스 포인터를 볼 수 있도록 하는 공유 커서 구현을 고려했습니다. 그러나 이 접근 방식은 반응형 웹 애플리케이션에 다음과 같은 과제를 안겨줍니다.

• 마우스 좌표가 서로 다른 뷰포트 크기 간에 명확하게 매핑되지 않습니다
• 커서 위치에 컨텍스트가 부족한 경우가 많습니다. 사용자 커서가 특정 위치에 있는 이유가 불분명합니다.
• 커서 위치의 의미는 화면 레이아웃에 따라 모호할 수 있습니다

대신 사용자 존재감을 통해 우리가 실제로 달성하고 싶은 것에 중점을 두었습니다.

1. 사용자가 다른 사람들이 적극적으로 참여하고 있다는 느낌을 갖도록 도와주세요
2. 각 사용자가 현재 보고 있거나 편집 중인 요소 표시

해결책은? 사용자가 상호작용하는 요소를 강조하세요. 이 접근 방식은 더 간단하고 직관적이며 모든 뷰포트 크기에서 안정적으로 작동합니다. 차트 탭과 입력 필드라는 두 가지 주요 영역에서 이를 구현하는 방법을 살펴보겠습니다.

차트 탭에 사용자 상태 추가

간단한 사용자 존재 구현부터 시작해 보겠습니다. 각 차트 탭을 보고 있는 사용자를 표시합니다.

이를 위해서는 각 사용자가 다른 모든 사람에게 표시되는 자신만의 가치를 가질 수 있는 특별한 종류의 공유 ​​상태가 필요합니다.

React Together는 useStateTogetherWithPerUserValues ​​후크를 통해 우리에게 필요한 것을 정확하게 제공합니다(예, 꽤 많습니다!). 이 후크는 useStateTogether와 유사하게 작동하지만 단일 값을 공유하는 대신 각 사용자가 모든 참가자에게 표시되는 고유한 값을 가질 수 있도록 합니다. 후크는 세 가지 요소를 반환합니다.

1. 현재 사용자의 로컬 상태 값
2. 로컬 상태를 업데이트하는 기능
3. 각 사용자의 상태값을 담고 있는 객체

탭 옆에 사용자 아바타를 표시하기 위해 이를 구현하는 방법은 다음과 같습니다.

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <strictmode>
    <reacttogether sessionparams="{{" appid: import.meta.env apikey:>
      <app></app>
    </reacttogether>
  </strictmode>,
)

위의 코드 스니펫에서는 useState를 useStateTogetherWithPerUserValues로 대체했으며 다시 한번 애플리케이션이 이전과 같이 계속 작동했지만 이제 모든 사람이 다른 사람의 상태를 볼 수 있습니다! 그런 다음 방금 얻은 새로운 정보를 렌더링하면 됩니다.

이 구현에서는 각 탭 옆에 사용자 아바타가 표시되어 어떤 사용자가 어떤 차트를 보고 있는지 명확하게 알 수 있습니다. 사용자가 자신의 현재 상태 표시기를 볼 필요가 없으므로 중복을 피하기 위해 현재 사용자의 아바타를 필터링합니다.

입력 필드에 사용자 현재 상태 추가

입력 필드에 현재 상태 표시기를 추가하는 것은 이전 예와 비슷한 패턴을 따르지만 추가 요구 사항이 있습니다. 즉, 사용자가 편집을 시작하고 중지하는 시점을 추적해야 합니다. 다행히 Ant Design의 구성 요소는 이러한 목적에 필요한 콜백을 제공합니다.

각 입력 필드에 대해 다음을 원했습니다.

1. 다른 사람이 편집 중인 경우 색상 테두리 표시
2. 오른쪽 상단에 편집자의 아바타 표시
3. 애플리케이션 전체에서 사용자별로 일관된 색상을 유지합니다

useStateTogetherWithPerUserValues ​​후크를 사용하여 이를 구현하는 방법은 다음과 같습니다.

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <strictmode>
    <reacttogether sessionparams="{{" appid: import.meta.env apikey:>
      <app></app>
    </reacttogether>
  </strictmode>,
)

코드가 약간 길지만 원리는 간단합니다. 각 입력 필드를 편집하는 사용자를 추적한 다음 원하는 시각화를 렌더링하면 됩니다.

이 동일한 접근 방식은 드롭다운 및 슬라이더 막대와 같은 다른 입력 유형에도 적용됩니다!!

--

그리고 그게 다입니다! 이 완전한 협업 투자 수익 시뮬레이터를 사용하면 내 친구가 Zoom을 통해 투자 수익이 어떻게 작동하는지 아들에게 더 쉽게 설명할 수 있습니다. 임무 완수! ✨

이러한 공동 작업 웹사이트를 만드는 것이 얼마나 쉬운지 생각해보면 우리가 온라인에 있을 때 어떻게 인터넷을 통해 우리가 더 가까워질 수 있는지 궁금해집니다... 이에 대해서는 나중에 자세히 설명하겠습니다!

새로운 내용을 배웠기를 바랍니다. 피드백이나 질문이 있으면 언제든지 문의해 주세요!!

즐거운 코딩하세요! ?

• ? 라이브 데모
• ?‍? 소스 코드
• ? 함께 반응하다 문서

위 내용은 몇 분 안에 React 앱에 실시간 협업을 추가하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!