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..

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..

기본 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에 문의를 했서 다음과 같이 처리 했다.아~!!! 그전에 먼저 프론트엔..

먼저 회원가입 및 로그인 처리 기능 작성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..

이번엔 백엔드 환경설정을 한다.이클립스를 사용하고 있고 이클립스에 STD를 설치 해 놓은 상태이다.프로젝트를 생성할 때Spring Boot > Spring Starter Project 를 선택해서 생성한다.프로젝트 명이나 이런건 알아서 설정하면 되고 Dependencies에서 다음과 같이 선택한다.Spring Reactive WebWebSocketLombokSpring Data R2DBCSpring Data Reactive MongoDBPostgreSQL Driver위와 같이 하면 build.gradle 파일이 다음과 같이 생성된다.plugins { id 'java' id 'org.springframework.boot' version '3.4.5' id 'io.spring.dependency-manage..

이제 프론트엔드를 구성해 보려 한다.프로젝트 생성프로젝트폴더 > npm create vite@latest chat-client --template reactSelect a framework : > ReactSelect a variant: > JavaScript프로젝트폴더 > cd chat-client프로젝트폴더\chat-client > npm install TailwindCSS 설치최근에 TailwindCSS가 버전업을 해서 현재 Beta 버전 4.1이 나왔다. 그래서 Beta지만 사용해보기로 했다.ChatGPT는 설치 방법을 계속 3 버전으로 알려줘서 TailwindCSS 사이트를 들어가 참고했다.https://tailwindcss.com/docs/installation/using-vite Instal..