본문 바로가기

React2

[React] 리액트 refresh token 구현 (with. axios interceptor) Axios interceptor와 Refresh Token axios 공식문서에 따르면, interceptor는 api 요청에서 then이나 catch로 처리되기 전에 응답을 가로챌 수 있도록 하는 것입니다. 프로덕트에서 로그인 시에만 가능한 행동들의 경우 header에 athorization : token 옵션을 함께 보내야합니다. 이때 토큰이 만료되면 서버에서 토큰 만료로인한 오류응답을 줍니다(저희는 401이 토큰 만료 오류입니다). 토큰 탈취 문제를 피하고자 엑세스토큰의 유효시간은 짧게 설정해두고, 리프레시토큰을 통해 엑세스토큰을 재발급받아야하는데, 서비스를 이용하는 유저입장에서 반복적으로 401에러를 보는 것은 굉장히 불편한 일입니다. 그래서 저희는 401에러가 나오면, 유저가 보지 못하게 중간에.. 2023. 3. 21.
[React] useState로 드롭다운 필터버튼 만들기 위에 사진처럼 필터버튼 드롭다운 형태로 만들어야하는 상황인데요, 먼저 input 태그의 select option과 가장 유사하게 생겼다는 생각이들었지만... 커스텀하는게 더 어렵겠단 생각이 들어서 버튼과 useState를 이용해 구현해보았습니다. 구현 목표 1. 버튼이 눌리면 한개짜리 버튼은 숨기고 확장된 모습을 렌더링한다. 2. 선택한 옵션에 맞게 글씨가 바뀌게 한다. 구현 방법 및 설명 버튼을 만들기 위해선 두개의 상태를 관리 해주어야합니다. 1. 버튼이 확장된 상태인가? isExpanded (boolean) isExpanded가 false일 땐 버튼한개가 보이고, default입니다. 한개 버튼을 누르면 isExpanded가 ture가 됩니다. articleBtnExpandHandler() isEx.. 2023. 3. 4.