게시판을 만드려고 하다보면 피할 수 없는 기능 중 하나인 로그인 기능.
localstorage를 사용해서 login을 구현해보려고 한다.
먼저 localstorage란?
브라우저 상에서 데이터를 저장해서 사용하는 것
현재 애플리케이션 전역에 접근 가능
브라우저 상에서 데이터를 저장해서 사용하는 LocalStorage 와 SessionStorage 의 기능적 차이는 뭔데 ?
Session Storage는 브라우저를 종료하면 저장된 데이터가 사라지는 휘발성 저장공간
Local Storage는 브라우저 청소를 하지 않는 이상 사라지지 않는 저장공간
두개 다 각각 5MB 정도의 text를 저장할 수 있다고 하니 사용할 때 참고해서 적절히 섞어 사용하면 좋을 것 같다.
🖥 How to Use?
setItem(key,value)의 형태로 데이터를 store에 저장 하고, getItem(key)를 사용하여 저장된 데이터를 store에서 가져오는 형태 로 사용하면 된다.
localStorage.setItem('key',value);
localStorage.getItem('key');
그리고 저장된 키를 일부 삭제하거나 초기화를 하고 싶다면 ~
localStorage.removeItem('key');
localStorage.clear();🛠 localStorage를 이용해 login 기능을 만들어보자
참고!
구현할 기능의 상세 요구 사항
- 회원 정보 불러올 필요 없음 (회원제도 아님)
- 제공되는 코드로 입장하는 방법: 코드 입력 후 해당 코드가 저장된 enterance code와 같다면 입장 가능 !
내가 아래에서 구현할 기능은 위와 동일하니
회원제도로 움직일 경우 Back 단에서 회원 정보 불러오는 기능만 추가하면 될 것 같다.
위의 나는 진짜 원숭이였나보다..
위의 개념 설명만 참고하도록 하고
localstorage 는 어디에 쓸거냐면
login 여부 파악 후 -> login 여부만 저장해서
-> 로그인/비로그인의 ui를 다르게 보여주는 경우 사용하도록 바꾸었다.
개인 정보를 localstorage 로 저장하면
보안상 여러 문제가 많이 생기기 때문에
recoil 을 사용해보도록 하는 것을 추천한다.
(필자도 결국 recoil로 도입했다.)
변경안
- 로그인 인증 해달라고 서버에 전송
- 서버에서 ok 받으면 관련 정보(회원 정보) recoil 에 저장해서 계속 사용(게시글 작성/댓글 작성)
- localstorage 로는 로그인 여부 확인해서 로그인/비로그인 시에 ui 차이 두고 싶을 때 사용했다(로그아웃 버튼 유무 같은...)
