우선 앞서 진행했던 것들 중 몇가지를 수정했다.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/..

기본 준비가 돼었으니 이제는 채팅방 생성을 시작한다.그러기 위해 먼저 DB Table을 생성한다.CREATE TABLE chat_rooms ( id SERIAL PRIMARY KEY, name VARCHAR(100) NOT NULL, -- 채팅방명 creator_id BIGINT NOT NULL, -- 채팅방 만든 사람 ID created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP);백엔드소스ChatRoom.javapackage com.company.common.database.entity;import java.time.LocalDateTime;import org.springframework.data.annotation.Id;import org.spring..

먼저 회원가입 및 로그인 처리 기능 작성DB 생성사용자 관리 테이블 생성CREATE TABLE users ( id BIGSERIAL PRIMARY KEY, username VARCHAR(100) UNIQUE NOT NULL, password VARCHAR(255) NOT NULL, nickname VARCHAR(100) NOT NULL, create_at Timestamp NOT NULL);DTO 생성ApiResponse package com.company.common.dto;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;/** * 프론트엔드로 데이터를 전송하기 위한 DTO Class * @p..