HashRouter 정적인 페이지에 적합하다 새로 고침 해도 에러가 나지 않는다 gh-pages 배포가 편리하다 BrowserRouter 동적인 페이지에 적합하다 새로 고침 하면 경로를 찾지 못해서 에러가 생길 수 있다 새로 고침 해결에 추가적인 설정이 필요하다

react youtube 라이브러리를 이용하여 player를 들고오고 player의 event.target.getCurrentTime를 이용하여 현재 시간을 뽑아 서버에 넘겨준다 넘겨 준시간을 다른브라우저에서 받고 그 시간대에서 부터 재생

npm i react-youtube 설치 <YouTube videoId="qEVUtrk8_B4" opts={opts} onReady={onReady} onStateChange={onPlayerStateChange} /> YouTube 컴포넌트 사용 onReady = 시작시 이벤트 onStateChange = 시간이나 ...

event.target 을 state에 넣고 마음대로 컨트롤한다.

리액트와 스프링의 소켓 통신을 위한 stompjs 사용 import logo from './logo.svg'; import './App.css'; import React, { useEffect, useState } from 'react'; import * as StompJS from '@stomp/stompjs'; import styled from ...

S3 배포후 서버에서 res.setCookie 했는데 브라우저로 쿠키가 안들어옴 원인 쿠키를 sameSite none 으로 사용하려고 했는데 적용하려고 secure 쿠키를 사용해야되서 https 적용시켜야됨 S3 → cloudFront 로 https 적용 하고 서버로 통신했지만 Ec2 서버가 http 라서 통신이 안됨 도메인 구매후 로드밸런서...

검색의 드롭다운 메뉴로 검색어 자동완성을 사용할때 키보드로 자동완성 단어 컨트롤 방법 ref.current.children[index].click() 드롭다운 메뉴의 방향키로 이동할때마다 index state를 update 해놧다가 엔터칠때 cilck 이벤트 실행시킴

redux 상태 관리 라이브러리를 많이 사용하실 것입니다. 리덕스의 store는 페이지를 새로고침 할 경우 state가 날아가는 것을 보실 수 있습니다. 이것에 대한 대응 방안으로 localStorage 또는 session에 저장하고자 하는 reducer state를 저장하여, 새로고침 하여도 저장공간에 있는 데이터를 redux에 불러오는 형식으로...

jwt 토큰을 이용한 로그인 기능 이렇게 단순히 액세스 토큰 과 리프레시 토큰 을 서버에서 발급받아 쿠키에 저장하고 브라우저가 닫힐때 쿠키가 사라지기 때문에 리프레시 토큰에만 만료시간 을 설정하여 사용자가 이탈하면 액세스 토큰을 지워버리고 다시 사이트에 접속할때 리프레시 토큰 을 확인하여 사용자 정보를 들고와 로그인을 유지시키려고 했다. 문...

npm i -g json-server json 서버 설치 cd data json-server --watch data.json --port 3001 실행방법