axios 썸네일형 리스트형 React 앱에서 사용자 세션 타이머 및 자동 로그아웃 구현하기 사용자 세션이 만료되었는데 계속 접근이 가능한 상태는 보안 리스크로 이어집니다. 반대로 너무 공격적인 타임아웃은 사용자 경험을 해칩니다. 이 글에서는 React 앱에서 사용자 활동 기반 세션 타이머와 자동 로그아웃을 실무적으로 구현하는 방법을 설명합니다.1. 목표와 설계 전략목표는 두 가지입니다. 첫째, 사용자가 일정 시간 동안 아무 활동이 없으면 자동 로그아웃합니다. 둘째, 토큰의 만료 시간을 기준으로 절대 만료를 강제합니다. 이를 위해 로컬 상태와 localStorage로 탭 간 동기화, 사용자 활동 이벤트, setTimeout 기반 타이머, JWT exp 파싱, 토큰 갱신 훅과 Axios 인터셉터를 결합합니다.2. 핵심 개념 요약활동 기반 타임아웃은 사용자의 키보드, 마우스, 터치, 스크롤 등의 이.. 더보기 React 앱에서 파일 다운로드 및 저장 처리하기 파일 다운로드/저장은 대시보드, 리포트, 이미지/PDF 내보내기 등에서 자주 요구되는 기능입니다. 본 글에서는 React 환경에서 작은 파일부터 대용량까지 안정적으로 다운로드하고, 로컬 저장까지 처리하는 실무 패턴을 정리합니다.1. 최소 구현: Blob → a.click() → URL.revokeObjectURL가장 단순하고 호환성 좋은 방법은 Blob을 만들어 임시 URL을 만들고, 보이지 않는 앵커 태그로 클릭 이벤트를 트리거하는 방식입니다. 클릭 후 반드시 URL.revokeObjectURL로 메모리를 회수합니다.// utils/download.jsexport function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob).. 더보기 이전 1 다음