leebaek

■ 전제조건■ 전체 흐름 요약■ 토큰 재발급 요청 함수■ 토큰 자동 재발급이 포함된 fetch 함수■ 사용 예시 코드 이번 포스팅에서는 AccessToken이 만료되었을 때 RefreshToken을 이용해 자동으로 재발급 받는 방법을 정리해보겠습니다. ■ 전제조건항목내용AccessTokensessionStorage에 저장됨RefreshTokenhttpOnly 쿠키에 저장됨API 요청 방식fetch 사용토큰 갱신 APIPOST /api/refresh ( 예시 )인증 실패응답 코드 401 Unauthorized■ 전체 흐름 요약1. fetch 요청 -> 401 Unauthorized 발생2. api/refresh로 갱신 요청3. 서버에서 AccessToken 재발급4. 클라이언트에서 AccessToken 저..

■ httpOnly 쿠키 사용 이유■ accessToken과 refreshToken■ zustand를 이용한 fetch 기반 로그아웃 처리 안녕하세요. 오늘은 로그아웃 기능에 대해 포스팅해보겠습니다. JWT 기반 로그인 기능은 저번 포스팅에서 다루었으니 참고부탁드립니다! ■ httpOnly 쿠키 사용 이유refreshToken을 서버로 전송할 때 httpOnly 쿠키를 사용할 것 입니다.사용 이유는 아래 포스팅을 참고해주시면 좋을 것 같습니다 :) - AccessToken이 만료되면, 쿠키에 저장된 RefreshToken으로 재발급 요청 가능 https://leebaek.tistory.com/160 [Web] HttpOnly란 ?■ HttpOnly란?■ HttpOnly의 필요성■ HttpOnly의 특징 ..

■ JWT란■ accessToken과 refreshToken■ zustand를 이용한 fetch 기반 로그인 처리■ 로그인폼 구현 안녕하세요. 오늘은 JWT기반 로그인 구현 방법에 대해 정리해보겠습니다.( 로그아웃은 다음 포스팅에서 다룰 예정 ~ )Zustand로 전역상태를 관리하고, sessionStorage에 토큰 저장, 그리고 Spring 백엔드 API와 연동합니다 :) ■ JWT란: 인증된 사용자인지를 증명하는 암호화된 토큰- 서버가 발급하고, 클라이언트는 이를 저장해 요청할 때마다 보내 인증을 유지함■ accessToken과 refreshToken종류설명유효기간Access Token인증된 사용자임을 증명보통 짧게 ( 예: 15분 )Refresh TokenAccess Token 재발급용길게 ( ..

■ 기본 사용법■ 툴바 커스터 마이징■ 기본 사용법https://leebaek.tistory.com/165 [React] react-quill 설치 및 사용법■ reac-quill이란?■ reac-quill 설치 방법■ reac-quill 기본 사용법 현재 진행 중인 프로젝트에서 react-quill을 사용하게 되었습니다!사용자가 생성한 폰트를 화면에서 작성해볼 수 있게끔 하기 위해서leebaek.tistory.com■ 툴바 커스터 마이징□ modules.toolbarReactQuill의 modules.toolbar 설정은 아래처럼 배열로 구성되어있습니다.원하는 버튼 그룹과 옵션을 정의할 수 있습니다.const modules = { toolbar: [ [{ font: [] }], ..