React3 [React] - 실시간 채팅 기능 구현(3) - React로 프론트단 코드 작성 사실 이 프로젝트를 진행하면서 React를 처음 써보았다.AI에 많이 의존하기도 했고, 부족한 부분이 많아서 프로젝트를 하나 더 진행하면서 더 익히고,리액트에 관한 포스팅도 해야겠다는 생각이 들었다. 보시는 분들도 좋은 코드는 아니니 많이 참고는 하지 마시고, 흐름 위주로 보셔도 좋을 것 같다. 프론트 - 백 연결setupProxy.jsconst { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:8080/api', .. 2024. 11. 14. [Spring] 실시간 채팅 기능 구현(2) - Entity, Controller, Service 저번 포스팅에서 WebSocket,그리고 Controller 관련 설정까지 마쳤다.https://wook99.tistory.com/115 [Spring] 실시간 채팅 기능 구현(1) - WebSocket, 그리고 STOMP얼마 전 팀 프로젝트에서 구현했던 실시간 채팅 기능을 포스팅 해보려고 한다. 주요 개발 환경은 다음과 같다. Java - JDK21Spring Boot - 3.3.4React 구상했던 흐름도는 이렇다.1. 유저가 채팅 카테고리wook99.tistory.com 오늘은 Entity 작성,Controller, 그리고 Service까지 작성해보자 Entity ChatRoom.javapackage com.team5.pyeonjip.chat.entity;import com.team5.pyeonji.. 2024. 11. 12. [Spring] 실시간 채팅 기능 구현(1) - WebSocket, 그리고 STOMP 얼마 전 팀 프로젝트에서 구현했던 실시간 채팅 기능을 포스팅 해보려고 한다. 주요 개발 환경은 다음과 같다. Java - JDK21Spring Boot - 3.3.4React 구상했던 흐름도는 이렇다.1. 유저가 채팅 카테고리 선택 2. 채팅 대기방 진입 (WAITING)3. 관리자는 채팅 대기방 확인 가능4. 들어가려는 채팅 대기방 입장 버튼 클릭5. 양쪽 모두 채팅 대기방 활성화 (ACTIVE)6. 채팅 진행7. 채팅 종료 버튼을 눌러 양쪽 채팅방 종료(CLOSED) 이렇게 채팅방은 총 3개의 STATUS를 가진다. (WAITING, ACTIVE, CLOSED)채팅방 활성화는 오직 관리자만 진행할 수 있다. 구현에 앞서, WebSocket과 STOMP의 개념을 먼저 정리하겠다.WebSocket이란?W.. 2024. 11. 11. 이전 1 다음
