Persistence

Browsing Context 브라우저가 Document를 표시하는 환경이다. 모던 브라우저에서 이는 보통 tab 단위이지만 window나 iframe, frame이 될 수도 있다. 각 브라우징 컨텍스트는 특정한 오리진, active document의 오리진, 여태까지 전시한 도큐먼트를 기억하는 히스토리를 차례대로 저장하고 있다. 브라우징 컨텍스트 간의 소통은 매우 제한적이지만, 같은 오리진을 가진 브라우징 컨텍스트 사이에서는 BroadcastChannel을 오픈해서 사용할 수 있다. BroadcastChannel 같은 오리진의 브라우징 컨텍스트끼리 소통할 수 있는 방법이다. 채널을 오픈한 다음 메세지를 보내면, 해당 채널을 구독하는 컨텍스트에서 메세지를 받아볼 수 있다. 아래처럼 채널을 생성할 수 있다..

react query의 캐시는 in memory라서 브라우저 탭 간에 공유되지도 않고 새로고침할 때마다 새롭게 생성된다. (The cache is in-memory and only exists within the life of the javascript context for a tab.) in memory라는 단어의 사용은 솔직히 헷갈린다. 보통 인메모리 캐싱은 하드디스크 말고 메모리에 캐시를 저장하는 걸 의미하는데, 여기서의 맥락은 그런 in memory가 아닌 것 같고 그저 자바스크립트가 실행되고 있는 동안에 가지고 있는 상태라는 의미인 것 같다. (localStorage 처럼 지속 저장하는 형태가 아니라는 뜻) 리액트 쿼리에서 탭 간에 캐시가 공유되지 않다보니, invalidateQueries를 했..

box-shadow vs outline box-shadow랑 outline은 둘 다 border랑 달리, 물리적인 공간을 차지하지 않는다는 공통점이 있다. 즉 border는 2px 잡히면 그 만큼 다른 레이아웃에 영향을 주게 되는데, box-shadow랑 outline은 비슷한 시각적 효과를 주지만 다른 레이아웃에 영향을 주지 않는다. 두 속성은 값의 형태가 좀 다르다. outline은 border와 거의 유사한 반면 box-shadow는 좀 어렵다. /* color| style | width */ outline: green solid 3px; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1p..

justify-content: end vs flex-end end는 CSS Box Alignment Specification에 정의돼 있다. flex-end는 Flex-box Specification에 정의돼 있다. flex box 속성은 알겠는데 CSS Box Alignment가 뭔지 모르겠어서 찾아보니 CSS 에 존재하는 여러 디스플레이 모델들(flex, grid, block 등)에 공통적으로 적용되게 하려고 만든 속성이라고 한다. 아직 working draft 상태(2022.01.24 기준)이므로 유효하게 적용되지 않는 브라우저가 존재할 수 있다. 플렉스 컨테이너에서 justify-content: end를 사용했더니, 특정 환경의 크롬에서는 적용돼지 않았다. 지원 스펙을 찾아보니(https://ca..

flow 레이아웃이 요소들 간 겹치지 않도록 했다면 포지션 레이아웃에서는 가능하다. 포지션 레이아웃은 다음과 같은 종류가 있다. static (그냥 디폴트) relative absolute fixed sticky position relative 특정 자식을 제한한다 추가적인 css 프로퍼티를 사용할 수 있다 포지션 레이아웃을 사용하면 top, left, right, bottom 속성 등을 사용할 수 있다. relative로 설정된 상태에서는 이런 값들은 원래의 자리 에서 상대적인 위치를 의미한다. 예를 들어 left: 10px은 오른쪽으로 요소를 10px만큼 이동시킨다. 하지만 요소 이동은 마진으로도 가능한데 왜 이걸 사용해야 할까? 마진과 포지션의 가장 큰 차이는, 포지션은 레이아웃에 영향을 주지 않는..

Data fetching Traditioanl Approach vs Suspense 데이터 fetching과 관련해서 3가지 접근방법이 있다. Fetch-on-render 이 방법의 문제점은 'waterfall' 이라고 불린다. 이 코드를 보면, App 컴포넌트가 마운트하고나서 todos를 fetching하기 시작하고, 데이터를 받아오는 도중에는 loading jsx를 리턴한다.즉 여러개의 async 리퀘스트들이 병렬적으로 수행되지 못함으로써 UI 렌더링하는데 시간이 오래 걸리게 된다. 만약 Tasks 컴포넌트가 또 다른 async 요청을 할 예정인데, todos를 fetch하는데 5초가 걸린다면 이 Task 리퀘스트는 5초가 지난 다음에야 시작할 수 있는 것이다. 왜냐면 fetch on ..

Width 블록 요소의 기본적인 width 값은 auto이다. margin auto와 비슷하게, 자기가 먹을 수 있는 최대한의 space를 차지하려고 한다. width를 정의하는 방법은 크게 2가지다. 100%, 5rem, 200px 등 숫자가 포함된 어떤 단위 auto, fit-content 등 어떤 키워드 width를 숫자로 정의하는 경우 부모 요소를 기준으로 한다. 예를 들어 100% 라고 하면 무조건 부모 요소의 width만큼 늘어난다. (auto와 달리, 마진이 있더라도 무시된다) min-content, max-content, fit-content min-content와 max-content는, 다른 width와 달리 child를 기준으로 너비를 잡는다. 예를 들어서 auto나 100% 같은 값..

Flow layout HTML element의 레이아웃은 레이아웃 알고리즘에 의해 결정된다. 여러가지 레이아웃 모드(e.g. flex box, grid, positioned 등)가 있는데, 디폴트는 Flow layout이다. Flow layout에서는 모든 element들이 display 프로퍼티를 가지며 display 값은 inline, block, inline-block이다. 이 값들에 따라 레이아웃이 어떻게 위치할 지가 결정되며, 값들은 기본적으로 element 태그에 따라 다르다. 예를 들어 div는 디폴트로 block 값을 가지며, span은 inline을 디폴트 값으로 가진다. inline 인라인 요소는 margin-left/right을 이용해서 방향을 조절할 수는 있지만, width나 hei..