개발자

Localstorage에는 어떤데이터를 저장해야 좋을까요

2024년 01월 12일•조회 312

Locacl Storage에 유저 정보와 post를 저장해도 될까요 Local storage는 보안상 취약한 부분이 있다고 해서 조금 불안해서 질문드립니다

nextjs

react

web

frontend

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

익명님의 질문

답변 2

로컬 스토리지는 주로 언제 사라져도 상관없는 데이터를 저장하긴 합니다. 개인적인 생각으론 로컬 스토리지에 개인 정보를 저장하는 것은 좋지 않을 거라 생각되네요!

말씀하신대로 보안상의 이슈로 인해 로컬 스토리지에 유저 정보를 그대로 담는것은 좋지 않을 것 같습니다 ! 개인 혹은 팀 프로젝트를 진행하고 계신거라면 로그인시 받게되는 액세스 토큰같은 것을 담는 용도로 많이 사용하게 될 것 같아요 ! 또, 다크모드와 같은 state를 로컬 스토리지에 담아두고 사용자가 페이지에 재접속했을 때 기존 테마가 유지되도록 한다던가 하는 용도로 사용해볼 수 있을 것 같습니다. 질문자님께서 로컬 스토리지에 user, post 데이터를 담으시려는게 전역적으로 관리해서 다른 페이지에서도 이를 사용하고 싶으신 것이라면, react-query의 캐싱 기능을 이용하시거나 recoil, zustand 같은 상태관리 툴을 이용해보시는게 좋을 것 같습니다 :)

익명

작성자

2024년 01월 13일

리엑트 쿼리를 이용하는 이유가 리엑트 쿼리가 서버에 요청을 보낼때 지금데이터가 변경사항이 있는지 없는지 확인해주는 이점 때매 쓰는건가요?

정 훈

FE • 2024년 01월 13일

리액트 쿼리는 주로 서버 스테이트 ( 서버 측에서 받아온 데이터 ) 를 관리하는데 사용합니다. 이런 툴이 제공하는 강력한 기능 중 하나가 '캐싱' 입니다. 리액트 쿼리를 기본적으로 GET 요청을 통해 받아온 데이터를 자동으로 캐싱하는 기능을 제공하고 있습니다. 이를 통해서 캐싱된 데이터를 다른 페이지에서도 사용할 수 있는데요, 예를 들어, 유저 정보의 경우 처음 사용자가 로그인 했을 때 userQuery ( 데이터를 보관하는 곳을 Query라고 칭하겠습니다. ) 에 캐싱하여 보관하고, 이를 마이페이지와 같은 필요한 곳에서 가져다 사용할 수 있습니다. 캐싱 데이터를 사용한다는 것의 장점은 같은 데이터에 대해 동일한 요청을 보내지 않아서 불필요한 리소스 낭비를 방지할 수 있다는 것입니다. 일반적으로 유저 정보의 경우는 사용자가 정보를 수정하지 않는 한 변동될 일이 거의 없습니다. 이런 데이터의 경우는 매번 요청을 보내 가져오는 것 보단 캐싱된 데이터를 가져와서 사용하는게 좋겠네요 !

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

이미 회원이신가요?

AI 답변

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 01월 12일

LocalStorage는 클라이언트 사이드에서 가볍게 데이터를 저장하고 관리하는 방법 중 하나로, 사용자의 웹 브라우저에 정보를 저장할 수 있습니다. 그러나 LocalStorage는 다음과 같은 특성 때문에 주의해서 사용해야 합니다. 1. 암호화되지 않음: LocalStorage에 저장된 데이터는 유저가 직접 브라우저 도구를 통해 확인하거나 수정할 수 있습니다. 2. XSS 공격 취약: 스크립트 인젝션 공격을 받을 경우, 공격자가 LocalStorage에 접근하여 데이터를 탈취하거나 변조할 위험이 있습니다. 따라서, 비밀번호, 개인 식별 가능한 정보(PII), 기타 민감한 정보와 같은 보안이 필요한 데이터를 LocalStorage에 저장하는 것은 좋지 않습니다. 반면 세션 관리나 UI 상태 유지 등 임시적인 데이터 혹은 비평가적인 정보를 저장하는데 적합합니다. 유저 정보와 post 등의 데이터를 LocalStorage에 저장하려면 다음과 같은 점들을 고려해보세요: - 이 정보가 얼마나 중요한가? 만약 민감한 정보라면 서버에서 관리하는 것이 좋다. - 이 정보가 클라이언트에서만 사용되는가, 아니면 서버에도 필요한가? 서버에서 필요한 데이터라면 서버에 저장하는 것이 좋다. - 이 정보의 변조 가능성은 어떠한가? LocalStorage 데이터는 쉽게 조작될 수 있다. 대체적으로 사용자 인증 토큰 등과 같이 보안을 위해 암호화 되어야 하는 정보나, 서버와 동기화를 유지해야 하는 중요한 데이터는 LocalStorage보다는 쿠키나 서버 기반 저장소를 사용하는 것이 더 좋습니다.

목록으로