JSON의 기본 형식JSON은 두 가지 기본 데이터 구조를 사용합니다:객체 (Object) : { }로 감싸며, 키-값 쌍으로 구성됩니다.json{ "key1": "value1", "key2": "value2" } 배열 (Array) : [ ]로 감싸며, 값의 목록으로 구성됩니다.json[ "value1", "value2" ]이외에도 JSON은 문자열, 숫자, 불리언 값, null 값 등을 지원합니다.JSON의 예시객체 예시: json { "name": "John Doe", "age": 30, "isStudent": false, "courses": ["Math", "Science"], "address": { "street": "123 Main St", "city": "Anytown" } }배열 예시:js..

오늘은 스트리밍 시작/종료 버튼을 눌렀을 떄 다른 사용자들에게도 영향을 주도록 설정. 어제 했던 채팅창 동결 기능을 응용해서 재사용. 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..

App.jsimport React, { useEffect, useState } from 'react';import axios from 'axios';import './App.css';function App() { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const [files, setFiles] = useState([]); const [posts, setPosts] = useState([]); const imageUploadToJava = () => { // Form : 특정 값을 가져와서 넘겨줄 때 사용하는 객체 const formData = new FormData()..

mysql CREATE TABLE IF NOT EXISTS posts ( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(255) NOT NULL, content VARCHAR(255) NOT NULL, image_url VARCHAR(255), created_at DATETIME DEFAULT CURRENT_TIMESTAMP); Post-Mapper.xml select * from posts insert into posts (title, content, image_url) values (#{title}, #{content}, #{imageUrl})  PostService + PostServiceImpl//PostServi..