Why?refresh token과 access token을 사용할 때, 인증이 필요한 api 요청 시 access token이 만료되면 refresh token을 이용해서 access token을 받아온 후 요청하려고 했던 api를 다시 요청하는 axios interceptor를 구현해보자.만약, refresh token이 만료되면 로그인 페이지로 이동시키자! intercetor 구현서버에서는 refresh token과 access token을 header로 각각 X-REFRESH-TOKEN과 X-ACCESS-TOKEN으로 준다고 가정.refresh token과 access token 둘 다 백엔드의 보안 미들웨어를 통과하는데 필요하다 가정클라이언트는 refresh token을 local storage에..

Why? 기존의 video 엘리먼트의 디자인이 진행중이던 프로젝트와 어울리지 않아서 디자이너의 요청으로 아래처럼 재생 버튼이 가운데 있고 hover할 때 서서히 등장하고 volume 버튼도 오른쪽 위에 있고 hover할 때 서서히 등장하게 만들었다. react의 useState와 useRef를 이용하면 쉽게 만들 수 있다! video 엘리먼트의 autoplay 속성과 mute 속성의 초기값을 각각 false와 true로 정했기 때문에 그에 따른 state인 isPlaying과 isMuted를 각각 false/true로 만들고 이 상태값을 기준으로 버튼을 다르게 보이도록 구성했다! ref를 이용해서 play()와 pause() 함수로 비디오를 재생/정지 시켰고 muted 값을 true/false로 만들어서..

Why? UX적 관점에서 생각할 때, 아래처럼 로그인하지 않은 사용자가 인증이 필요한 페이지에 접속하려고 할때 로그인 화면으로 넘어가서 로그인을 마친 후 다시 원래 가고자했던 페이지로 돌아오는 것은 사용자의 편의를 위해서도 매우 중요하다! 만약 인증된 사용자만 사용할 수 있는 페이지를 사용하려고 할 때, 로그인을 하지 않은 상태이거나 jwt-token이 유효하지 않으면 로그인 화면으로 가서 로그인에 성공하면 다시 원래 화면으로 돌아올 수 있게 리다이렉트하게 할 수 있게 Navigate 컴포넌트(react-router-v6)의 url에 쿼리 파라미터로 기존에 사용하고자하는 페이지의 url을 넘겨주자. 만약 로그인이 된 상태라면 기존에 이용하고자 하는 페이지의 컴포넌트를 리턴해서 렌더링한다. 즉, Priva..

Why? 인증이 필요한 서버로 데이터를 보내거나 조작하는 API를 호출할 때 보안을 위해 interceptor로 요청을 가로챈 후 HTTP Authorizaition 요청 헤더에 jwt-token을 보내서 서버 측 해당 API에 요청을 하기 전에 서버 측의 미들웨어에서 이를 확인한 후 검증이 완료되면 API에 요청을 하게 한다 클라이언트가 jwt-token을 저장하는 위치는 매우 많겠지만 아래 예시에서는 localStorage에 있다고 가정하자!! axios interceptor import axios from 'axios'; import store from "../redux/configStore"; import {jwtUtils} from "./JwtUtils"; const instance = axio..