728x90 반응형 springboot29 웹 소켓을 이용한 채팅 내용 저장 (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. 카카오 로그인 MySQL, React, SpringBoot로 구현한 게시판 서비스에 카카오 로그인 기능을 추가하는 과정으로, 실습에 사용한 코드는 https://myanjini.tistory.com/entry/board-%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C 에서 내려받을 수 있습니다. 애플리케이션 추가 카카오 개발자 사이트(https://developers.kakao.com/)에서 애플리케이션을 추가하고, 앱 키를 확인합니다. (여기에서는 JavaScript SDK를 사용하므로, JavaScript 키를 필요로 합니다.) 플랫폼 메뉴에서 사이트 도메인을 등록하고, Redirect URI 등록 페이지에서 카카오 로그인 서비스를 활성화하고, Redirect URI 주소를 등록합니다. 동의항목 .. 2023. 4. 6. 네이버 로그인 MySQL, React, SpringBoot로 구현한 게시판 서비스에 네이버 아이디로 로그인 기능을 추가하는 과정으로, 실습에 사용한 코드는 https://myanjini.tistory.com/entry/board-%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C 에서 내려받을 수 있습니다. 애플리케이션 등록 네이버 개발자 사이트(https://developers.naver.com/)에서 애플리케이션을 등록하고, API를 설정합니다. 라이브러리 등록 SDK 다운로드 페이지(https://developers.naver.com/docs/login/sdks/sdks.md)에서 JavaScript용 네이버 로그인 라이브러리의 최신 버전 링크 주소를 확인합니다. index.html 파일에 앞에서 .. 2023. 4. 6. 이전 1 2 3 4 5 6 ··· 8 다음 728x90 반응형
