[TYPESCRIPT] 인증 토큰 처리(Authorization 헤더), Refresh 토큰 전략, 공통 에러 핸들링 - 프론트/백엔드 모두에서 흔들리지 않는 기준

실무에서 인증이 한번 꼬이기 시작하면 문제가 연쇄적으로 발생합니다. 401이 뜰 때마다 화면이 튕기고, 토큰이 만료되면 무한 재시도가 걸리고, 어느 페이지에서는 정상인데 다른 페이지에서는 갑자기 로그아웃되는 식이죠.이런 문제는 대체로 “기능 구현”이 아니라 정책(Policy) 설계의 문제입니다.다음 3가지를 하나의 흐름으로 정리합니다.Authorization 헤더로 Access Token 자동 주입Refresh Token으로 Access Token 재발급공통 에러 핸들링(401/403/5xx) 표준화예시는 RTK Query + TypeScript 기준으로 작성합니다. (Axios에도 거의 동일하게 적용됩니다.) 토큰 모델링: Access vs Refresh실무에서 가장 흔한 구조는 다음과 같습니다.Ac..

• format_list_bulleted 개발/Typescript
• · 2026. 1. 4.
• textsms

[TYPESCRIPT] Redux Toolkit Query(RTK Query) + TypeScript - API 상태를 “표준 방식”으로 관리하는 실무 패턴

Redux를 쓰는 프로젝트에서 API 호출과 캐싱, 로딩/에러 상태 관리는 늘 골칫거리입니다. 직접 thunk를 만들고, 로딩 플래그를 관리하고, 캐시 무효화까지 처리하다 보면 코드가 금방 복잡해지고 일관성도 깨지기 쉽습니다.이 문제를 구조적으로 해결하는 도구가 Redux Toolkit Query(RTK Query)입니다. RTK Query는 API 통신을 “Redux의 한 파트”로 보고, 데이터 패칭 + 캐싱 + 무효화 + 로딩/에러 상태를 표준화해 줍니다. RTK Query를 쓰면 뭐가 달라지나?API 호출 로직이 slice/thunk에서 분리되고 표준화캐싱, 자동 refetch, 중복 요청 방지쿼리/뮤테이션 분리로 의도가 명확invalidateTags로 캐시 무효화 일관성 확보TypeScript ..

• format_list_bulleted 개발/Typescript
• · 2026. 1. 3.
• textsms