우선 앞서 진행했던 것들 중 몇가지를 수정했다.1. localhost:5173/ 로 접근했을 때 Login 화면으로 이동 처리App.jsx 부분 수정import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';return ( } /> {/* 3. Route 목록을 Loof 돌리면서 route의 componentName에 해당하는 component를 조회한다. */} {routeList.length === 0 ? ( 라우트 불러오는 중...} /> ) : ( routeList.map((route, index) => { ..

이제 채팅창 구성까지 끝났고 이제 메시지를 주고 받는 작업을 한다.DTO 생성ChatMessage.javapackage com.company.common.database.document;import lombok.*;import org.springframework.data.annotation.Id;import org.springframework.data.mongodb.core.mapping.Document;import java.time.LocalDateTime;/** * MongoDB에 저장될 채팅 메시지 도큐먼트 */@Document(collection = "chat_messages")@Data@NoArgsConstructor@AllArgsConstructor@Builderpublic class Chat..

채팅방 목록까지 만들었고 채팅방 목록을 클릭하면 채팅방에 들어올 수 있도록 처리 했다.채팅방에 들어왔을때 UI는 다음과 같다.왼쪽에는 내가 참여한 채팅방 목록 오른쪽에는 참여자 목록 그리고 가운데는 채팅내용이 들어가도록 처리 하려고 한다.역시 백엔드 먼저 작업을 시작한다.DB Table 생성CREATE TABLE chatroom_user ( chatroom_id BIGINT NOT NULL, user_id BIGINT NOT NULL, CONSTRAINT chatroom_user_pkey PRIMARY KEY (chatroom_id, user_id));채팅방에 참여한 인원관리 테이블이다.DTO 생성 ChatRoomUser.javapackage com.company.common.databa..

이전에 백엔드에서 여러가지 문제를 해결한다고 길어져서 이제 나눠서 프론트엔드를 작성한다.DB 라우터 정보에 추가한다.path : /chatroomscomponent_name : chat/ChatRommssrc/api/service/chat/ChatRoomService.jsimport axiosInstance from "../../instance/axiosInterceptor";/** * 채팅방 관리 Service */class ChatRoomService { /** * 모든 채팅방 목록을 조회하는 API * @returns {Promise>} */ async selectChatRoom() { return await axiosInstance.get('/chat/..

로그인 처리까지 완료가 되었으니 이제는 채팅을 위해 WebSocket 설정을 진행한다.WebSocketConfig.javapackage com.company.config.websocket;import java.util.HashMap;import java.util.Map;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.reactive.HandlerMapping;import org.springframework.web.reactive.handler.SimpleUrlHandlerMapping;import or..