2024.02.02 TIL

Today's list

1. 웹 소켓 구현

타입스크립트와 yarn을 사용하는 프로젝트에 실시간 채팅 기능을 구현하기 위해 필요한 라이브러리들을 설치하려면, 백엔드와 프론트엔드에서 각각 필요한 패키지들이 있습니다. 여기서는 socket.io를 백엔드에서, 그리고 프론트엔드에서는 socket.io-client를 사용하는 예시를 들었습니다.

백엔드 설치할 라이브러리
백엔드는 Node.js를 사용한다고 가정하며, socket.io를 설치해야 합니다. 추가로, 타입스크립트를 사용하는 경우에는 @types/node와 @types/socket.io도 필요할 수 있습니다.

yarn add socket.io
yarn add @types/socket.io @types/node --dev

프론트엔드 설치할 라이브러리
프론트엔드에서는 socket.io-client 라이브러리를 사용하며, 타입스크립트 프로젝트의 경우에는 해당 타입 정의도 설치해야 합니다.

yarn add socket.io-client
yarn add @types/socket.io-client --dev

• 프로젝트 구성
  타입스크립트: 타입스크립트를 사용하는 프로젝트에서는, 소켓 이벤트 핸들링과 관련된 인터페이스를 정의하여 타입 안정성을 보장할 수 있습니다. 예를 들어, 서버와 클라이언트 간에 교환되는 메시지의 형태를 인터페이스로 정의할 수 있습니다.

• 서버 구성: socket.io를 사용한 실시간 통신 로직을 포함하는 서버를 구성합니다. 이 서버는 클라이언트의 연결 요청을 수락하고, 메시지를 받아 다른 클라이언트에게 전달하는 역할을 합니다.

• 클라이언트 구성: React 컴포넌트에서 socket.io-client를 사용하여 서버에 연결하고, 메시지를 보내거나 받을 수 있습니다. 타입스크립트를 사용하면, 이벤트 핸들링과 관련된 코드에 타입을 적용하여 더욱 안정적인 개발이 가능합니다.

---

1. 채팅 메시지 리스트 컴포넌트 (ChatMessageList.tsx)
   채팅 메시지 리스트를 보여주는 컴포넌트입니다. 이 컴포넌트는 채팅 메시지 배열을 prop으로 받아, 리스트 형태로 렌더링합니다.

import React from 'react';

interface Message {
  id: string;
  text: string;
  sender: string;
}

interface ChatMessageListProps {
  messages: Message[];
}

const ChatMessageList: React.FC<ChatMessageListProps> = ({ messages }) => {
  return (
    <ul>
      {messages.map((message) => (
        <li key={message.id}>
          <strong>{message.sender}:</strong> {message.text}
        </li>
      ))}
    </ul>
  );
};

export default ChatMessageList;

2. 메시지 입력 및 전송 컴포넌트 (ChatInput.tsx)
   사용자가 메시지를 입력하고 전송할 수 있는 컴포넌트입니다. 입력 필드와 전송 버튼을 포함합니다.

import React, { useState } from 'react';

interface ChatInputProps {
  onSendMessage: (message: string) => void;
}

const ChatInput: React.FC<ChatInputProps> = ({ onSendMessage }) => {
  const [message, setMessage] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!message.trim()) return;
    onSendMessage(message);
    setMessage('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button type="submit">Send</button>
    </form>
  );
};

export default ChatInput;

3. 전체 채팅 컨테이너 컴포넌트 (ChatContainer.tsx)
   전체 채팅 애플리케이션을 포함하는 컨테이너 컴포넌트입니다. ChatMessageList와 ChatInput 컴포넌트를 포함하고, socket.io-client를 사용하여 서버와의 연결을 관리합니다.

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
import ChatMessageList from './ChatMessageList';
import ChatInput from './ChatInput';

const socket = io('http://localhost:4000');

const ChatContainer: React.FC = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    socket.on('chat message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    return () => {
      socket.off('chat message');
    };
  }, []);

  const handleSendMessage = (message: string) => {
    socket.emit('chat message', message);
  };

  return (
    <div>
      <ChatMessageList messages={messages} />
      <ChatInput onSendMessage={handleSendMessage} />
    </div>
  );
};

export default ChatContainer;