프론트엔드 개발자라면 웹사이트 성능을 최적화하는 것에 관심이 있어야한다.
웹 사이트 로딩시간을 줄이고 UX를 향상시키는 것은 비즈니스에 큰 영향을 끼치기 때문이다.
UX를 향상시키기 위해 최적화할 수 있는 방법이 여러 가지가 있는데 그 중 하나가 캐싱이다.
캐싱은 어떤 데이터를 한 번 받아온 후에 그 데이터를 불러온 저장소보다 가까운 곳에 임시로 저장하여, 필요시 더 빠르게 불러와서 사용하는 프로세스를 의미한다. 메모리 계층 구조에서 캐시는 디스크나 메인 메모리보다 더 빠르게 데이터를 불러와서 사용해야 할 때 쓰인다. 이러한 장점이 있는 만큼 단위 메모리당 비용이 비싼 편이다. 그래서 엔지니어 입장에서는 재사용을 충분히 많이 할 수 있는 데이터만 선별적으로 잘 캐싱해서, 성능과 비용을 모두 아끼는 것이 중요하다고 볼 수 있다.
그렇다면 프론트엔드 개발자가 알아야 할 캐싱의 종류와 개념을 살펴보자
클라이언트는 서버로부터 HTTP 요청을 통해 필요한 데이터(HTML, CSS, JS, 이미지 등)를 불러온다.
기본적으로는 웹사이트가 실행될 때마다, 클라이언트는 해당 웹사이트를 그리기 위해 필요한 데이터를 전부 다 불러와야 한다.
예를 들어, 어떤 블로그를 들어가 본다고 가정해 보자. 블로그에는 포스팅이 가장 메인이지만 그 외에도 섬네일, 사이드바, 내비게이션바 같은 요소도 고정적으로 들어가 있다.
우리가 블로그 홈 화면에서 어떤 포스팅 상세로 들어갔다가 다시 뒤로 가기로 돌아오면, 이전에 본 동일한 홈 화면으로 돌아오게 된다. 그렇다면 원칙적으로는 모든 HTML, CSS, JS, 이미지를 서버에서 다시 모두 불러와야 하는 것이 맞다. 그렇다면 이 부분의 부담을 줄여볼 수 없을까?