오늘은 저번에 얻은 채팅 프로그램을 리액트로 변환하고자 한다. 먼저 백엔드 쪽에서의 설정 WebConfigpackage b2o4.common.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappin..

WebSocket으로 채팅창 만들기를 시도 구글링해서 가져온 웹소켓 코드를 일단 실험.  다른 사람의 코드를 git clone으로 가져온 거라 그룹 실시간 채팅의 역할을 하기 위해서는 더 다듬어야할 필요가 있음. 또한 이 코드는 단순 스프링부트 + html + JS로 만들어진 것이기에 리액트와 DB에 어떻게 연결할지 생각해볼 필요가 있다. 일단 뼈대가 된 코드를 구했다는 사실에 만족하며 오늘은 여기까지.

오늘은 간단하게 스트리밍 시작 / 종료 처럼 보이게 만들기 import React, { useRef, useEffect, useState } from 'react';import '../css/WebCam.css';const Webcam = () => { const videoRef = useRef(null); const [webCamView, setWebCamView] = useState(false); const getCamera = () => { navigator.mediaDevices.getUserMedia({ video: true }) .then((stream) => { let video = v..

웹캠과 리액트를 연결하는 것이 오늘의 목표 구글링을 통해 웹캠과 리액트를 연결할 수 있는 코드를 발견import React, { useRef, useEffect } from 'react';const Webcam = () => { const videoRef = useRef(null); const getCamera = () => { navigator.mediaDevices.getUserMedia({ video:true }) .then((stream) => { let video = videoRef.current; video.srcObject = stream; video...

라이브 스트리밍과 게시판을 동시에 생각하면서 생각했던 기능들이1. '스트리밍 하러가기' 버튼을 누르면 스트리머에게 그때마다 새로운 URL(스트리밍 페이지)을 제공해야함. 2. 스트리밍 했던 페이지들은 종료돠어도 사라지지 않고 게시판에 차곡차곡 쌓임 -> db에 url이 필요한 이유? 3. 스트리밍이 종료되면 그 페이지의 채팅창은 동결돼야 함. 4. 한 번 종료한 스트리밍은 재시작을 못함('스트리밍 시작' 버튼이 없음).  스트리밍 시작은 오로지 게시판의 '스트리밍 하러가기' 버튼을 통해 갈 수 있는 페이지에서 할 수 있음.였으나, 점점 더 복잡해 짐에 따라 게시판이 정말 필요한가? 중점은 장소 대여 사이트인데 스트리밍에 힘을 줘야 하는가에 대한 의문이 생김. 때문에 게시판 계획을 취소하고 라이브 스트리밍..

4일차는 figma를 설계. 내가 담당한 페이지인 첫 번째 메인페이지의 UI 구성은 다음과 같다.   그리고 내가 담당한 주력 페이지인 두 가지의 UI는 다음과 같다.