본문 바로가기
반응형

FE/browser10

[browser] IndexedDB 브라우저에 내장되어있는 저장소의 대표적인 종류는 localStorage, sessionStorage, cookie 가 있습니다. 하지만 모두 적은 용량의 데이터를 저장할 수 있는데, IndexedDB 는 저장공간이 OS 의 하드디스크 용량의 일정량을 저장할 수 있기 때문에 실제 DB를 사용하는 것 만큼의 양을 저장할 수 있습니다. 정확한 용량은 다음 코드로 총사용량과 총 사용가능 용량을 계산할 수 있습니다. const quota = await navigator.storage.estimate(); const percentageUsed = (quota.usage / quota.quota) * 100; const remaining = (quota.quota - quota.usage) / 1024 / 1024;.. 2023. 10. 7.
[browser] 브라우저의 Storage 브라우저에는 자바스크립트로 조작이 가능한 저장소가 여럿 있습니다. 그중에서도 단연 자주 사용되는 것은 localStorage 와 sessionStorage 인데요. 사실 sessionStorage 는 이후에 서술할 몇가지 이유로 잘 사용되지 않기는 합니다. 앞서 포스팅에서 쿠키와는 다른 용도로 사용됩니다. 쿠키는 http 헤더에 함께 전달하는 용도로써, 키당 최대 4kb 용량과 최대 20개의 제약이 있습니다. 반면에 이 두 storage 는 최소 2MB 이상을 저장할 수 있도록 합니다.(최대값은 브라우저별로 상이합니다) 또한 자바스크립트 내에서만 조작가능하고, 오리진(protocal+domain+port) 별로 구분되어 접근가능한 특징이 있습니다. 두 storage 는 동일한 기능을 가지고있습니다. AP.. 2023. 10. 6.
[browser] Cookie 쿠키라는 것은, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부입니다. 서버에서는 http 헤더에 "Set-Cookie" 프로퍼티를 담으면, 요청을 받은 브라우저에서는 해당 쿠키를 저장합니다. 브라우저에서는 새로운 http 요청시에 저장하고 있는 쿠키를 요청 헤더에 항상 담아서 전달합니다. (단, 같은 도메인에 한정) http 요청에 쿠키를 전달하기 위한 조건 서로다른 도메인간의 자원요청은 보안상의 이유로 기본적으로 제한되어있습니다. 하지만 CORS 설정을 해줌으로써, 이를 가능케하는데요. 쿠키는 단순히 CORS 설정을 넘어서 조금 더 세밀한 설정을 해주어야합니다. 브라우저와 node 예시 코드를 살펴보겠습니다. front : localhost:3000, server:localhost:4000 .. 2023. 10. 6.
[browser] Blob 다루기 이전 포스팅에서 다루었던 ArrayBuffer 와 TypedArray(View) 는 ECMA 의 표준 스펙입니다. 바이너리 데이터를 자바스크립트에서 다루는 표준인 셈이에요. btoa(), atob() 로 base64 인코딩을 하거나, TextEncoder, TextDecoder 로 utf-8 인코딩을 할 수 있음을 알아보았습니다. 하지만 이것만으로는 브라우저에서, 이미지, 동영상 등 파일을 다루기에는 부족함이 많습니다. 예를들어서, 이것으로 비트맵을 표현하는 이미지를 만들어낸다고 하면, 3비트씩 직접 색상을 일일이 찍어내고, 태그 에 호환이 되도록 만들어야되죠. 또 XMLHttpRequest, fetch 등의 네트워크 통신간에 파일을 업로드, 다운로드하기 위한 규격에도 맞추어야 하구요! 브라우저는 한단게.. 2023. 10. 5.
[Browser] Service Worker 로 push notification 구현하기 서론 서비스 워커는 웹 어플리케이션,브라우저 와 네트워크 사이에 위치한 프록시 서버처럼 동작합니다. 만약 네트워크가 불가능한 상황이라면 캐시 데이터를 사용하거나, 프로세스가 열려있지 않을 때 백그라운드 작업을 하는 등 훌륭한 오프라인 경험을 만들어 냅니다. 서비스 워커를 활용한 대표적인 기술은 MSW 나 PWA 가 있습니다. 백그라운드에서 동작한다는 점에서 앱의 전유물이던 푸시알림도, 브라우저에서 구현할 수 있는데, 간단한 예시로 한번 정리해보려합니다. 아키텍처 큰 틀은 아래 그림과 같습니다. 클라이언트는 service worker 를 등록과 동시에 메인 스레드에서 push 이벤트를 구독하고, 그 구독정보를 서버로 전달합니다. 서버는 구독자 정보를 저장하고, 원할때 원하는 클라이언트에게 메세지를 전송할 .. 2023. 9. 21.
[Browser] Web Worker 와 Service Worker 서론 Worker 는 웹사이트의 성능을 향상시키기 위해 등장했습니다. 안드로이드나 IOS 의 경우 일반적으로 앱의 메인 스레드는 유저 이벤트를 언제든지 반응할 수 있도록 놔두고, 다른 쓰레드로 복잡한 작업을 수행합니다. 링크 를 참조하시면 실제로 안드로이드의 경우 메인 스레드를 오랫동안 blocking 하면 앱이 출돌하는 이슈가 있던 것을 확인할 수 있습니다. 이런 이유로 모바일 기기에서는 멀티쓰레딩이 아주 일반적인 패턴으로 자리 잡았죠. 하지만 javascript 의 경우 싱글 스레드로 동작하고, 위와 같은 멀티쓰레딩을 구현하기엔 부족함이 많았습니다. 하지만 worker 의 등장으로 백그라운드의 다른 스레드에서 script 를 실행할 수 있게 되었어요. 워커는 메인스레드를 간섭하지 않고 어떤 메모리도 .. 2023. 9. 20.
반응형