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? 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..

Why? 게시판에 글을 등록할 때, 사진이랑 제목, 글의 내용과 여러 데이터를 form-data에 보내야 할 경우가 있을 것이다! form-data에 위처럼 키를 여러개 만들어서 모두 넣을 수 있지만 아래처럼 파일 객체 따로 나머지 데이터 전체를 객체에 보내서 서버에서 파싱하게 쓰게 하려면 아래처럼 나머지 데이터를 stringfy해서 보낼 수도 있다! 아래처럼 객체를 JSON.stringify해서 나머지 데이터를 보내자! const handleSubmit = async () => { const formData = new FormData(); formData.append("files", image.image_file); formData.append( "board", JSON.stringify({ title..