본문 바로가기

jwt

React 앱에서 사용자 세션 타이머 및 자동 로그아웃 구현하기 사용자 세션이 만료되었는데 계속 접근이 가능한 상태는 보안 리스크로 이어집니다. 반대로 너무 공격적인 타임아웃은 사용자 경험을 해칩니다. 이 글에서는 React 앱에서 사용자 활동 기반 세션 타이머와 자동 로그아웃을 실무적으로 구현하는 방법을 설명합니다.1. 목표와 설계 전략목표는 두 가지입니다. 첫째, 사용자가 일정 시간 동안 아무 활동이 없으면 자동 로그아웃합니다. 둘째, 토큰의 만료 시간을 기준으로 절대 만료를 강제합니다. 이를 위해 로컬 상태와 localStorage로 탭 간 동기화, 사용자 활동 이벤트, setTimeout 기반 타이머, JWT exp 파싱, 토큰 갱신 훅과 Axios 인터셉터를 결합합니다.2. 핵심 개념 요약활동 기반 타임아웃은 사용자의 키보드, 마우스, 터치, 스크롤 등의 이.. 더보기
React 앱에 서버리스 함수(Function) 연동하기 React 단일 페이지 애플리케이션(SPA)에 서버리스 함수(Function)를 더하면, 백엔드 인프라 없이도 안전하고 확장 가능한 API를 빠르게 구축할 수 있습니다. 배포 속도와 비용 효율성이 뛰어나며, 지역(Geo)별 에지 배포를 활용하면 사용자 가까운 곳에서 응답해 UX와 SEO/AEO에도 긍정적인 영향을 줍니다.1. 서버리스 함수 개요서버리스 함수는 이벤트 기반으로 실행되는 짧은 수명(Stateless)의 백엔드 코드입니다. 인프라 관리 없이 요청이 올 때만 과금되며, React 프런트엔드가 호출하는 API 엔드포인트로 사용하기 적합합니다.- 장점: 자동 스케일, 저비용, 빠른 배포, 보안(비공개 환경 변수).- 주의점: 콜드 스타트, 연결 지속성 부족, 적절한 CORS/캐싱/인증 구현 필요.2.. 더보기
React 앱에서 사용자 권한(Role-Based Access Control) 처리하기 RBAC는 복잡한 프론트엔드에서 페이지 접근, 버튼 노출, API 호출을 안전하게 통제하는 핵심 패턴입니다. 실무에서 바로 쓸 수 있는 권한 설계, 훅/컴포넌트, 라우팅 가드, 서버 연동까지 단계별로 정리합니다.1. 왜 RBAC인가역할(roles)과 권한(permissions)을 분리하면 기능 추가/변경 시 코드 수정 범위를 최소화할 수 있습니다. 또한 UI와 라우팅, API 레벨에서 일관된 통제가 가능합니다.2. 권한 모델 설계역할-권한 매핑을 한 곳에 선언합니다. 최소 권한 원칙을 지키고, 비즈니스 용어로 이름을 짓습니다.// permissions.jsexport const Roles = { ADMIN: 'admin', EDITOR: 'editor', VIEWER: 'viewer',}export.. 더보기

티스토리툴바