다시 날짜와 메시지 내용을 기준으로 메시지를 삭제하는 기능을 구현하기로 결정. 그런데 날짜를 구하고 형식을 바꾸는 메서드가 두 가지가 있음을 알았다. DateTimeFormatter와 SimpleDateFormat인데, 그 차이를 알아보았다.//DateTimeFormatter 와 SimpleDateFormatDateTimeFormatter timeFormat = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");String msgAt = LocalDateTime.now().format(timeFormat);chatLog.setMsgAt(msgAt);SimpleDateFormat timeFormat = new SimpleDateFormat("yyyy-MM-dd HH..

오늘은 스트리밍 시작/종료 버튼을 눌렀을 떄 다른 사용자들에게도 영향을 주도록 설정. 어제 했던 채팅창 동결 기능을 응용해서 재사용. WebCam.js//WebCam.js // 중략... const [stompClient, setStompClient] = useState(null); const [connected, setConnected] = useState(false); //중략.. // 스트리밍 시작 버튼 활성화/비활성화 다른 사용자들에게 공유 시키기 useEffect(() => { const socket = new SockJS('http://localhost:9001/ws'); // java 쪽의 서버포트 설정과 맞춰서 작성 ..

기존에 쓰던 자동 스크롤 내리기 때문에 엔터키를 누를 때마다 웹페이지 전체의 스크롤이 아래로 내려가는 현상이 발생 useEffect(() => {if (messagesContainerRef.current) { messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;}}, [messages]);  scrollTop : 요소의 수직 스크롤 위치. 숫자가 클 수록 스크롤이 아래에 있음 scrollHeight : 요소의 전체 콘텐츠 높이  messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight 채팅창의 스크롤이 가장 아래로 이..

어제 react-full-screen 라이브러리를 다운 받고 FullScreen을 사용해 전체화면으로 전환하는 버튼을 만들었는데 오늘 그것들이 무의미한 행동이었음을 깨달음. 그냥 video 태그에 controls 속성을 부여했으면 재생버튼, 전체화면 버튼이 자체적으로 달려 있던 것. 따라서 어제 작성한//yarn add react-full-screenimport { FullScreen, useFullScreenHandle } from 'react-full-screen';// 중략...const handleFullScreen = useFullScreenHandle();//중략...{webCamView ? : 준비 중 입니다.} 이 코드들은 그냥 삭제.  video에 co..

오늘은 채팅창 동결, 채팅 삭제, 비디오 전체화면 전환을 구현. 채팅창 동결const [freezeChat, setFreezeChat] = useState(false);// 중략...const handleFreezeChat = () => {setFreezeChat(!freezeChat);}// 중략... setMessage(e.target.value)}disabled={!connected || freezeChat}onKeyDown={enterKey}className='message-input'/>// 중략{freezeChat ? '채팅창 동결 해제' : '채팅창 동결'}// 버튼 클릭 시 input 창 비활성화    채팅 삭제const deleteMessage = (index) => { setMessa..

어제 만든 리액트 코드에 엔터키로 입력되도록 하는 코드 작성 const enterKey = (e) => { if(e.key === 'Enter'){ e.preventDefault(); sendMessage(); } }  setMessage(e.target.value)} disabled={!connected} onKeyDown={enterKey} /> 이모지 파일을 LiveChat 파일과 연동//Emoji.jsimport React from 'react';import '../css/Streaming.css';const emojiList = [ // 중략];function Emoji({onSelect}) { return ( ..