개발자 하민아빠의 Dev & Money

지금까지 우리는 상태 관리(Redux)와 라우팅(React Router)을 통해 클라이언트(화면) 단의 뼈대를 튼튼하게 다졌습니다.특히 지난 9편엔 새로 고침에도 로그인이 유지되도록 하는 reudx-persist를 알아보기도 했습니다. 이제 진짜 데이터를 화면에 뿌려주기 위해 백엔드 서버와 통신(API 호출)을 할 차례입니다.보통 API 통신에는 axios 라이브러리를 많이 사용하시죠?그런데 실무에서는 컴포넌트마다 axios.get()을 하드코딩하며 매번 로그인 토큰(Access Token)을 손으로 집어넣지 않습니다.귀찮기도 하고, 토큰이 만료되었을 때(401 에러) 대처하기가 너무 힘들거든요. 오늘은 모든 API 요청과 응답의 '문지기' 역할을 하는 Axios 인터셉터(Interceptor)를 알아보..

지난 2편을 통해 우리는 JWT의 구조에 대해 배웠습니다.하지만 JWT에는 치명적인 약점이 하나 있었죠."한 번 발급된 토큰은 서버가 강제로 만료시킬 수 없다."이 말은 즉, 해커가 여러분의 토큰을 훔쳐 가면 유효기간이 끝날 때까지 해커가 내 계정의 주인 행세를 할 수 있다는 뜻입니다.그렇다고 유효기간을 5분으로 줄이자니, 사용자가 5분마다 로그인을 해야 하는 최악의 경험을 하게 됩니다.보안(Security)과 사용자 경험(UX), 이 두 마리 토끼를 모두 잡기 위해 등장한 것이 바로 Access Token과 Refresh Token의 이중주입니다.1. 딜레마 해결: 유효기간을 쪼개자핵심 아이디어는 간단합니다."자주 쓰는 건 짧게, 가끔 쓰는 건 길게" 가져가는 것입니다.🎫 Access Token (출..