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

Spring WebFlux를 이용한 chat 프로그램 - 회원가입 및 로그인

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

갑자기 webflux를 통해서 chat 프로그램을 짜보고 싶었다.chatgpt의 도움을 받아 시작...먼저 생각하는 구성은 아래와 같이 구성 예정이다.백엔드Spring Boot + WebFluxWebSocket 서버PostgreSQL (회원/채팅로그 등)MongoDB (채팅 메시지 저장)프론트엔드React(Vite 기반)TailwindCssAxiosWebSocket 클라이언트 Docker 설치먼저 DB(Postgresql, MongoDB)를 사용하기 위해 Docker을 설치한다.https://docs.docker.com/desktop/setup/install/windows-install/ WindowsGet started with Docker for Windows. This guide covers sys..

다음과 같이 테이블 생성CREATE TABLE users ( id BIGSERIAL PRIMARY KEY, username VARCHAR(100) UNIQUE NOT NULL, password VARCHAR(255) NOT NULL, nickname VARCHAR(100), create_at TIMESTAMP);BIGSERIAL이 자동으로 시퀀스를 생성한다.입력할 때는 MySQL이나 MariaDB 처럼 사용하면 된다.insert into users (username, password, nickname, create_at) values ('홍길동', '12345', '홍길동, now())그러면 id는 자동 증가한다.시퀀스를 특정 번호부터 시작하고 싶으면 다음과 같다.-- 시작 번..