#cache
노트 25개
Frontend › JavaScript
데코레이터와 콜 포워딩함수를 고치지 않고 감싸서 동작을 더하는 데코레이터 함수. 캐싱 래퍼로 보는 기본 모양, 감싼 메서드가 this를 잃는 문제와 func.call(this, ...args)로 넘기는 콜 포워딩, call과 apply의 차이, 여러 인자를 키 하나로 바꾸는 해시, 유사 배열에 배열 메서드를 빌려 쓰는 메서드 빌리기, 래퍼가 원래 함수의 속성을 잃는 한계를 정리한다. 부분 적용은 함수형 프로그래밍 노트에 있다.
Frontend › Next.js
Next.js App Router의 내비게이션과 데이터 가져오기App Router는 서버가 라우팅하고 클라이언트가 내비게이션한다. Link·useRouter, prefetch와 클라이언트 캐시, 서버 컴포넌트의 병렬·순차 fetch, 요청 중복 제거, React cache()와 preload 패턴을 정리한다.
Frontend › Next.js
Next.js를 쓰는 이유SSR·SSG·파일 기반 라우팅·자동 코드 스플리팅을 제공해 React 앱의 초기 로딩과 SEO를 개선하는 프레임워크. App Router의 fetch 캐싱과 재검증, Next.js 16의 'use cache'까지.
Frontend › React
SWR로 서버 데이터 가져오기캐시를 먼저 보여 주고 백그라운드에서 재검증하는 데이터 패칭 훅 SWR의 사용 패턴. mutate 옵션 객체와 optimisticData로 캐시를 갱신하고, SWR 캐시로 로그인 상태를 판단해 보호된 페이지를 만든다.
Frontend › React
TanStack Query(React Query)서버에서 가져온 데이터의 캐싱·재요청·로딩/에러 상태를 훅 하나로 다루게 해 주는 서버 상태 라이브러리. QueryClientProvider 설정, query key 설계, 캐시의 fresh·stale·inactive 생명 주기와 isPending·isFetching, 다시 가져오는 시점(mount·focus·reconnect·interval), select·enabled·의존 쿼리·useQueries, 페이지네이션과 useInfiniteQuery, useMutation 뒤 무효화·setQueryData·낙관적 업데이트, SSR(dehydrate·HydrationBoundary)까지.
Frontend › Web
서비스 워커 캐싱과 응답 전략Cache Storage API로 요청·응답 쌍을 저장하고, fetch 이벤트의 respondWith()로 캐시 우선·네트워크 우선·stale-while-revalidate·네트워크 전용·캐시 전용 중 하나를 URL별로 골라 응답한다. 무엇을 언제 프리캐시할지, 불투명 응답과 addAll의 원자성 함정, 오프라인 대체 페이지, Workbox로 줄이는 코드, 페이지를 조각별로 캐시하는 서비스 워커 인클루드와 스트리밍까지 정리한다.
Frontend › Web
이미지 CDN과 Accept 헤더 협상이미지 CDN은 원본 한 장을 올려 두면 URL 매개변수로 크기·자르기·품질·형식을 바꾼 변형을 만들어 캐시한다. 브라우저의 Accept 헤더를 보고 AVIF·WebP 중 지원하는 가장 효율적인 형식을 주므로 picture·type 없이 srcset·sizes만으로 형식 대체가 된다. 같은 URL이 형식마다 다른 응답이 되므로 Vary: Accept로 캐시를 나눠야 하고, 비용이 주된 단점이다.
Frontend › Web
PWA와 서비스 워커 캐시 전략PWA는 HTTPS·웹 앱 매니페스트·서비스 워커 세 가지를 갖춘 웹사이트일 뿐이고, 사이트 종류와 상관없이 득이 된다. 서비스 워커로 캐시를 직접 다룰 수 있게 된 만큼, 필요한 것만 작게 요청하고 미디어를 중요도별로 나눠 캐시하고, 캐시 크기를 제한해 사용자의 데이터와 디스크를 아낀다.
Frontend › Web
TTFB 줄이기: 리디렉션·HTML 캐시·압축·CDN페이지의 첫 요청인 HTML이 빨리 와야 FCP·LCP가 기준을 넘는다. 리디렉션 체인을 없애고, HTML은 짧게 캐시하거나 ETag로 재검증하고, Server-Timing으로 서버 시간을 재고, 텍스트 자원은 Brotli로 정적 압축하고, CDN 엣지에서 내려 준다.
Backend › Architecture
뉴스 피드 설계: 연결, 활동, 팬아웃뉴스 피드는 「누구와 연결됐나」와 「누가 무엇을 했나」 두 데이터를 합쳐 사용자마다 다른 목록을 만드는 문제다. 읽을 때 모으는 방식(스캐터·개더)과 쓸 때 받은편지함에 뿌리는 방식(팬아웃)의 차이, 활동 복제와 집계·중복 제거·점수 매기기, 비정규화와 캐시로 타임라인을 빠르게 만드는 법을 정리했다.
Backend › Architecture
대규모 서비스 기술 스택 해부Netflix·Uber·Reddit·Twitter 같은 대규모 서비스의 기술 스택을 계층별로 겹쳐 보고 반복되는 설계 선택을 정리했다. 데이터 성격별로 DB를 고르는 폴리글랏 저장, 캐시를 조회 가속 이상으로 쓰는 네 가지 방식, 비싼 작업을 큐로 미루고 CDC로 캐시를 맞추는 패턴, 표준화된 이벤트 플랫폼, 카나리 배포 중심의 CI/CD, 자동 버그 수정과 전용 하드웨어까지 다룬다.
Backend › Architecture
대규모 트래픽에서 서비스를 지키는 설계읽기 위주 서비스가 평소의 몇 배로 치솟는 트래픽을 버티는 방법. CDN과 웹 서버로 WAS 앞단에서 부하를 덜고, 미리 만들어 둔 정적 응답으로 빈 화면을 막고, 서킷 브레이커·서비스 디스커버리로 장애 전파를 끊고, 한계치 모니터링과 자동 방어 모드로 사람 없이도 대응하는 구조를 정리했다.
Backend › Architecture
백엔드 지연 시간 줄이기: 숫자 감각과 기법메모리·SSD·네트워크·DB 커밋·LLM 호출이 대략 몇 나노초~초인지 자릿수 감각(Jeff Dean의 원형 표, 해마다 줄지 않는 왕복 지연, 봉투 뒷면 계산)을 먼저 잡고, API 지연을 줄이는 기법(인덱스, 캐시, 페이지네이션, 비동기 로깅·처리, 압축, 커넥션 풀, 로드 밸런싱, CDN)을 무엇을 줄이는지 기준으로 정리한다. 극단적 저지연 시스템의 원칙은 「크리티컬 패스에서 일을 줄인다」 하나다.
Backend › Architecture
웹 확장성의 구성 요소: 한 장으로 보는 웹 아키텍처확장 가능한 웹 애플리케이션을 이루는 구성 요소(DNS, 로드 밸런서, CDN, 프론트 웹 서버, 웹 서비스, 캐시, 메시지 큐와 워커, 데이터 저장소, 검색엔진)를 한 장의 지도로 정리했다. 3-Tier와 MSA의 데이터 흐름, 확장의 세 축(복제, 기능 분할, 데이터 분할), HTTP 캐시와 객체 캐시, 비동기 처리와 이벤트 기반 구조, 구간별 보안, 그리고 사람과 팀을 확장하는 법까지 다룬다.
Backend › Architecture
이미지·동영상 처리 서버 설계업로드된 이미지·동영상을 여러 크기와 화질로 바꿔 내보내는 서버를 설계하는 방법이다. 미리 만들어 두기와 요청 시 변환(온디맨드 리사이징)의 비교, 캐시·CDN·HTTP 검증자로 변환 비용을 줄이는 법, 엣지 함수 구성, 트랜스코딩 파이프라인을 단계로 나누고 비동기 완료 알림을 보내는 법, 점진적 다운로드와 적응형 스트리밍을 정리했다.
Backend › Architecture
캐시 전략: 계층, 읽기·쓰기 패턴, 교체 정책, 장애 패턴캐시는 요청 경로의 거의 모든 층에 있다. 캐시와 원본을 맞추는 읽기·쓰기 패턴(cache-aside, read-through, write-through, write-around, write-back), 꽉 찼을 때 무엇을 버릴지 정하는 교체 정책(LRU·LFU·FIFO·SLRU·TTL 등), 그리고 캐시가 오히려 DB를 무너뜨리는 네 가지 장애(동시 만료, 관통, 핫 키 만료, 캐시 다운)와 대응을 정리한다.
Backend › Architecture
캐시 클러스터 운영과 장애 대응트래픽 대부분을 캐시가 받는 서빙 계층에서는 캐시의 가용성이 곧 서비스의 가용성이다. 일부 노드 장애를 연결 단위로 빨리 감지하고, 동기화 중인 복제본은 트래픽에서 빼고, 응답 속도 기반 라우팅이 만드는 쏠림을 무작위 선택으로 풀고, 핫 키는 짧은 TTL의 로컬 캐시로 흡수하는 방법을 정리했다.
Backend › Database
RedisRedis는 메모리에 데이터를 두는 키-값 저장소로, 캐시를 넘어 세션·분산 락·카운터·레이트 리미터·랭킹·큐로 쓰인다. 빠른 이유(메모리, 단일 스레드 이벤트 루프와 I/O 다중화, 효율적인 자료구조), 자료구조별 쓰임, 영속성(RDB·AOF·혼합)과 큰 키의 영향, 만료·교체 정책과 메모리 지표, 트랜잭션(MULTI·WATCH)과 Lua, 복제·센티널·클러스터와 리샤딩, ACL, 장애 진단, Memcached와의 차이를 정리한다.
Computer Science › Computer Architecture
캐시 메모리와 MMU캐시의 주소 매핑(연관·직접·집합 연관)과 쓰기 정책, 그리고 하드웨어 관점에서 MMU가 맡는 재배치·공유·보호와 세그먼트 보호 필드.
Computer Science › Computer Architecture
캐시를 고려한 코드프로그래머가 캐시를 직접 제어할 수 없는 대신 접근 패턴으로 성능을 끌어내는 방법. 캐시 라인과 하드웨어 프리페처, 행렬 곱의 전치·블로킹, 배열과 연결 리스트의 실제 차이, 넌템포럴 저장과 쓰기 결합 버퍼, 캐시 일관성(MESI)과 거짓 공유, TLB shootdown, 캐시 효과를 걸러 내는 마이크로벤치마크 방법을 정리한다.
Computer Science › Network
CDN전 세계 엣지 서버에 콘텐츠를 캐시해 사용자 가까운 곳에서 응답하는 CDN. 동작 방식, 얻는 것과 비용·위험, 캐시 무효화와 프론트엔드 배포에서의 쓰임을 정리한다.
Computer Science › Network
HTTP 캐시Cache-Control, ETag·Last-Modified로 브라우저와 CDN이 응답을 재사용하는 HTTP 캐시. 신선도와 재검증, 자주 쓰는 지시어, 자산별 캐시 전략을 정리한다.
Computer Science › Operating System
가상 메모리요구 페이징과 페이지 폴트 처리, OPT·FIFO·LRU·LFU·Clock 페이지 교체 알고리즘, 다양한 캐싱 환경, 프레임 할당과 스래싱, Working Set·PFF, 페이지 크기.
Computer Science › Operating System
파일 시스템 구현블록과 연속·연결·인덱스 할당, inode의 직접·간접 블록과 경로 탐색, FAT, 빈 공간·디렉터리 관리, VFS/NFS, 버퍼 캐시와 페이지 캐시.
Computer Science › Programming Languages
Java 입출력과 직렬화: 스트림, Path·Files, Serializable, JacksonJava 입출력의 두 계열(바이트 스트림과 문자 스트림)과 인코딩, 보조 스트림을 겹쳐 기능을 붙이는 데코레이터 구조, 버퍼링과 flush, File 대신 쓰는 Path·Files를 정리하고, 그 위에서 객체를 바이트로 바꾸는 Java 기본 직렬화(Serializable)의 serialVersionUID·보안 문제와 대안인 JSON 라이브러리 Jackson의 어노테이션, 캐시 저장처럼 타입 정보를 보존해야 할 때의 설정과 함정을 다룬다.