TIL(16) 21-10-07 : why?를 하자

Facts

✅ JS 코드 분할 관련 자료 찾기

✅ 오늘 회의록 기록, 튜터님 피드백 기록

✅ 쿠키, 세션, 토큰, JWT 개념 이해

✅ Git Desktop 작업 흐름 이해

 

Findings

🤔 토큰을 어디에 저장할까?

Authorization이란

Authorization(인가): 사용자가 로그인하면, 해당 사용자가 맞는지 확인하는 절차를 말한다.

 

Authentication 위해, 토큰을 변수에 저장하지 않고, Cookie나 Storage에 저장하는 이유

• 페이지가 여러 개면 변수를 share 하지 않는다.
  그러므로 변수에 token을 저장하면, Authentication을 못한다.
  Ex. 첫번째 페이지는 토큰을 알고 있어도, 다른 페이지로 가서 API 호출할 때, 해당 토큰을 알 수 없다.
• ⇒ token을 share 하기위해, Cookie나 Local Storage나 Session Storage에 넣는 것이다.

 

Cookie와 Storage의 차이

🤔  요즘 트렌드는 Token을 Cookie에 넣지 않고 Local Storage에 넣는다. 왜 그럴까?

• cookie

token_receive = request.cookie.get('mytoken')

⇒ Cookie에 토큰을 저장하면, 제약이 걸린다.
왜냐하면, 쿠키는 단일 도메인 및 서브 도메인에서만 작동하도록 설계되어 있다.
즉, Cookie에 토큰을 저장하려면, 프론트엔드와 백엔드의 도메인이 같아야 하거나, 여러 도메인의 경우 관리를 해줘야 한다.

 

프론트엔드와 백엔드를 분리하는 것이 요즘 트렌드인데, cookie에 token을 넣는 것은 트렌드와 맞지 않는다.

 

• Local Storage / Session Storage

xhr.setRequestHeader('Authorization', localStorage.getItem('token'));

⇒ 💡 그러므로, 토큰을 저장할 때, Local Storage나 Session Storage를 사용해야 한다.

그리고, Storage의 데이터가 서버로 자동 전송이 되지 않기에, 저장된 토큰을 HTTP Header에 담아 서버에 보내주어야 한다.

 

Local Storage VS Session Storage

🤔  그렇다면, Local Storage와 Session Storage의 차이점은 무엇일까?

• Local Storage
  • Local Storage는 window.localStorage에 위치한다.
  • 값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만, 모두 문자열로 변환된다.
  • 키 밸류 저장소이기 때문에 키와 밸류를 순서대로 저장하면 된다.
  • 사용자의 세션 데이터를 유지할 수 있다.
  • 브라우저를 닫았다가 다시 열었을 때도 지속된다.
  • 탭을 여러개 열어도 공유된다.
  • 명시적으로 삭제될 때까지 지속된다.

//Set the value in a local storage object
localStorage.setItem('name', 'Jyoi-Kim');
//Get the value in a local storage object
localStorage.getItem('name');
//Delete the value from local storage object
localStorage.removeItem('name') //Delete specifice from local storage
localStorage.clear(); //Delete all from local storage

         ⇒ 사용자가 브라우저 창을 닫았을 때,

              데이터는 삭제되지 않으며, 만료 날짜 없이 사용자 정보 데이터를 저장한다.

• Session Storage
  • Session Storage는 window.sessionStorage에 위치한다.
  • 단지 Local Storage와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐이다.
  • clear, getItem, setItem, removeItem, key 등 모든 메소드가 같다.
  • 브라우저 세션 기간 동안만 사용할 수 있으며, 탭이나 창을 닫을 때 삭제된다.
  • 새로고침을 해도 유지된다.
  • 변경된 사항은 현재 페이지에서 닫힐 때까지 저장되어 사용할 수 있다.
  • 탭이 닫히면 저장된 데이터가 삭제된다.

//Set the value in a session storage object 
sessionStorage.setItem('name', 'Jyoi-Kim'); 
//Get the value in a session storage object 
sessionStorage.getItem('name'); 
//Delete the value from session storage object
sessionStorage.removeItem('name') 
//Delete all from session storage
sessionStorage.clear();

 

👉🏻  둘의 가장 큰 차이점은 만료기한의 유무다.
      Local Storage = 만료기한 없음, Session Storage = 세션 종료 시 만료

 

👉🏻  Local Storage의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다.

      하지만 Session Storage의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.

 

👉🏻  지속적으로 필요한 데이터(EX. 자동 로그인 등)는 Local Storage에 저장하고,

      잠깐 동안 필요한 정보(EX. 일회성 로그인 정보)는 Session Storage에 저장

      하지만 비밀번호 같은 중요한 정보는 절대 저장하지 않기!
      클라이언트에 저장하는 것이기 때문에 언제든지 털릴 수 있다.

 

👉🏻  둘의 공통점은 Storage의 데이터가 서버로 자동 전송이 되지 않는 것이다.

       ⇒ 저장된 토큰을 HTTP Header에 담아 서버에 보내주어야 한다.

 

참고 자료

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

 

 

학습 방향

이 기술을 Why 사용하는지 생각하며, 개념을 나만의 언어로 정리해서 이해해보자