펍넙 채팅 SDK로 스레드 및 인용 메시지를 만드는 방법
Tags: chatsdk, typescriptsdk, chatjavascript
Published: 2023-12-21 10:21:56

펍넙 채팅 SDK 소개
------------

타입스크립트 및 자바스크립트 애플리케이션에 사용할 수 있는 PubNub Chat SDK는 최소한의 개발로 앱에 강력하고 유연한 채팅 기능을 쉽게 추가할 수 있도록 설계된 일련의 API를 제공합니다. [인용](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/quotes), [사용자 멘션](https://www.pubnub.com/docs/chat/chat-sdk/build/features/users/mentions), [채널 참조](https://www.pubnub.com/docs/chat/chat-sdk/build/features/channels/references), [스레드](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads), [읽음](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/read-receipts) 확인, [입력 표시기와](https://www.pubnub.com/docs/chat/chat-sdk/build/features/typing-indicator) 같은 채팅 옵션이 SDK에서 기본적으로 지원되므로 본격적인 앱을 빠르게 구축할 수 있습니다.

Chat SDK를 시작하려면 [문서와](https://www.pubnub.com/docs/chat/chat-sdk/overview) [샘플 채팅 앱을](https://www.pubnub.com/docs/chat/chat-sdk/build/sample-chat) 참조하세요. [튜토리얼에서는](https://www.pubnub.com/tutorials/chat-sdk/) Chat SDK의 기본 기능에 대해 안내하고 몇 가지 고급 기능을 다루며, [호스팅된 데모에서는](https://www.pubnub.com/demos/chat-sdk-mobile/) Chat SDK가 실제로 작동하는 모습을 보여드립니다.

이 튜토리얼은 펍넙 채팅 SDK의 보다 강력한 기능에 대해 자세히 살펴보는 **시리즈 게시물의** 일부입니다. 이 시리즈는 순서와 상관없이 읽을 수 있지만 관련 글 목록은 아래에 나와 있습니다:

-   [채팅 SDK로 사용자 채널 멤버십을 관리하는 방법](https://pubnub.com/how-to/chat-sdk-manage-user-channel-membership/)
-   [Chat SDK로 메시지에 리액션 및 이모티콘을 추가하는 방법](https://pubnub.com/how-to/chat-sdk-add-reactions-to-messages/)
-   [Chat SDK로 스레드를 만들고 메시지를 인용하는 방법](https://pubnub.com/how-to/chat-sdk-create-threads-and-quote-messges/)
-   [Chat SDK로 사용자 및 채널을 멘션하는 방법](https://pubnub.com/how-to/chat-sdk-mention-users/)

스레드 만들기 및 메시지 인용하기
------------------

저희는 기존 SDK를 사용하는 채팅 개발자들로부터 받은 피드백을 해결하기 위해 PubNub Chat SDK를 도입했습니다. 어떤 PubNub SDK를 사용하든 사용자 간 실시간 메시지 교환은 간단하지만, 많은 개발자들이 사용자들이 기대하는 것과 동일한 채팅 기능, 즉 메시지를 스레드로 구성하거나 이전 메시지를 인용하거나 다른 사용자를 태그하는 등의 기능을 구현하고자 하는 니즈가 있음을 확인했습니다. 이러한 표준 채팅 기능을 앱에서 쉽게 구현할 수 있도록 표준 채팅 기능을 가져와 API를 공개했으며, 이 가이드에서는 처음 두 가지 예제인 메시지 스레드 만들기와 이전 메시지 인용을 구현하는 방법을 안내합니다.

### 전제 조건

앱에 [Chat 객체의](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/chat) 인스턴스가 인스턴스화되어 있는지 확인합니다.

```js
const chat = await Chat.init({
  publishKey: "YOUR_PUBLISH_KEY",
  subscribeKey: "YOUR_SUBSCRIBE_KEY",
  userId: "YOUR_USER_ID",
})
```

Chat SDK에 전달할 수 있는 매개 변수는 매우 많지만 스레드와 따옴표의 경우 표준 게시 키, 가입 키 및 사용자 ID 외에는 아무것도 필요하지 않습니다. 이 모든 것이 처음이고 어디서부터 시작해야 할지 잘 모르겠다면 문서에서 [초기 구성](https://www.pubnub.com/docs/chat/chat-sdk/build/configuration) 섹션을 참조하세요.

### 메시지 스레드

[메시지 스레드에 대한 문서는](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads) 메시지 문서 아래에 있으며 몇 가지 구현 세부 사항을 설명합니다. 기본적으로 각 메시지 스레드에는 통신을 처리하기 위해 자체 PubNub 채널이 필요하지만 Chat SDK를 사용하는 경우에는 해당 구현이 숨겨져 있습니다.

기존 루트 [메시지가](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/message) 있으면 [createThread()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads#create-thread) API를 사용하여 해당 메시지에서 스레드를 만들 수 있습니다. 모든 메시지에 대해 하나의 스레드만 가질 수 있으므로 [hasThread()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads#utility-getter-function) API를 사용하여 새 스레드를 만들기 전에 이미 스레드가 있는지 확인하는 것이 가장 좋습니다.

```js
if (!rootMessage.hasThread)
{
  threadChannel = await rootMessage.createThread()
}
```

createThread()는 [Channel과](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/channel) 유사한 메서드를 가진 [ThreadChannel](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/thread-channel) 객체를 반환합니다. 예를 들어, 스레드를 사용하여 대화의 전체 [기록을](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads#get-historical-thread-message) 읽으려는 경우 의사 코드는 다음과 같이 보일 수 있습니다:

```js
FOREACH message in Channel
  message.getHistory()
  IF (message.hasThread() THEN
    threadChannel = message.getThread()
    threadChannel.getHistory()
  END IF
END FOREACH
```

표준 채널에서 메시지를 보낼 때와 같은 방법으로 [sendText()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads#send-thread-message) API를 사용하여 스레드 채널에 문자 메시지를 보낼 수 있습니다.

```js
const threadChannel = rootMessage.getThread()
threadChannel.sendText(“hello”)
```

### 메시지 인용하기

메시지 인용은 수신자가 해석할 수 있는 전송되는 메시지에 대한 컨텍스트를 제공하는 Chat SDK 기능 중 하나의 예입니다. 앞의 예시처럼 [sendText()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads#send-thread-message) 를 사용할 수 있다는 것은 매우 좋은 일이지만, 메시지에 파일을 포함시키고 싶다면 어떻게 해야 할까요? 메시지에 사용자나 채널을 태그하고 싶다면 어떻게 해야 할까요? 또는 이 가이드와 가장 관련성이 높은 경우, 현재 메시지 내에서 이전 메시지를 인용하고 싶다면 어떻게 해야 할까요? 이러한 모든 시나리오는 [메시지 초안을](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/message-draft) 사용하여 처리할 수 있습니다.

MessageDraft는 Chat SDK의 기본 유형으로 대부분의 채팅 구현에서 사용자에게 풍부한 기능을 제공하는 데 사용됩니다. 새 채팅 메시지가 작성될 때마다 새 MessageDraft 개체를 만들어야 하며, 그런 다음 [addQuote()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/quotes#quote-message) API를 호출하여 이전 [메시지를](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/message) 참조할 수 있습니다.

[사용자와 채널을 멘션하는 방법을](https://pubnub.com/how-to/chat-sdk-mention-users/) 설명하는 가이드에서 [MessageDraft에](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/message-draft) 대해 더 자세히 설명하지만, 요약하면 다음과 같습니다:

메시지 초안을 보관할 변수를 선언합니다.

```js
 const [newMessageDraft, setNewMessageDraft] = useState<MessageDraft>()
```

채팅 초기화의 일부로, 그리고 메시지가 전송된 후 새 MessageDraft를 초기화합니다.

```js
setNewMessageDraft(threadChannel.createMessageDraft())
```

입력 텍스트가 변경될 때마다(즉, 사용자가 무언가를 입력할 때마다) 메시지 초안을 알립니다.

```js
//  Note: Within the onChange() handler for the input field 
const response = await newMessageDraft.onChange(event.currentTarget.value)
```

사용자 행동에 대한 응답으로 이전 메시지를 따옴표로 추가합니다.

```js
newMessageDraft.addQuote(message)
```

필요할 때 메시지 보내기

```js
newMessageDraft.send()
```

작동하는 데모에서 보면 더 쉽게 이해할 수 있습니다...

### 모든 것 종합하기

아래의 짧은 데모에서 메시지 스레드와 메시지 인용에 대한 아주 간단한 예를 볼 수 있습니다:

이 데모는 실제 작동 중인 라이브 데모이므로 여러 탭에서 데모를 실행하여 실시간으로 수신되는 메시지를 자유롭게 확인하세요. 이 데모는 공유 애플리케이션이므로 '앱 상태 초기화'를 실행하면 백지 상태로 플레이할 수 있습니다.

인터랙티브 데모
--------

  
이 페이지에서 **임베드된 콘텐츠를 사용할 수 없는 경우** [https://chat-sdk-how-to-threads-quotes.netlify.app/](https://chat-sdk-how-to-threads-quotes.netlify.app/) 에서도 볼 수 있습니다.

이 데모를 구동하는 코드는 [GitHub에서](https://github.com/PubNubDevelopers/Chat-SDK-How-Tos/tree/main/threads-quotes) 사용할 수 있지만, 여기서는 앱의 관련 코드에서 일부 발췌하여 어떻게 결합되는지 보여드립니다:

```js
//  Input field onChange handler
async function handleInput(event: React.FormEvent<HTMLInputElement>)
{
  //  No special rendering for Message Draft with this app
  if (!newMessageDraft) return
  const response = await newMessageDraft.onChange(event.currentTarget.value)
}
```

메시지를 제출하는 로직. 이 데모는 항상 스레드 채널에 응답하도록 하드코딩되어 있습니다.

```js
async function handleSend(event: React.SyntheticEvent) {
  newMessageDraft.send()
  setNewMessageDraft(threadChannel.createMessageDraft())
  setQuotedMessagePreview("")
  setText("")
}
```

사용자가 '메시지 인용하기' 버튼을 누릅니다.

```js
async function handleQuoteMessage(message: Message)
{
  if (!newMessageDraft) return;
  setQuotedMessagePreview(message.text)
  newMessageDraft.addQuote(message)
}
```

[다른 채널의 메시지를 인용할 수 없으므로](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/quotes#quote-message) 데모에서는 동일한 스레드의 메시지만 인용할 수 있습니다.

데모 보기: 모바일에서 React Native 데모로 스레드 생성 및 메시지 인용하기
-----------------------------------------------

[GitHub에서](https://github.com/pubnub/js-chat/tree/master/samples/react-native-group-chat) 전체 소스 코드가 포함된 [호스팅 데모로](https://www.pubnub.com/demos/chat-sdk-mobile/) 제공되는 모바일용 Chat SDK 데모를 사용하여 이러한 기능을 사용해 볼 수 있습니다. **이 섹션의 하단에서 iFrame으로 렌더링된 데모도 볼** 수 있습니다.

![Two smartphones displaying message thread with user interactions in a chat application.](https://images.ctfassets.net/3prze68gbwl1/6Z3UrVL7MjylWg9sPQ3bir/f53ef78f4b17272bb70f5431757c98d4/threads-quotes.png)

데모에서 스레드를 만들고 메시지를 인용하려면 다음 단계를 따르세요:

1.  애플리케이션에 로그인하여 각 디바이스에 대해 임의의 사용자 ID를 선택합니다.
2.  첫 번째 디바이스에 로그인한 사용자를 선택하여 두 번째 디바이스에서 대화를 시작합니다.
3.  대화에 몇 가지 메시지 추가하기
4.  메시지 중 하나를 길게 누릅니다.
5.  '스레드에서 답글'을 선택하고 답글을 보냅니다.
6.  메시지 중 하나를 길게 누릅니다(방금 보낸 답글일 수도 있음).
7.  '메시지 인용하기'를 선택합니다.
8.  이 인용된 텍스트가 포함된 메시지를 보냅니다.
9.  대화에서 뒤로 물러나거나 앱에서 로그아웃했다가 다시 로그인해도 반응은 유지되며 메시지 기록에서 읽을 수 있습니다.

  
이 페이지에서 **임베드된 콘텐츠를** 볼 수 **없는 경우** [https://pubnubdevelopers.github.io/Chat-SDK-Demo/mobile/](https://pubnubdevelopers.github.io/Chat-SDK-Demo/mobile/) 에서도 볼 수 있습니다.

펍넙이 어떤 도움을 줄 수 있나요?
===================

이 문서는 원래 [PubNub.com에](https://pubnub.com/how-to/chat-sdk-create-threads-and-quote-messges/) 게시되었습니다.

저희 플랫폼은 개발자가 웹 앱, 모바일 앱, IoT 디바이스를 위한 실시간 인터랙티브를 구축, 제공, 관리할 수 있도록 지원합니다.

저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 8억 명의 월간 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한, 트래픽 급증으로 인한 지연 시간 문제를 걱정할 필요가 없습니다.

PubNub 체험하기
-----------

[라이브 투어를](https://www.pubnub.com/tour/introduction/) 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.

설정하기
----

PubNub [계정에](https://admin.pubnub.com/signup/) 가입하여 PubNub 키에 무료로 즉시 액세스하세요.

시작하기
----

사용 사례나 [SDK에](https://www.pubnub.com/docs) 관계없이 [PubNub 문서를](https://www.pubnub.com/docs) 통해 바로 시작하고 실행할 수 있습니다.