본문 바로가기
반응형

FE28

[개발환경] 패키지 매니저별 모노레포 특징 요약(npm, yarn, yarn-berry) 여러가지 방면에서 npm 보다는 yarn, yarn-berry 가 성능면에서 우수하기 때문에 선호하고 사용해왔습니다. npm 도 버전을 거듭하며 발전해오고 있지만, 그 사이 yarn 의 이점 때문에 yarn 에 익숙해져 굳이 npm 을 사용하지 않고, 쭉 사용하게 되는거같아요. 그러던 중에 npm 으로 모노레포 구성하는 것이 yarn 과 거의 유사해 실습해보고, yarn 과 비교해서 차이점을 분석해보고자 글을 정리합니다. npm workspaces 를 정의하는 순간, 모든 패키지들이 link 되어, 패키지들 간에는 어떤 의존성 설정 없이도 바로 참조가 가능해집니다. ❗️ npm 과 yarn 1.x 은 node_modules 를 사용하고, 호이스팅을 사용하면서 동일한 문제가 있으니, npm 은 간단히 사용.. 2023. 10. 16.
[vite] 프론트엔드 개발자를 위한 Vite 101 🧑‍🏭️ Vite 는 Esbuild + Rollup 으로 만들어진 차세대 프론트엔드 개발 도구입니다. vite 는 프론트엔드 개발환경에 필요한 config 를 모두 제공하고있는 빠르고, 간단한 no-configuration 툴입니다. 기존의 번들러 기반의 도구들은, 개발서버를 다시 시작할 때 콜드 스타트를 합니다. 이렇게 되면 모든 소스코드에 대한 크롤링과 빌드작업이 필요하며, 프로젝트 규모가 커진다면 개발 서버를 가동하는데 비합리적으로 오랜 시간이 걸립니다. vite 는 모듈을 dependencies 와 source code 두 카테고리로 나누어 이문제를 해결하였습니다. (1) Dependencies 는 다운받은 외부 패키지입니다. 즉, node_modules 패키지들을 말하는데, 이것들은 개발자가 변.. 2023. 10. 10.
[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.
반응형