- Today
- Total
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- javascript
- typeorm
- websocket
- nestjs
- Flutter
- error
- 채팅
- 비전공자
- 코인차트
- 차트
- graphql
- chart
- rtk
- 에러
- 항해99
- Coin
- 차트구현
- 3주차
- 주식
- 차트만들기
- Firebase
- apollo
- Redux
- 코인
- API
- nextjs
- react
- 주식차트
- typescript
- 리액트
Archives
Act99 기술블로그
항해99 3주차 / 웹 저장소 (feat. 토큰) 본문
본 내용은 기록용입니다....!
Http는 1번 요청을 하고 응답을 받으면 연결이 해제됩니다!
즉, 우리가 access_token을 클라이언트 어딘가에 저장을 해두어야한단 이야기예요!
그럼 이 토큰을 어디에 저장하면 좋을 지, 클라이언트에서 쓸 수 있는 저장소를 알아봅시다. 😉
1. 쿠키
클라이언트 로컬에 저장되는 key:value 형태의 저장소입니다!
약 4KB 정도 저장할 수 있어요.
쿠키 만들기
- 이 때 꼭, 어떤 사이트로 들어가신 후에 여셔야 쿠키를 사용할 수 있습니다.
- 브라우저에서 개발자 도구를 열고 해봅시다!
// key는 MY_COOKIE, value는 here,
document.cookie = "MY_COOKIE=here;";
쿠키 가져오기
console.log(document.cookie);
쿠키 삭제
- 쿠키를 삭제할 때는 만료일을 이전으로 돌려서 지우는 방법을 많이 씁니다.
document.cookie = "MY_COOKIE=here; expires=new Date('2020-12-12').toUTCString()";
2. 세션 스토리지
HTML5에서 추가된 저장소입니다! 쿠키와 마찬가지로 key:value 형태의 저장소예요.
세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거돼요!
- → 자동 로그인이나, 장바구니같은 다음에 브라우저를 열었을 때도 유지해야하는 데이터는 넣기 어렵겠죠!
- 추가하기
// key는 MY_SESSION, value는 here인 세션을 만들어요.
sessionStorage.setItem("MY_SESSION", "here");
- 가져오기
// key값으로 쉽게 가져올 수 있어요 :)
sessionStorage.getItem("MY_SESSION");
- 삭제하기
// 하나만 삭제하고 싶다면, 이렇게 키를 통해 삭제합니다.
sessionStorage.removeItem("MY_SESSION");
// 몽땅 지우고 싶을 땐 clear()를 쓰면 됩니다. :)
sessionStorage.clear();
3. 로컬 스토리지
HTML5에서 추가된 저장소입니다! 쿠키와 마찬가지로 key:value 형태의 저장소예요.
로컬 스토리지는 따로 지워주지 않으면 계속 브라우저에 남아 있어요.
- → 유저의 아이디, 비밀번호같은 중요한 정보를 넣어두면 아주 위험해요!
- 추가하기
// key는 MY_LOCAL, value는 here인 데이터를 저장해요.
localStorage.setItem("MY_LOCAL", "here");
- 가져오기
// key값으로 쉽게 가져올 수 있어요 :)
localStorage.getItem("MY_LOCAL");
- 삭제하기
// 하나만 삭제하고 싶다면, 이렇게 키를 통해 삭제합니다.
localStorage.removeItem("MY_LOCAL");
// 몽땅 지우고 싶을 땐 clear()를 쓰면 됩니다. :)
localStorage.clear();
** 토큰은 어디에 저장해야할까? **
정답은 프로젝트 성향에 맞춰 저장 장소는 그때그때 달라져야한다.
예전에는 토큰을 저장할만한 곳이 쿠키 밖에 없었지만 HTML5 가 나온 후로 LocalStorage 에도 토큰을 저장하는 일이 많아졌다. 왜냐하면 쿠키는 4kb 밖에 안되지만 로컬스토리지는 5MB 까지 저장이 가능하기 때문이다. 또한, 쿠키처럼 모든 http 통신에 딸려들어가지 않는다.
하지만! 로컬스토리지는 말 그대로 로컬에 데이터가 다 남아있기 때문에 보안에 취약해진다.
따라서 프로젝트 성향에 맞추어 저장 장소는 달라져야 한다.
'개발팁저장소' 카테고리의 다른 글
[TDZ(Temporal Dead Zone) 일시적 사각지대란?] (0) | 2022.02.09 |
---|---|
[항해99 4주차 WIL] ORM & NoSQL vs SQL (0) | 2022.02.04 |
항해99 3주차 / 토큰 기반 인증 (0) | 2022.02.01 |
항해99 3주차 / Callback & Promise (0) | 2022.02.01 |
항해99 3주차 리액트 입문 전 알아야 할 기본 개념 (0) | 2022.01.25 |