| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
- 자바
- 독후감
- 알고리즘 공부
- JavaScript
- 경제
- 채권
- C
- 지혜를가진흑곰
- Java
- 백준알고리즘
- 독서
- 책을알려주는남자
- 성분
- 자바스크립트
- 화장품
- 프로그래밍언어
- 서평
- 알고리즘트레이닝
- 책알남
- 주식
- 프로그래머스 알고리즘 공부
- 투자
- 알고리즘공부
- 재테크
- 다독
- 돈
- C++
- algorithmTest
- algorithmStudy
- algorithmtraining
- Today
- Total
탁월함은 어떻게 나오는가?
쿠키(Cookie), 로컬스토리지(LocalStorage), 세션스토리지(SessionStorage)등을 대신할 수 있는 웹용 스토리지(Web Storage)와 서비스 워커(Service Worker)에 대해서 공부해보자 본문
쿠키(Cookie), 로컬스토리지(LocalStorage), 세션스토리지(SessionStorage)등을 대신할 수 있는 웹용 스토리지(Web Storage)와 서비스 워커(Service Worker)에 대해서 공부해보자
Snow-ball 2022. 7. 30. 21:33웹용 스토리지를 찾게 된 개요 :
개발을 하고 있는 도중에 쿠키(Cookie)를 사용할 일이 있는데, 로컬스토리지(LocalStroage)를 사용할까 세션스토리지(Session Storage)를 사용할까 아니면 다른걸 사용해볼까 하고 검색하다가 보니, 중 구글 크롬(Google Chrome) 팀 개발자의 글을 봤고, 좋은 글인것 같아서 나중을 위해서 필요한 내용만 정리해놓기로 했다.
본문 : 웹용 스토리지 https://web.dev/storage-for-the-web/
웹 스토리지(브라우저에 데이터를 저장하는 방법)은 다양하다. 하지만 인터넷 연결은 이동 중에 불안정하거나 끊길 수가 있다. 완벽한 무선 환경에서도 캐싱 및 기타 스토리지 기술을 적절하게 이용하면 사용자 경험을 크게 향상 시킬 수 있다. 정적 애플리케이션 리소스(HTML, JavaScript, CSS, 이미지 등) 및 데이터 (사용자 데이터, 뉴스 기사 등)을 캐싱하는 방법에는 여러 가지가 있다. 그렇다면 가장 좋은 솔루션은 어떤것일까?
무엇을 사용하는게 좋을까?
- 앱 및 파일 기반 콘텐츠를 로드하는 데 필요한 네트워크 리소스의 경우에는 [ Cache Storage API ]
- 다른 데이터의 경우, [ IndexedDB ]
IndexedDB 및 Cache Storage API는 모든 최신 브라우저에서 지원된다. 두가지 모두 비동기식이며 메인 스레드를 차단하지 않는다. 이러한 API는 window 개체, 웹 작업자 및 서비스 작업자에서 액세스할 수 있으므로 코드의 어디에서나 쉽게 사용할 수 있다.
다른 스토리지는 어떤가?
- SessionStorage: 탭에 특정하며 탭의 수명으로 범위가 한정된다. 이는 IndexedDB키와 같은 소량의 세션 특정 정보를 저장하는 데 유용할 수 있다. 하지만 동기식이고 기본 스레드를 차단하므로 주의해서 사용해야 한다. 약 5MB로 제한되며 문자열만 포함할 수 있다. 탭에 특정하기 때문에 웹 작업자나 서비스 작업자는 액세스 할 수 없다.
- LocalStorage: 동기식이며 기본 스레드를 차단하므로 사용을 피해야 한다. 약 5MB로 제한되며 문자열만 포함할 수 있다. LocalStorage는 웹 작업자 또는 서비스 작업자가 액세스할 수 없다.
- Cookie: 역할이 존재하지만 스토리지 목적으로는 사용하지 않아야 한다. 쿠키는 모든 HTTP 요청과 함께 전송되므로 소량의 데이터 이상을 저장하면 모든 웹 요청의 크기가 크게 증가한다. 동기식이며 웹 작업자가 액세스할 수 없다. LocalStorage 및 SessionStorage와 마찬가지로 쿠키는 문자열로만 제한된다.
- File System API 및 File Writer API: 샌드박스 파일 시스템에 파일을 읽고 쓰기 위한 메서드를 제공한다. 비동기식이지만 Chromium 기반 브라우저에서만 사용할 수 있으므로 권장되지 않는다.
- File System Access API: 사용자가 로컬 파일 시스템에서 파일을 쉽게 읽고 편집할 수 있도록 설계되었다. 페이지가 로컬 파일을 읽거나 쓸 수 있으려면 사용자가 권한을 부여해야 하며 권한은 세션 사이에서 유지되지 않았다.
- WebSQL: 사용하지 않아야 한다. 기존의 사용은 IndexedDB로 마이그레이션해야 한다. 거의 모든 주요 브라우저에서 지원이 제거되었다. W3C는 2010년에 Web SQL 사양 유지를 중단했으며 추가 업데이트 계획이 없다.
- Application Cache: 사용하지 않아야 한다. 기존의 사용은 서비스 작업자와 Cache API로 마이그레이션 해야 한다. 더 이상 사용되지 않으며 향후 브라우저에서 지원이 제거된다.
얼마나 많이 저장할 수 있나?
많이 저장할 수 있으며 적어도 수백 MB, 경우에 따라 수 GB 이상까지도 될 수 있다. 브라우저 구현은 다를 수 있지만 사용 가능한 저장 공간의 양은 일반적으로 장치에서 사용 가능한 저장 공간의 양에 따라 결정된다.
과거에는 사이트가 저장 데이터의 특정 한계를 초과하면 브라우저가 사용자에게 더 많은 데이터를 사용할 수 있는 권한을 부여하라는 메시지를 표시했다. 예를 들어, 오리진이 50MB 이상을 사용한 경우 브라우저는 사용자에게 최대 100MB까지 저장할 수 있도록 허용하라는 메시지를 표시하고 그 이후로는 50MB 단위로 다시 요청한다.
오늘날 대부분의 최신 브라우저는 사용자에게 메시지를 표시하지 않으며 사이트에서 지정된 할당량까지 사용할 수 있도록 한다. 750MB에서 메시지를 표시하여 최대 1.1GB까지 저장할 수 있는 권한을 요청하는 Safari의 경우는 예외이다. 오리진이 지정된 할달량보다 더 많이 사용하려고 하면 추가적인 데이터 쓰기 시도가 실패한다.
결론
스토리지가 제한적인 시대는 지났고 사용자들은 더욱 더 많은 데이터를 저장하고 있다. 사이트는 실행에 필요한 모든 리소스와 데이터를 효과적으로 저장할 수 있다. StorageManager API를 사용하면 사용 가능한 스토리지 양과 사용한 양을 확인할 수 있다. 그리고 Persistent 스토리지를 사용하면 사용자가 제거하지 않는 한 데이터가 제거되지 않도록 보호할 수 있다.
서비스 워커(Service Worker)
참고 : 서비스 워커(Servie Worker) 정체가 뭐니? https://b.limminho.com/archives/1384
서비스 워커란 브라우저가 백그라운드에서 실행하는 웹페이지와는 별개로 작동하는 스트립트로, 오프라인 문제가 생겼을 경우 해결을 위해 등장했다.
서비스 워커는 개발자에게 오프라인 환경을 통제할 수 있는 권한을 부여함으로써, 오프라인 환경에서 캐시와의 상호작용, 백그라운드 동기화, 푸시 알림 등의 기능을 가능하게 하였다.
특징
- 사용자가 요청해야 동작하고 할 일을 마칠 때까지 꺼지지 않는다.
- 웹페이지 밖에서 동작하기 때문에 웹브라우저의 열고 닫힘과 무관하게 동작한다.(서비스 워커의 life cycle을 제어할 수 없다)
- 웹페이지 밖에서 동작하기 때문에 DOM요소에 접근할 수 없다.
주의점
- 웹 표준이 아니다.
- https가 적용되어 있어야 한다.
- promise 사용법을 알아야 한다.
추가적으로 알아두면 좋을 참조 :
서비스 워커와 Cach StorageAPI https://web.dev/i18n/ko/service-workers-cache-storage/
