개발자
안녕하세요. 서버를 구축하고 JWT로 로그인 구현 연습 중인 프론트엔드 개발자 지망생입니다. 로그인을 했을때 서버에서 액세스 토큰과 유저 정보(유저 이름)를 받고 토큰은 웹 로컬스토리지에 저장하고 유저 정보는 리덕스로 상태를 관리하였습니다. 하지만 새로고침을 하면 리덕스의 상태가 없어져서 화면에 표시한 유저정보(유저 이름)가 사라지는 문제가 발생합니다. 이에 저는 2가지 방법을 생각해봤습니다. 1. 로그인을 한 후 토큰 뿐만 아니라 유저 정보(유저이름)도 같이 웹 로컬스토리지에 저장하여 app.js 첫 렌더링 시 유저 정보를 리덕스 상태에 넣기 2. 토큰만 저장하고 새로고침할 때 마다 서버에 요청해서 유저 정보를 가져오기 위 두 방법 중 어떤 방법이 옳은 방법인지 궁금합니다. 아니면 더 좋은 방법이 있는 지 궁금합니다.
답변 3
조금 벗어난 이야기지만 전자와 같이 로컬스토리지로 저장한다면 예외처리에 신경써야 합니다. 다른 PC나 기기로 유저이름을 변경하던가 할 경우 이전 정보가 남아있다면 로컬스토리지 정보를 가져올 때 이전 이름이 표시되던지 할 수 있습니다. 로그인 유지 전략이 어떻게 되는지는 모르겠지만 자동로그인 기능에 연결해서 토큰의 유효성 인증을 할 때 이름 정보를 받아오던지의 방법을 생각해볼 수도 있습니다. 새로고침 시 토큰이 유효한지 어차피 검사가 필요할탠대 (웹 첫 기동시 init절차) 이 때 이름을 같이 받아오던지 하는 방식도 고려할 것 같네요 👍
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 05월 07일
두 방법인 유저 정보를 웹 로컬스토리지에 저장하거나 새로고침할 때 서버에 요청해서 유저 정보를 가져오는 방법 모두 장단점이 있습니다. 1. 유저 정보를 웹 로컬스토리지에 저장하는 경우: 장점: 새로 고침을 할 때마다 서버에 요청하지 않아도 되므로, 불필요한 네트워크 트래픽을 줄일 수 있습니다. 단점: 만약 유저 정보가 변경된 경우, 클라이언트의 로컬 스토리지와 서버의 데이터간에 일관성을 유지하는 것이 어려울 수 있습니다. 2. 새로고침할 때 마다 서버에 요청해서 유저 정보를 가져오는 경우: 장점: 항상 최신의 사용자 정보를 가질 수 있습니다. 단점: 페이지를 새로 고침 하는 각 시기마다 추가적인 HTTP 요청이 필요하여 성능에 영향을 주거나, 서버 부하가 발생할 수 있습니다. 따라서 선택은 여러 상황과 요구 사항(예: 사용자 데이터의 실시간성, 애플리케이션의 성능 등)을 종합적으로 고려하면서 해야 합니다. 또한, 보안도 고려해야 하는데, 웹 로컬 스토리지는 XSS(크로스 사이트 스크립팅)공격에 취약하므로 중요 정보를 저장하는 것은 좋지 않습니다. 따라서 필요한 경우에만 로컬 스토리지를 사용하고, 가능하다면 HttpOnly 쿠키 등을 사용하여 보안을 강화하는 방법을 검토해 볼 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!