KakaoMap API는 3,000,000회의 월간 호출 제한이 있다.

서비스를 구현하다보니 지도 생성 외에도 Search, Geocoder등 다양한 기능들을 활용하다보니 사용자 1명당 1회 사용시 호출 최대치가 150 - 200회 정도가 나왔다.

Untitled

동료 개발자분이(@JaeSeoKim) Search의 경우 Service worker를 활용한 caching을 도입해보는 것을 추천해주셔서 바로 시도해보았다. 이미 PWA를 위해 service worker를 등록해 두었기 때문에 어렵지 않게 기능을 구현해 볼 수 있었다.

Geocoder를 사용하는 부분은 throttle, debounce등을 활용해서 호출 횟수를 제한했다.

Service worker caching

1. Service worker 등록하기

Next.js 어플리케이션에 Service worker를 등록하는것은 어렵지 않다. Service worker는 브라우저에 종속적이기 때문에 useEffect 훅으로 감싸준 후 등록가능한 기기에 대해서 sw.js 파일(파일이름은 원하는 이름으로 작성)을 등록해주면 된다.

useEffect(() => {
  if ('serviceWorker' in navigator) {
    const registInit = async () => {
      const registration = await navigator.serviceWorker.register('/sw.js');
      registration.waiting?.postMessage('SKIP_WAITING');
    };
    registInit();
  }
}, []);

정상적으로 등록되면 아래와 같이 개발자 도구에서 확인할 수 있다.

Untitled