Book Study, CodingInside

[Computer Science Note] chap03. section02.

---

데이터 캐싱에 대해 알아보기 전 알아두면 좋은 기본적인 운영체제와 컴퓨터에 관한 간단한 정보를 상단에 추가해두겠습니다. 🙂

basic OS

운영체제의 역할

1️⃣ CPU 스케줄링과 프로세스 관리
CPU의 소유권을 어떤 프로세스에 할당할지, 프로세스의 생성과 삭제, 자원 할당 및 반환 관리

2️⃣ 메모리 관리
한정된 메모리를 어떤 프로세스에 얼만큼 할당해야 하는지 관리

3️⃣ 디스크 파일 관리
디스크 파일을 어떠한 방법으로 보관할지 관리

4️⃣ I/O 디바이스 관리
I/O 디바이스(마우스, 키보드)와 컴퓨터 간에 데이터를 주고받는 것을 관리

운영체제의 구조

| GUI
사용자가 전자장치와 상호 작용할 수 있도록 하는 사용자 인터페이스의 한 형태

example → 마우스로 클릭하는 단순 동작으로 컴퓨터와 상호 작용할 수 있도록 해줌

| CUI
그래픽이 아닌 명령어로 처리하는 인터페이스
인터페이스 중 CUI만 있는 리눅스 서버도 존재

| 드라이버
하드웨어를 제어하기 위한 소프트웨어

| 시스템콜
운영체제가 커널에 접근하기 위한 인터페이스
유저 프로그램이 운영체제의 서비스를 받기 위해 커널 함수를 호출할 때 사용

① 유저 프로그램이 I/O 요청으로 트랩(trap)을 발동
② 올바른 I/O 요청인지 확인
③ 유저 모드가 시스템콜을 통해 커널 모드로 변환되어 실행

---

basic Computer

컴퓨터의 요소

⚙️ CPU

Central Processing Unit

산술논리연산장치, 제어장치, 레지스터로 구성되어 있는 컴퓨터 장치
interupt에 의해 단순히 메모리에 존재하는 명령어를 해석해 실행

CU

Control Unit

제어장치
프로세스 조작을 지시하는 CPU의 부품 중 하나

1️⃣ 입출력장치 간 통신을 제어
2️⃣ 명령어들을 읽고 해석
3️⃣ 데이터 처리를 위한 순서를 결정

레지스터

CPU 안에 있는 매우 빠른 임시기억장치
CPU와 직접 연결돼 있어 연산 속도가 메모리보다 수십 ~ 수백 배 빠름
CPU는 자체적으로 데이터를 저장할 방법이 없어 레지스터를 거쳐 데이터를 전달

ALU

Arithmetic Logic Unit

산술논리연산장치
산술 연산과 배타적 논리 연산을 계산하는 디지털 회로

⚙️ DMA Controller

I/O 디바이스가 메모리에 직접 접근할 수 있도록 하는 하드웨어 장치

CPU에만 너무 낳은 interupt 요청이 들어오기 때문에 CPU의 부하를 막아주기 위해 CPU의 일을 부담하는 보조 일꾼

하나의 작업을 CPU와 DMA 컨트롤러가 동시에 하는 것을 방지

⚙️ Memory

CPU는 계산을, 메모리는 기억을 담당

전자회로에서 데이터나 상태, 명령어 등을 기록하는 장치
보통 RAM(Random Access Memory)을 일컬어 메모리라도고 함

컴퓨터를 공장에 비유하자면...
CPU = 일꾼, memory = 작업장, memory의 크기 = 작업장의 크기

작업장이 클수록 창고에 물건을 많이 가져다놓고 많은 일을 할 수 있듯이
메모리가 크면 클수록 많은 일을 동시에 할 수 있음

⚙️ Timer

몇 초 안에는 작업이 끝나야 한다는 limit을 정하고 특정 프로그램에 시간 제한을 다는 역할
시간이 많이 걸리는 프로그램이 작동할 때 제한을 걸기 위해 존재

⚙️ Device Controller

컴퓨터와 연결돼 있는 IO 디바이스들의 작은 CPU를 말함
옆에 붙어 있는 로컬 버퍼는 각 디바이스에서 데이터를 임시로 저장하기 위한 작은 메모리

---

💰 Caching

이전 웹의 성능 최적화에 대해 다룬 포스팅에서도 언급한 바 있지만 웹 사이트의 로딩 시간을 줄이는 것은 비즈니스에도 큰 영향을 미칩니다.
웹을 최적화하는 방법에는 여러 가지가 있는데 그 중에서 특히 중요한 개념들 중 하나에 캐싱이 포함됩니다.

📝 MEMORY

메모리 계층

cache

데이터를 미리 복사해 놓는 임시 저장소이자 빠른 장치와 느린 장치에서 속도 차이에 따른 병목 현상을 줄이기 위한 메모리를 캐시라고 합니다.

그리고 캐싱은 어떤 데이터를 한 번 받아오게 되면 그 데이터를 처음에 불러온 저장소보다 가까운 곳에 임시로 저장해 필요 시 처음보다 빠르게 가져와 사용할 수 있는 프로세스를 의미합니다.

메모리 계층 구조에서 cache(캐시)는 디스크나 메인 메모리보다 더 빠르게 데이터를 불러와서 사용해야 할 때 쓰입니다. 때문에 빠른 만큼 메모리당 비용이 비싼 편에 속합니다.

그래서 개발자 입장에서는 재사용의 가능성이 높은 데이터만 선별해 캐싱하여 성능과 비용, 두 가지의 균형을 잘 잡는 것이 중요합니다.

HTTP Cache 종류

Web Cache

클라이언트는 서버로부터 HTTP 요청을 통해 필요한 데이터를 불러옵니다.
기본적으로 웹사이트가 실행될 때마다 client는 해당 웹사이트를 그리기 위해 필요한 데이터를 전부 다시 불러와야 합니다.

하지만 분명 재사용의 여지가 있는 데이터들이 있을텐데 굳이 모든 데이터를 다시 불러와야 할 필요가 있을까요?

이전에 한 번 불러왔던 데이터들 중 바뀔 가능성이 없는 데이터라면 캐싱을 고려해봐야 합니다. 페이지의 로고 이미지, sidebar, navbar 같이 여러 페이지에 동일하게 적용되는 부분들이 고려 대상에 해당될 것입니다.

Browser Cache

Browser Cache === HTTP cache === Private Cache

위와 같은 상황에 적용하는 캐시를 브라우저 캐시(Browser Cache)라고 합니다.
브라우저 캐시는 client app에 의해 내부 디스크에 이뤄지는 캐시로 HTTP cache라 불리기도 합니다.

브라우저 캐시는 단일 사용자를 대상으로 하는 사설 캐시(Private Cache)이므로 해당 사용자의 정보만을 저장합니다.

browser cache 종류

소프트웨어에서의 캐시는 대표적으로 쿠키, 로컬 스토리지, 세션 스토리지가 있으며 origin에 종속됩니다. 보통 사용자의 커스텀 정보, 인증 모듈 관련 사항들을 웹 브라우저에 저장해 추후 서버 요청 시 아이덴티티 혹은 중복 요청 방지를 위해 쓰입니다.

cookie

만료기한이 있는 key-value 저장소입니다.

4KB까지 데이터를 저장할 수 있고 만료기한을 정할 수 있습니다.
만료기한은 클라이언트와 서버 둘 다 정할 수 있지만 보통 서버에서 정합니다.

쿠키를 설정할 때 document.cookie로 쿠키를 볼 수 없게 httponly 옵션을 거는 것이 중요합니다.

same site 옵션을 strict로 설정하지 않았을 경우 다른 도메인에서 요청했을 때 자동으로 전송됩니다.

| usuage

1️⃣ 세션 관리
사용자가 로그인한 상태를 유지하고, 사용자가 해당 세션 동안 접속하는 동안 사용자의 상태를 추적하는 데 사용

2️⃣ 개인화
사용자의 환경설정이나 선호도를 저장하여 웹 사이트를 개인화할 때 사용

3️⃣ 트래킹
사용자의 행동을 추적하고 분석하기 위해 사용

// 설정
document.cookie = "key=value; expires=expiration_date; path=/";

// 가져오기
let cookieValue = document.cookie;

// 삭제
document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

쿠키는 보안 상 문제가 될 수 있으므로 개인 식별 정보와 같은 민감한 정보를 저장하지 않는 것이 좋습니다.

일부 브라우저는 클라이언트 당 쿠키의 최대 개수나 쿠키의 총 크기를 제한할 수 있기 때문에 브라우저의 쿠키 제한이 있는지 확인해야 합니다.

local storage

만료기한이 없는 key-value 저장소입니다.

5MB까지 데이터를 저장할 수 있으며 웹 브라우저를 닫아도 데이터가 유지됩니다.
클라이언트에서만 수정이 가능하고 HTML5를 지원하지 않는 웹 브라우저에서는 사용할 수 없습니다.

| usuage

1️⃣ 사용자가 로그인 정보, 사용자 설정, 사용자 환경 등을 오랫동안 유지해야 할 때
2️⃣ 데이터가 사용자 세션을 넘어서 영구적으로 보존되어야 할 때

// 데이터 설정
localStorage.setItem('username', 'john_doe');

// 데이터 가져오기
var username = localStorage.getItem('username');
console.log('Username:', username);

// 데이터 삭제
localStorage.removeItem('username');

session storage

만료기한이 없는 key-value 저장소입니다.

5MB까지 데이터를 저장할 수 있습니다.
탭 단위로 세션 스토리지를 생성하므로 탭을 닫을 때 해당 데이터가 사라집니다.

클라이언트에서만 수정이 가능하고 HTML5를 지원하지 않는 웹 브라우저에서는 사용할 수 없습니다.

| usuage

1️⃣ 사용자가 페이지나 브라우저 창을 닫을 때까지만 데이터를 보존해야 할 때
2️⃣ 일시적인 데이터 저장에 적합

// 데이터 설정
sessionStorage.setItem('language', 'english');

// 데이터 가져오기
var language = sessionStorage.getItem('language');
console.log('Language:', language);

// 데이터 삭제
sessionStorage.removeItem('language');

캐시 유효성 검증 및 조건부 요청

브라우저에서 캐싱을 처리하는 속성 중 대표적인 것으로는 ETag와 Cache-Control이 있습니다.

| ETag

HTTP 헤더의 ETag는 특정 버전의 리소스를 식별합니다.

웹 서버가 내용을 확인하고 변경 사항이 없을 경우 ETag의 값도 변하지 않아 웹 서버로 전체 요청을 보내지 않게 됩니다. 반대로 해당 요청의 리소스가 변경되었다면 새로운 ETag가 생성됩니다.

If-Match 프로퍼티를 사용해 캐싱된 리소스가 불러온 리소스와 일치하는지 확인할 수도 있습니다. 확인한 두 리소스의 결과 값에 따라 상태코드를 보내줍니다.

ETag가 불일치할 경우 412 상태코드(Precondition Failed, 전제조건 실패)

반대로 변경되지 않은 리소스의 캐시를 해야할 경우, 대표적으로 ETag가 오래되어 사용할 수 없는 경우, HTTP 헤더에 If-None-Match 프로퍼티에 ETag 값을 넣어줄 수 있습니다. 서버에서는 클라이언트의 ETag를 현재 버전 리소스의 ETag와 비교 후 결과에 해당하는 상태코드를 보내줍니다.

일치 시 현재 ETag가 유효하다는 의미이기 때문에 304(Not-Modified)

| Cache-Control

가장 빠른 코드는 실행하지 않는 코드다.

요청을 보낼지 말지 여부를 판단할 때 HTTP 헤더의 cache-control 요소를 통해 캐싱을 제어할 수 있습니다.

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
Date: Tue, 22 Feb 2022 22:22:22 GMT
Cache-Control: max-age=604800  ✅

<!doctype html>
…

no-cache
이름만 보면 cache를 하지 않는다는 의미일 것 같지만 그렇지 않습니다.
no-cache 속성은 캐시를 먼저 사용하기 전에 서버에 해당 캐시를 사용해도 되는지 검증을 요청하는 속성입니다.

no-cache 속성이 없는 경우 캐시가 있다면 그 캐시를 바로 사용합니다.
하지만 no-cache 속성이 있는 경우 캐시가 있다 하더라도 서버에게 그 캐시를 써도 되는지 허락을 맡고 쓰게 됩니다. 따라서 요청에 대한 시간이 소요될 수 있습니다.

no-store
no-store 속성을 사용하게 되면 반환된 응답에 대해 브라우저가 캐싱을 하지 않게 됩니다. 이 속성이 cache를 하지 않는다는 의미에 더 가깝다고 볼 수 있습니다.
캐싱을 하지 않기 때문에 매번 요청을 보낼 때마다 전체 데이터를 받아오게 됩니다.
개인정보와 같은 사적인 데이터의 경우 이 속성을 사용하게 됩니다.

private & public
private과 public은 cache-control의 키워드입니다.
public은 캐싱이 가능하다는 의미입니다. private은 응답을 캐싱하는 과정에서 엔드 유저만 캐싱이 가능하고, 캐싱하는 과정에서 거치게 되는 매개체에서는 캐싱할 수 없는 속성입니다.

---

Proxy Cache

Proxy Cache === Shared Cache

웹 캐시에는 브라우저 캐시 외 프록시 캐시도 있습니다.
프록시 캐시는 공유 캐시(Shared Cache)로 한 명 이상의 사용자에 의해 재사용되는 응답을 저장합니다. 대표적으로 ISP에서 많이 조회되는 리소스를 재사용하기 위해 웹 프록시를 설치합니다.

구글을 예로 들어보면 이해하기가 한결 수월해집니다.
구글 사이트에 접속할 때마다 미국에 있는 구글 서버에서 웹 사이트의 데이터를 가져온다면 시간이 꽤 걸릴 것입니다. 이때 프록시 캐시를 사용해 구글 웹사이트에 관한 리소스를 한국 서버에 둘 수 있게 하는 겁니다.

---

Network Cache

CDN

Content Delivery Network

CDN은 분산 노드로 구성된 네트워크입니다.
CDN은 성능 향상을 위해 클라이언트의 요청이 같은 서버로 가는 것을 막습니다.
즉, 각 지역의 엔드 유저에 따라 요청을 origin 서버가 아닌 다른 서버로 가도록 분산시키는 역할을 하며 이 과정에서 캐싱이 사용됩니다.

최초 한 번은 origin 서버에서 데이터를 받아와야 하므로 느릴 수 있지만, 그 이후부터는 CDN을 통해 해당 콘텐츠를 전보다 빠르게 받아올 수 있습니다.
만약 엔드 유저의 요청이 CDN 노드에서 가져올 수 없는 경우라면 origin 서버로 요청을 전송합니다.

CDN을 서비스하는 대표적인 회사로 Cloudflare가 있습니다.

---

DB의 캐싱 계층

데이터베이스 시스템을 구축할 때도 메인 데이터베이스 위에 레디스(redis) 데이터 베이스 계층을 캐싱 계층으로 두어 성능을 향상시키기도 합니다.

---

References.

면접을 위한 CS 전공지식노트 책
https://hudi.blog/http-cache/
https://developer.mozilla.org/ko/docs/Web/HTTP/Caching