COOKIE
쿠키?
쿠키는 클라이언트에 대한 정보를 이용자의 PC의 하드디스크에 보관하기 위해서 웹 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보이다.
쉽게 생각하면 통행증 정도로 생각하면 편하다. 로그인 기능을 구현할 때 요즘은 대부분 토큰을 사용한다. 이 토큰은 로그인 시 고유하게 가지고 있는 unique한 값을 가지게 된다. 여기서 토큰을 사람에 대한 신분증 이라고 하자. 옛날에는 다른 도시를 지나가려면 통행증이 필수적으로 필요하다(아니여도 그렇다고 치자) 그러면 이 통행증을 가지고 있으면 그 도시는 언제든지 마음대로 왕복할 수 있다. 통행증을 발급받으려면 신분증이 필요한 것이다.
웹에서는 로그인을 하기위해서는 항상 토큰을 발급받는 API를 사용해야 할 것이다. 근데 서비스를 이용하다 보면 토큰을 반드시 매개변수로 보내야하는 경우가 있다. 이런 경우 토큰을 매번 생성한다면 api하나 호출하기 위해서 토큰을 얻는 api를 또 호출하는 쓸데없는 일이 반복된다. 그래서 쿠키라는 통행증을 얻는 것이다.
로그인이 성공할 경우 토큰에 해당하는 쿠키를 서버와 클라이언트에 생성하고 클라이언트는 토큰이 아닌 쿠키를 통해 서버에 요청을 하는 것이다. 즉 매번 토큰을 받는 api를 호출할 필요가 없어지는 것이다.
Angular2에서 cookie사용하기
npm install angular2-cookie --save로 설치후 사용하면된다.
사용법은 공식 api참조하면 금방사용할 수 있다.
WEBSTORAGE ?
웹스토리지는 HTML5에서 쿠키의 단점을 보완해서 만든 기술이다. 기본적으로 웹스토리지는 key와 value 형태로 이루어져있다. 쿠키와 마찬가지로 클라이언트에 대한 정보를 저장한다.
웹스토리지와 쿠키의 역할 자체에는 크게 차이가 없다고 생각한다. 하지만 최근에는 웹스토리지가 쿠키보다 효율적이지 않나?라는 의견들이 많다고 한다. 저장용량에서도 쿠키는 4Kb밖에 안되지만 로컬스토리지는 약 5Mb(브라우져마다 차이가 있다고 함)정도 까지 가능하고 서버로 전송을 안하기 때문에 그런 생각들이 많은 것 같다.
웹스토리지에서 쿠키의 가장 큰 차이점은 서버에 클라이언트에 대한 데이터를 저장하지 않는 것이다. 웹스토리지는 자기 로컬영역에만 저장을 해두고 해당하는 key값에 해당하는 value값들을 비교 및 유지하는 형식이지만 쿠키는 서버와 자신의 로컬 영역에 저장을 해두고 비교를 할때마다 일종의 쿠키용 api를 만들어 호출하는 방식인 것 같다.
LocalStorage
로컬스토리지는 웹스토리지의 두 가지 종류 중 하나이다. 클라이언트에 대한 정보를 영구적(강제로 지우지 않는 이상)으로 보관하는 것이 세션스토리지와 큰 차이점 이고 그외에는 모두 동일하다고 한다.
Angular2에서 LocalStorage사용하기
npm install angular-2-local-storage --save로 설치후 사용하면된다.
사용법은 공식 api참조
SessionStorage
세션스토리지역시 웹스토리지의 종류 두 가지 중 하나이다. 세션스토리지는 로컬스토리지와 다르게 세션이 종료되면(즉 웹브라우저를 닫을 경우) 클라이언트에 대한 정보를 삭제하는 것 이다. 보안이 많이 필요한 녀석일 수록 세션스토리지를 쓰는게 좋을 것으로 생각된다.
Angular2에서 LocalStorage사용하기
npm install ng2-webstorage --save로 설치후 사용하면된다.
사용법은 공식 api참조
Cookie vs LocalStorage vs SessionStorage
stackoverflow에 최근 자료까지 많은 걸 보면 생각보다 아직까지 꽤나 이슈인 문제라고 생각이든다. 결론부터 말하자면 케바케(case by case)인 것 같다. 각각 서로 장단점이 명확하게 있다.
- cookie 장점 : 어지간한 브라우져에는 지원이 다됨
- cookie 단점 : api가 한번 더 호출되므로 서버에 부담증가/ 쿠키자체의 용량이 적음
- LocalStorage 장점 : 서버에 불필요하게 데이터 저장안함/ 용량이 큼
- LocalStorage 단점 : HTML4만 지원되는 브라우져라면 지원이 안됨...
- SessionStorage의 장단점은 LocalStorage와 동일하다 LocalStorage와 단지 기능차이일뿐이다.
물론 이건 전적으로 굉장히 초보적인 수준으로 바라봤을 때라고 생각한다. 조금 더 파보니까 보안관련된 문제도 꽤 나왔던 것 같다. 각 방법마다 취약한 해킹 방법이 있다고... 근데 뭐 아직 그 정도까지 생각할 단계는 아니니까 ㅎ
보안은 차차 더 알아가보도록 하자(기간은 무제한ㅋ)