Frontend/리액트 개발 꿀팁

refresh token axios interceptor

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

PrivateRoute

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

axios interceptor

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

form-data로 파일과 객체 보내기

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