일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- vanilla-extract
- 기초
- 최적화
- SWC
- react-query
- JavaScript
- MSW
- thread
- 쓰레드
- 기본
- async
- 리액트
- react-native
- Babel
- next.js
- 아키텍처
- 비동기
- 리액트네이티브
- 개발자
- styled-component
- 목킹
- CSS-in-JS
- React
- Cache
- next hydration
- Critical Rendering Path
- 자바스크립트
- 동기
- 리액트쿼리
- front-end mocking
- link
- Basic
- Concurrent Mode
- sprinkles
- react server component
- amplify
- mockoon
- 캐쉬
- mock service worker
- 컴포넌트
- Today
- Total
목록Cache (2)
Don’t worry about failures
평소에 캐쉬에 대해 아무생각 없이 적절한 곳에 캐쉬하면 좋지 라는 생각만 가지고 있었다. 하지만, 이번에 웹 최적화 관련 인강을 들으면서, 캐쉬에 대한 이야기가 나와 정리할 겸 글을 남긴다. 일단, 브라우저의 경우 1. 메모리 캐쉬 2. 디스크 캐쉬 이렇게 두개로 나누어 캐쉬 처리를 한다. 메모리 캐쉬는 RAM에 저장되고, 이는 휘발성이기 때문에 브라우저를 닫았다 키면 날라가게 된다. 반면, 디스크 캐쉬 같은 경우 file로 관리를 한다. 이 두 캐쉬에 대한 선택은 개발자가 직접적으로 관리하지는 못하고 브라우저 내의 알고리즘에 의해 관리가 된다. 하지만 이 캐쉬에 대해 사용할지 말지 유효기간이 어떻게 되는지 등의 옵션은 cache-control을 통해 관리할 수 있다. 이는 서버 요청 후 respons..

react query를 간단하게 사용하면서 의문점이 생겼다. useQuery를 사용했을 때 reload을 했을 때 다시 api 요청을 했다. 이에 대해 궁금증이 생겨서 stackoverflow에 글을 남겼고, 이는 in-memory라는 것을 알게 되었다. 이를 기반으로 더 알아보고 좋은 글이 있어 번역을 기반으로 글을 작성해본다. 리액트 쿼리는 개발자 경험과 사용자 경험을 좋게 하기 위한 caching layer이다. 이는 in memory 캐쉬이며, 서버 없이, 브라우저 캐쉬와 관계 없이 처리되는 캐쉬이다. 나도 그러하고, 아마 많은 개발자들이 초기의 요청만하고, 그 이후에 캐쉬된 데이터를 제공 받기를 기대하며 이를 생각한다고 생각한다. 이 때문에 나 또한 의문을 가지고 찾아보기 시작한 것이다. Rea..