박하영안녕하세요. 이번에는 API에 캐시 입히는 방법에 대해서 살펴보겠습니다.
최근 진행한 개인 프로젝트에서 사용자 클릭 이벤트에 따라 자주 호출되는 API 응답 속도를 개선해야 할 일이 있었습니다.
ChatGPT API를 누를 때마다 호출해야 하는 프로젝트인지라, API에 요청하고 응답해야 하는 부분이라 속도가 느려질 수 밖에 없는 상황이었습니다. 새로운 요청 역시 있지만, 반복되고 중복되는 요청이 많았기 때문에 문제를 해결해야 했습니다.
그 과정에서 사용자 경험(UX)을 고려해 불필요한 요청을 줄이고 응답 속도를 빠르게 만들기 위해 클라이언트 측 캐싱을 고민하게 되었고, 그 과정에서 in-memory와 localStorage를 비교했습니다.
이 글에서는 그 비교 과정과 각 방식의 특징 및 적용 팁을 정리해 보려고 합니다.
0. 왜 캐시가 필요한가?
사용자 경험 (UX)를 개선하기 위해서는 API 응답 속도가 중요합니다. Google SOASTA Research, 2017 자료에 따르면 로딩 시간이 3초 이상일 때, 32%의 이탈률이 발생하고 10초가 넘으면 123%의 이탈률이 발생한다고 합니다.
그만큼 로딩 속도를 개선하고, 또 엘리베이터의 거울을 둔 것처럼 묘안을 찾는 것은 사용자 경험에 있어서 필수불가결한 문제입니다.
특히 버튼 클릭 같이 자주 발생하는 이벤트에서 느려지면 UX에 굉장히 치명적인 악영향을 미치게 될 것입니다.
이러한 이유로 반복되는 API 호출을 줄이고 반응 속도를 개선하기 위해서는 클라이언트 캐싱이 필요합니다.
1. 캐싱 방법 개요
-
in-memory: 자바스크립트 변수에 캐시 -
localStorage: 브라우저 저장소에 캐시
2. in-memory 캐시
in-memory 캐시는 자바스크립트 변수에 캐시하는 방식입니다.
(사실 in-memory를 하면 Redis나 Memcached처럼 전용 캐시 시스템을 생각하겠지만, 어쨌든 const data = {} 같은 형식 역시 RAM에 저장되는 캐시이기 때문에 in-memory라는 단어를 선택하였습니다.)
이 방식은 Object에 접근하는 것이기 때문에 접근 속도가 빠르고, 코드 내에서만 관리되어 의존성이 적다는 장점이 있습니다.
하지만 새로고침 혹은 탭을 닫게 되면 초기화 되고, 페이지 간 공유가 불가하다는 단점이 있습니다.
3. localStorage 캐시
localStorage 캐시는 브라우저 저장소에 캐시하는 방식입니다.
이 방식은 reload해도 데이터가 유지되며, 여러 컴포넌트/페이지에서 공유 가능합니다.
하지만 문자열만 저장이 가능해서 다른 데이터 형식을 사용할 경우 JSON 처리가 필요하고, 동기적 I/O라 대용량 데이터일 경우 렉이 발생할 수 있다는 단점이 있습니다.
JSON 처리가 포함된 localStorage 코드는 다음과 같습니다:
4. 언제 뭘 써야 할까?
같은 페이지에서만 API를 반복 호출하게 되면 in-memory 캐시를 사용하는 게 좋습니다. 그러나 새로고침/탭 간에도 캐시를 유지해야 한다면 localStorage 캐시를 사용하는 것을 추천합니다.
하지만 만약 민감한 개인 정보가 포함된 상황이라면 캐시 사용을 지양하거나, session에 저장하는 sessionStorage를 사용하는 것을 추천합니다.
5. 둘 다 혼합해서 쓰기
원래 이론이 주어졌다면 응용하는 방법 역시 함께 작성해야 하지 않나 싶습니다.
먼저 UX 경험을 위하여 in-memory로 빠르게 응답하고, 만약 in-memory가 없다면 localStorage에서 조회하는 방법입니다.
만약 둘 다 없다면 fetch하여 두 캐시에 모두 저장하는 방식의 코드입니다.
6. 마무리
사실 캐시는 도구일 뿐이어서, 잘 써야 이득인 친구입니다.
UX 경험을 위해서 캐시를 쓴다고 하여도, 너무 오래된 캐시는 결국 메모리 문제로 UX 저하로 이어질 수 있습니다.
그렇기 때문에 in-memory 캐시, localStorage 캐시 같이 캐싱 방법만 생각할 것이 아니라, TTL (Time To Live), 버전 관리, invalidate를 사용하는 것 역시 고려해보아야 할 것입니다.
캐시는 속도 개선과 사용자 경험 개선을 위한 선택지임을 생각하시고 도입하셨으면 좋겠습니다! 😊
다음 번에는 함께 고려해보아야 할 문제 (TTL, 버전 관리, invalidate) 관련해서 써보겠습니다.
감사합니다!
7. 참고하면 좋을 사이트
in-memory와 Redis Cache에 대해 비교하는 내용입니다.