rexondex's blog

웹 스토리지: 로컬 스토리지, 세션 스토리지, 쿠키의 차이점

웹 스토리지: 로컬 스토리지, 세션 스토리지, 쿠키의 차이점웹 애플리케이션에서 클라이언트 측에 데이터를 저장하는 주요 메커니즘은 로컬 스토리지(localStorage), 세션 스토리지(sessionStorage), 그리고 쿠키(Cookies)입니다. 이들은 각각 다른 특징과 용도를 가지며, 데이터의 지속성, 접근 방식, 보안 측면에서 중요한 차이를 보입니다.1. 로컬 스토리지 (localStorage)특징지속성: 영구적입니다. 사용자가 명시적으로 데이터를 삭제하지 않는 한, 브라우저를 닫았다가 다시 열어도 데이터가 유지됩니다.범위: 동일한 출처(origin - 프로토콜, 호스트, 포트)를 가진 모든 창과 탭에서 접근 가능합니다.접근: 클라이언트 측 JavaScript 코드를 통해 동기적으로 접근합니다.서..

React에서 JWT를 이용한 사용자 인증 시스템 구현 및 로그아웃

JWT 기반 사용자 인증 시스템 구현 (React)React 애플리케이션에서 JWT를 사용하여 사용자 인증 시스템을 구축하는 일반적인 흐름은 다음과 같습니다.1. 로그인 (Login):사용자가 아이디와 비밀번호를 입력하여 로그인 요청을 서버로 보냅니다.서버는 사용자의 인증 정보를 확인하고 유효한 경우 JWT를 생성하여 클라이언트 (React 애플리케이션)에게 응답합니다. 이 JWT에는 일반적으로 사용자 정보 (예: 사용자 ID, 이름)와 만료 시간 등이 포함됩니다.React 애플리케이션은 이 JWT를 안전한 저장소 (예: localStorage, sessionStorage, HttpOnly 쿠키)에 저장합니다. HttpOnly 쿠키는 XSS 공격에 더 안전하지만, JavaScript에서 직접 접근할 수 ..

세션 기반 인증 vs 토큰 기반 인증세션 기반 인증과 토큰 기반 인증은 웹 애플리케이션에서 사용자를 식별하고 권한을 관리하는 두 가지 주요 방식입니다. 작동 방식과 특징에 뚜렷한 차이가 있으며, 특정 상황에 더 적합한 방식이 있습니다.1. 작동 방식세션 기반 인증 (Session-based Authentication):사용자 인증 성공 시, 서버는 사용자 정보를 저장하는 세션(Session)을 생성하고 고유한 세션 ID를 발급합니다.세션 ID는 쿠키(Cookie)를 통해 클라이언트에게 전달됩니다.이후 요청 시 클라이언트는 쿠키를 통해 세션 ID를 서버에 전송하여 인증 상태를 유지합니다.로그아웃 시 서버는 해당 세션을 파기합니다.토큰 기반 인증 (Token-based Authentication):사용자 인..