오늘은 채팅창 동결, 채팅 삭제, 비디오 전체화면 전환을 구현. 채팅창 동결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..

EditForm.jsimport { useState } from "react";const EditForm = ({user, updateUser}) => { const[formData, setFormData] = useState(user); //수정하기 전에 수정하고자 하는 유저 정보 담을 공간 작성const changeValue = (e) => { //이벤트가 발생하면 이벤트가 발생한 곳에 name(속성)과 value(속성)를 가져옴 const {name, value} = e.target; setFormData({...formData, [name] : value});}const submitUpdatedData = (e) => { e.preventDefault(); upda..

어제 만든 리액트 코드에 엔터키로 입력되도록 하는 코드 작성 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 ( ..

오늘은 저번에 얻은 채팅 프로그램을 리액트로 변환하고자 한다. 먼저 백엔드 쪽에서의 설정 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..

스프링 부트쪽 작성 application.propertiesserver.port=9011#com.kh로 시작하는 패키지에 문제가 생기면 볼 수 있도록 확인하는 코드logging.level.com.kh=debugserver.servlet.session.tracking-modes=cookie#코드의 수정이 있을 때 자동으로 새로고침spring.devtools.livereload.enabled=true#코드의 변경이 있을 때 자동으로 다시 시작. mapper.xml 수정 해도 새로고침 하지 않고 바로 적용spring.devtools.restart.enabled=true#자동 캐시 지우기spring.thymeleaf.cache=false#네이버 로그인을 위한 키 작성하기naver.client-id = 클라이언트..

네이버 개발자 센터에 로그인 한 후 client 키와client_secret 키를 모두 얻어와야 한다.  이후 리액트 쪽 먼저 네이버가 제공하는 코드를 가져와 작성 naverLogin.jsvar express = require('express');var app = express();var client_id = 'YMEPgkqT9p7r23tbgj3h'; //네이버 개발자 센터에서 클라이언트id를 가져와서 교체var client_secret = 'VaKtGlGPXp'; //네이버 개발자 센터에서 클라이언트 시크릴을 가져와서 교체var state = "RANDOM_STATE";var redirectURI = encodeURI("http://localhost:9011/api/naverLogin"); //네이버 ..