데이터를 불러온 후, 해당 데이터를 번역하는 API를 호출하는 과정에서 이런식으로 하다보면 금방 사용량이 차겠는데? 하는 생각이 들었다.

이에 대한 해결책으로 캐싱 전략이 생각이 났다. 이미 얻은 데이터를 재사용 하기 위해 캐시를 흉내내어 변수에 데이터를 담아두고, 이미 요청된 데이터일 경우에는 API 호출을 피하고 변수에서 데이터를 가져오도록 하는 과정을 적었다.

전역 변수 생성

우선 다음과 같이 객체를 담는 전역 변수를 생성했다.

let storeMenuData = CACHED_MENU_DATA[storeId];

// storeMenuData가 초기화 되지 않았다면 초기화 해준다.
if (!storeMenuData) {
  CACHED_MENU_DATA[storeId] = {
    data: {
      en: [],
      ja: [],
      zh: [],
    },
    origin: '',
  };
  storeMenuData = CACHED_MENU_DATA[storeId];
}

storeId를 키로 삼고, 그 안에 각 언어로 번역된 데이터가 들어있다. 그리고 origin에는 원본 데이터를 직렬화한 값이 들어가낟.

조건문 생성

if (storeMenuData.data[lang] && storeMenuData.data[lang]?.length === 0) {
    storeMenuData.data[lang] = menuData;

    // origin에 menuData를 직렬화해서 담는다.
    storeMenuData.origin = JSON.stringify(menuData);

// menuData가 바뀌지 않았으면 이전에 저장해놓은 데이터를 보여준다.
// 그렇지 않으면 새로 번역을 시작한다.
} else if (JSON.stringify(menuData) === CACHED_MENU_DATA[storeId].origin) {
  return CACHED_MENU_DATA[storeId].data[lang];
}

// API 호출 작업 시작...

전역 변수에 요청이 들어온 storeId와 언어(lang)에 대해 데이터가 있으면 그곳에서 가져오고, 가져 왔는데 직렬화된 원본 데이터가 현재 새로 들어온 데이터와 다르다면 다시 번역 API 요청을 할 수 있도록 하였다.