4주차 과제2️⃣

Requirement

• Movie App 실시간 채팅 구현하기
• Custom Hook 만들기

Coding

🔹 Movie App 실시간 채팅 구현하기

express node js 설치: $ npm install express
socket.io 설치 $ npm install socket.io $ npm install socket.io-client

server.js

import express from "express";
import { createServer } from "http";
import socketIO from "socket.io";
import cors from "cors";

const app = express();
app.use(cors());
const server = createServer(app);
const io = socketIO(server, {
  cors: {
    origin: "http://localhost:3000", // 허용할 도메인
    methods: ["GET", "POST"], // 허용할 HTTP 메소드
  },
});

io.on("connection", (socket) => {
  console.log("새로운 클라이언트가 연결되었습니다.");

  // 클라이언트로부터의 메시지 수신 및 브로드캐스팅
  socket.on("message", (message) => {
    console.log("새로운 메시지:", message);
    io.emit("message", message);
  });

  // 클라이언트 연결 해제 처리
  socket.on("disconnect", () => {
    console.log("클라이언트가 연결을 해제하였습니다.");
  });
});

server.listen(3001, () => {
  console.log("서버가 3001 포트에서 실행 중입니다.");
});

live-chat.js

import React from "react";
import useChat from "../hooks/useChat";

export default function LiveChat() {
  const {
    username,
    handleUsernameChange,
    inputValue,
    handleTextChange,
    messages,
    handleMessageSend,
  } = useChat();

  return (
    <>
      <h1 className="title" style={{ textAlign: "center" }}>
        Live Chat
      </h1>
      <label for="username">User: </label>
      <input
        id="username"
        type="text"
        value={username}
        onChange={handleUsernameChange}
        placeholder="사용자 이름"
      />
      <label for="text"> </label>
      <input
        id="text"
        type="text"
        value={inputValue}
        onChange={handleTextChange}
      />
      <button onClick={handleMessageSend}>전송</button>
      <div>
        {messages.map((message, index) => (
          <p key={index} style={{ color: message.color }}>
            {message.username}: {message.content} - {message.time}
          </p>
        ))}
      </div>
    </>
  );
}

🔹 Custom Hook 만들기

useChat.js

import React, { useState, useEffect } from "react";
import io from "socket.io-client";

const socket = io("http://localhost:3001"); // 서버의 URL에 맞게 변경
const MESSAGE = "message";

export default function UseChat() {
  const [username, setUsername] = useState("");
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState("");

  useEffect(() => {
    socket.on(MESSAGE, handleMessage);
    return () => {
      socket.off(MESSAGE, handleMessage);
    };
  }, []);

  const handleMessage = (message) => {
    setMessages((prevMessages) => [...prevMessages, message]);
  };

  const handleUsernameChange = (e) => {
    setUsername(e.target.value);
  };

  const handleTextChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleMessageSend = () => {
    if (inputValue.trim() !== "") {
      const currentTime = new Date().toLocaleTimeString();
      socket.emit("message", {
        username,
        content: inputValue,
        time: currentTime,
      });
      setInputValue("");
    }
  };

  return {
    username,
    handleUsernameChange,
    inputValue,
    handleTextChange,
    messages,
    handleMessageSend,
  };
}

Result

GitHub

12회차 과제

🫠 느낀점

custom hook을 사용하여 실시간 채팅을 구현하였다. custom hook 사용이 익숙하지 않아 실습 예제들을 다시 한번 복습하면서 실시간 채팅에 적용해보았다. 실시간 채팅을 구현하기 위해서는 먼저 서버 환경을 구축해야 한다. socket.io를 활용하여 실시간 통신이 가능하게 만들었다. 다음으로 Input 태그를 통해 사용자의 이름, 사용자가 입력한 text 내용 그리고 사용자가 전송 버튼을 눌렀을 때 입력받은 정보를 가지고 와야 한다.custom hook을 활용하여 정보를 저장하고 값을 가지고 왔다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.