728x90 반응형 개발23 웹 소켓을 이용한 채팅 내용 저장 (React + SpringBoot + SockJS + STOMP + MySQL) 웹 소켓을 이용해서 채팅 기능을 구현합니다. 채팅 내용은 MySQL DB에 저장되며, 채팅에 참여하면 이전 대화 내용의 일부를 받아 출력해 줍니다. 프론트엔드 의존 모듈 설치 의존 모듈을 설치합니다. SockJS는 WebSocket과 유사한 객체를 제공하는 브라우저 JavaScript 라이브러리로, sockjs-client는 JavaScript 클라이언트 라이브러리입니다. stompjs 라이브러리는 WebSocket 클라이언트를 통해 STOMP 브로커에 연결하고 STOMP를 제공합니다. c:\board-react> npm install sockjs-client c:\board-react> npm install @stomp/stompjs websocket Chatting2.js SockJS와 Stomp를 .. 2023. 4. 26. 웹 소켓을 이용한 채팅 (React + SpringBoot) 웹 소켓을 이용한 채팅 기능을 구현합니다. 하나의 채팅방에서 사용자 이름(닉네임)으로 구분해서 대화를 주고 받도록 되어 있으며, 채팅방 생성 및 지정, 채팅 내용 저장 기능은 반영되어 있지 않습니다. React Chatting.js // 브라우저의 기본 스타일을 제거해 주는 node 패키지 import React, { useCallback, useRef, useState, useEffect } from 'react'; import './Chatting.css'; const Chatting = () => { // # --------------------------------------------------------- // # 상태 변수 정의 // # ------------------------------.. 2023. 4. 19. 폼 데이터와 함께 파일 업로드 (다중 파일 선택창 & 다중 파일 선택) 하나의 파일 선택창에서 여러 개의 파일을 선택해서 업로드하는 기능을 확장해서 여러 개의 파일 선택창에서 여러 개의 파일을 선택해서 업로드하는 기능을 구현합니다. 단일 파일 선택창에서 다중 선택한 파일 업로드 기능은 아래 내용을 참고하세요. https://myanjini.tistory.com/entry/%ED%8F%BC-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%99%80-%ED%95%A8%EA%BB%98-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C 폼 데이터와 함께 파일 업로드 사용자 아이디, 이름, 이메일과 첨부파일을 입력받아서 서버로 전달하면, 서버는 지정된 경로에 첨부파일을 저장하고, 전달받은 값과 첨부파일 정보를 이름 : 값 형식으로 반환하는 예.. 2023. 4. 12. 웹 애플리케이션에서 도커 컨테이너 실행, 삭제, 조회 사용자 요청에 따라 웹 서버(nginx) 컨테이너를 실행, 삭제, 조회하는 웹 애플리케이션을 작성해 보겠습니다. 실습은 https://myanjini.tistory.com/entry/board-%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C 에서 가져온 코드를 이용해서 진행하겠습니다. 컨트롤러 추가 RestDockerApiController.java 파일을 추가하고, 컨테이너 목록을 조회하는 메서드, 컨테이너를 실행하는 메서드, 컨테이너를 삭제하는 메서드를 구현합니다. package board.controller; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; impo.. 2023. 4. 10. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
