[FE] API 캐싱

🕊 배경

프로젝트 진행 중 동일한 요청에 동일한 응답을 받아오는 API 요청을 계속해서 전송하는 경우가 있었습니다.

따라서, 불필요한 API 요청 횟수를 줄이기 위한 방법을 고민해보고 프로젝트에 적용해 보았습니다.

 

🦙 내용

1. 기존 로직

 - API 요청이 필요할 때 마다 요청을 보내고 그 응답 데이터를 활용

 - 매 번 API 요청을 하기 때문에 불필요하게 많은 횟수의 API 요청 가능성

 

2. 개선 로직

 - API 요청이 필요한 상황에 캐시 데이터 체크

 - 캐시 데이터에 필요로 하는 요청에 대한 응답값이 저장되어 있다면 캐시 데이터 활용

 - 캐시 데이터에 필요로 하는 요청에 대한 응답값이 없다면 API 요청

 

2-1. 캐시 데이터 체크 로직

// API_CACHE_DATA: API 요청에 대한 응답 값을 저장할 Map
const API_CACHE_DATA = new Map();

 - { API_URL : RESPONSE_VALUE } 형태의 Map API_CACHE_DATA 선언

 

const hasResponse = API_CACHE_DATA.get('http://localhost:8080/api/team');

- 요청이 필요할 때 해당 Map의 URL에 해당하는 키 값에 응답 값이 저장 되어있는지 체크

 

if (!hasResponse) {
	axios.get('http://localhost:8080/api/team')
    .then((res) => {
    	API_CACHE_DATA.set('http://localhost:8080/api/team', res.data); // 응답 데이터 캐싱
    	console.log(res.data); // 응답 데이터 활용
    })
    .catch((err) => console.log(err));
} else {
	console.log(res.data); // 응답 데이터 활용
}

- 캐시 데이터가 없다면 새로운 API 요청 후 응답 데이터 캐싱 및 활용

- 캐시 데이터가 있다면 캐시 데이터 활용

 

- 위 로직처럼 구성해도 캐싱을 활용할 수 있으나, 응답 값이 변할 수 있는 데이터의 캐싱의 경우 올바르지 않은 캐시 데이터를 활용할 확률이 있습니다.

- 이를 어느정도 보완하기 위해 캐시 데이터의 만료일자를 설정해 활용했습니다.

const cacheData = API_CACCHE_DATA.get('http://localhost:8080/api/team');

if (!cacheData || cacheData.exp < new Date().getTime()){
	axios.get('http://localhost:8080/api/team')
    .then((res) => {
    	// 캐시 데이터 설정 {data, exp}
    	API_CACHE_DATA.set('http://localhost:8080/api/team', {
        	data: res.data,
            exp: new Date().getTime + 1000 * 60 * 10,
        }) 
        // 응답 데이터 활용
        console.log(res.data);
    }.catch((err) => console.log(err));
} else {
	// 캐시 데이터 활용
	console.log(cacheData.data);
}

- key로 API URL을, value로 { 응답데이터, 만료 시간 } 형태의 Object를 설정해두어 캐시 데이터가 존재한다고 하더라도 만료 시간에 따라 캐시 데이터를 갱신하는 로직을 구성할 수 있었습니다.

 

🦍 고찰

- 프로젝트를 진행하며 여러 팀들을 출력하는 페이지네이션에 위 로직을 적용해보았습니다. 팀은 생기거나 없어질 수 있기에 만료시간을 매우 적게 주었고, 이 때문에 효용성을 크게 느끼진 못했습니다.

- 다만, 변하지 않는 유저 고유의 데이터나 서비스에서 제공하는 상품 리스트를 출력하는 부분에서는 이를 적용해봄직 하다 생각했습니다.

- API 요청, 응답을 보낼 때의 비용과 메모리에 API 응답 값을 캐싱하는데 소요되는 비용을 잘 저울질 할 수 있어야 할 것 같았습니다.

- 다음 프로젝트에는 react-query를 적용해 데이터 캐싱을 보다 요긴하게 활용해보려고 합니다.