SpringBoot(11)
-
Spring WebFlux를 이용한 chat 프로그램 - 채팅(2)
이제 채팅창 구성까지 끝났고 이제 메시지를 주고 받는 작업을 한다.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..
2025.05.10 -
Spring WebFlux를 이용한 chat 프로그램 - 채팅(1)
채팅방 목록까지 만들었고 채팅방 목록을 클릭하면 채팅방에 들어올 수 있도록 처리 했다.채팅방에 들어왔을때 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..
2025.05.09 -
Spring WebFlux를 이용한 chat 프로그램 - 채팅방생성(2)
이전에 백엔드에서 여러가지 문제를 해결한다고 길어져서 이제 나눠서 프론트엔드를 작성한다.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/..
2025.05.09 -
Spring WebFlux를 이용한 chat 프로그램 - 채팅방생성(1)
기본 준비가 돼었으니 이제는 채팅방 생성을 시작한다.그러기 위해 먼저 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..
2025.05.08 -
Spring WebFlux를 이용한 chat 프로그램 - WebSocket 설정
로그인 처리까지 완료가 되었으니 이제는 채팅을 위해 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..
2025.05.08 -
Spring WebFlux를 이용한 chat 프로그램 - Dynamic Route 설정
기본 Vite에서 라우팅 하는 방법은 다음과 같다.import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';import Signup from './pages/Signup.jsx';import Login from './pages/Login';import "./App.css"function App() { return ( } /> } /> );}모든 페이지를 Import 하고 일일이 Route를 입력해 주는 방식이다.근데 처음 Vite를 접한 나에게는 이게 너무 비효율 적으로 보인다.그래서 ChatGPT에 문의를 했서 다음과 같이 처리 했다.아~!!! 그전에 먼저 프론트엔..
2025.05.03