Vue 채팅 앱 빌드: Vue.js 애플리케이션에서 Sendbird의 UIKit 사용

Jan 17, 2023 • 6 min read

James Robertson

채팅 을 구축 하는 것은 복잡한 노력입니다. 의료 , 게임 , 온디맨드 서비스 또는 기타 산업 을 위해 구축하든 풍부한 기능의 채팅을 구축하려면 노력이 필요합니다. 올바른 기술 스택을 선택하는 것도 중요합니다. 이 튜토리얼에서는 사용자 인터페이스 및 작은 애플리케이션을 구축하기 위한 인기 있는 프런트 엔드 JavaScript 웹 프레임워크인 Vue.js 로 채팅을 구축하는 방법을 살펴보겠습니다. 또한 Vue 채팅 앱 내 에서 기능이 풍부한 채팅 UI 구성 요소 세트인 Sendbird의 UIKit 을 사용하는 방법을 배웁니다.

다른 프런트엔드 프레임워크에서 작성된 구성 요소를 앱에 렌더링해야 하는 경우가 있습니다. 예를 들어 프런트엔드 프레임워크 간에 프로젝트를 마이그레이션하거나 선택한 프레임워크로 포팅되지 않은 타사 라이브러리(예: vuetify)를 사용할 때입니다. 이러한 경우 여러 브리징 라이브러리를 사용할 수 있습니다. 예를 들어 Angular 구성 요소 를 Angular2react 로 React 앱 에서 렌더링 하거나 Svelte 프로젝트 에서 Vue 구성 요소 를 svelte -adapter 로 렌더링할 수 있습니다. 이 튜토리얼에서는 Veuary 를 사용하여 React와 Vue 세계를 연결합니다.

Sendbird의 UIKit으로 Vue 채팅 앱을 빌드하는 방법에 대한 이 비디오 자습서를 시청하는 것이 좋습니다.

전제 조건

Vue 채팅 앱을 구축하려면 설치된 node.js 와 Sendbird 애플리케이션 ID가 필요합니다. 아직 하지 않았다면 대시보드 에서 Sendbird 계정을 설정하고 애플리케이션을 만들 수 있습니다 .

Sendbird 대시보드에서 애플리케이션 ID를 찾을 수 있습니다.

우리가 만들 것: Vue 채팅 앱의 모습

이 튜토리얼에서는 데스크톱용 WhatsApp과 유사한 UX로 Vue 채팅 앱을 빌드합니다. 최종 프로젝트 코드 는 GitHub에서 사용할 수 있으며 라이브 데모 를 확인하는 것도 좋습니다 .

우리 프로젝트는 Vue 3를 사용하여 빌드되며 앱은 기본 Vue 채팅 앱 내에서 Sendbird의 React UIKit 의 완전히 작동하는 버전을 렌더링합니다. Vue 앱은 구성을 UIKit에 전달하고 UIKit은 사용자 정보도 Vue에 다시 전달합니다. 이 양방향 커뮤니케이션을 통해 Vue 앱의 상단 헤더에 Sendbird 사용자의 이름과 읽지 않은 메시지 수를 표시할 수 있습니다. 결과는 다음과 같습니다.

The only UIKit you need.

Start building

Vue 채팅 앱 설정

Vue에는 애플리케이션을 빠르게 스캐폴딩할 수 있는 편리한 명령줄 도구가 있습니다. 프로젝트를 저장하려는 위치에서 다음을 실행하십시오.

이 명령은 새 프로젝트를 만들 때 옵션을 안내합니다. 이 자습서에 사용된 설정은 다음과 같습니다.

개발자 모드에서 앱을 시작하려면 아래 명령을 실행합니다.

이제 http://localhost:5173 을 실행하고 방문하면 반짝이는 새 랜딩 페이지가 표시됩니다 . 다음과 같이 표시됩니다.

Veaury 설치 및 구성

Veaury 는 Vue 앱 내에서 React 구성 요소를 렌더링할 수 있게 해주는 라이브러리입니다. React 앱의 Vue 구성 요소도 지원되지만 이 자습서의 범위를 벗어납니다. Veaury는 Vue 3 및 Vue 2 모두에서 작동하며 다음 명령을 사용하여 npm에서 라이브러리를 설치할 수 있습니다.

새로 만든 Vue 채팅 앱이 React 구성 요소를 가져오고 렌더링할 수 있도록 하려면 빌드 구성을 약간 변경해야 합니다. 따라서 Veaury 플러그인을 사용하려면 프로젝트의 vite.config.js 파일을 업데이트해야 합니다.

이 구성 변경 후 원하는 React 구성 요소를 react_app이라는 디렉터리에 추가할 수 있습니다. 그런 다음 이러한 React 구성 요소를 .vue 파일로 가져오고 표준 Vue 구성 요소 내에서 렌더링할 수 있습니다.

Vue 프로젝트에서 React 구성 요소 만들기

먼저 react_app에 새로운 React 구성 요소를 생성해야 합니다. 이 구성 요소는 UIKit 가져오기, 구성 및 렌더링을 담당합니다.

이 React 구성 요소가 Vue와 잘 작동하도록 하기 위해 특별한 작업을 수행할 필요가 없습니다. 여기의 코드는 다음을 수행합니다.

Sendbird UIKit 종속성 가져오기
앱 ID와 사용자 ID로 UIKit을 초기화합니다.
Sendbird SDK에 액세스하기 위해 withSendbird HOC를 사용합니다. 이렇게 하면 Vue 앱으로 다시 전달하는 데 필요한 사용자 정보에 액세스할 수 있습니다.

ChatReactComponent로 전달되는 소품은 부모 Vue 구성 요소에서 전달된다는 점은 주목할 가치가 있습니다. 여기에 props를 전달하는 것은 Vue와 통신하기 위해 React 측을 얻는 방법입니다. 이러한 속성을 정의하고 전달하는 방법은 다음 섹션에서 다룹니다.

페이지에 UIKit 추가

다음으로 Vue 채팅 앱에 ChatReactComponent를 추가합니다. 업데이트가 필요한 페이지는 views/HomeView.vue입니다. 현재 views/HomeView.vue에 있는 모든 코드를 제거하고 아래 코드를 추가합니다.

이 코드는 다음을 수행합니다.

Veaury 및 새로운 React 채팅 구성 요소 가져오기
Veaury의 applyPureReactInVue 함수를 사용하여 React 구성 요소를 Vue 구성 요소로 변환합니다.
설정 기능에서 데이터와 콜백을 설정하여 React 구성 요소에 소품으로 전달합니다.
상단 헤더를 렌더링하도록 HTML을 정의합니다. 헤더에는 사용자 이름과 읽지 않은 메시지 수가 포함됩니다. 이 데이터는 이 튜토리얼의 이후 단계에서 UIKit에서 다시 전달됩니다.
HTML에서 React Chat 구성 요소를 렌더링하여 이전에 Chat 요소의 속성으로 정의된 데이터 및 콜백을 전달합니다.
마지막으로 스타일을 추가하여 모든 것이 멋지게 보이도록 합니다.

이제 http://localhost:5173 을 방문하면 브라우저에서 UIKit 렌더링을 볼 수 있습니다 . 다음과 같이 표시됩니다.

사용자 정보를 Vue에 전달

마지막으로 사용자 정보와 읽지 않은 메시지 수가 Vue 채팅 앱으로 다시 전달되어 애플리케이션의 상단 헤더 막대에 해당 정보를 표시할 수 있습니다. 이 정보는 Sendbird SDK를 통해 액세스됩니다. UIKit에서 SDK에 액세스하려면 getSdk라는 유용한 기능을 사용할 수 있습니다. 아래와 같이 해당 함수를 호출하면 기본 SDK가 제공됩니다. 그런 다음 관련 메서드에 액세스하여 필요한 항목(읽지 않은 메시지 수 및 사용자 정보)을 가져오고 해당 정보를 소품으로 전달된 콜백(setUnreadMessageCount 및 setSbUserInfo)을 사용하여 Vue에 다시 전달할 수 있습니다.

이제 앱 상단 표시줄에 보이는 사용자 이름과 메시지 수가 표시됩니다. 아래 스크린샷에서 사용자 이름 "Bob"과 읽지 않은 메시지 수 1을 확인하십시오.

결론

축하합니다! 이제 Vue 앱에서 실행 중인 Sendbird UIKit이 있습니다. 이 튜토리얼에서는 Sendbird UIKit에서 제공하는 풍부한 기능의 미리 만들어진 디자인 구성 요소를 사용하여 Vue 채팅 앱을 만드는 방법에 대해 이야기했습니다. 이제 즐겁게 그룹을 만들고 채팅을 시작할 수 있습니다!

데이터는 Vue와 React 코드 간에 양방향으로 흐른다는 점을 기억하세요. 현명한 다음 단계는 다양한 유형의 속성을 채팅 반응 구성 요소에 전달하고 이러한 속성을 사용하여 UIKit 테마 색상을 설정하는 것과 같은 다른 방식으로 UIKit을 구성하는 것입니다.

Sendbird Chat 또는 UIKit 에 대한 도움이 필요한 경우 채팅용 문서 및 UIKit용 문서 를 참조하세요 ! 풍부한 사전 구축 UI 구성 요소를 사용하여 앱에서 채팅을 시작하고 실행하는 방법에 대한 지침을 찾을 수 있습니다. 또한 Sendbird 와 관련된 모든 것에 대해 질문하고 답변할 수 있는 포럼인 Sendbird 커뮤니티 에서 답변을 찾을 수 있습니다 . 도움이 필요하시면 주저하지 마시고 저희에게 연락해 주십시오 . 저희 전문가가 기꺼이 도와드리겠습니다. 행복한 채팅 구축! 💻