개발일지 - 일정시간마다 api요청 보내기(폴링)

나는 실시간으로 유저의 위치를 서버에 보내야 한다.
그래서 어떻게 할까 생각을 해보았다.

      const result = location({
        variables: {
          location: {
            lat: position?.coords.latitude ?? 36.4455,
            lng: position?.coords.longitude ?? 126.12321,
          },
        },
      });

일단은 현재 위치를 보내는 api 요청을 작성하였다.
이제 실시간으로 저 api 요청을 계속 보내야 한다.

그래서 가장 먼저 생각한 방법이 setInterval 메소드를 이용하는거다

   const interval = setInterval(() => {
     const result = location({
       variables: {
         location: {
           lat: position?.coords.latitude ?? 36.4455,
           lng: position?.coords.longitude ?? 126.12321,
         },
       },
     });
     console.log(" 현재 위치를 보냈음", result);
   }, 10000);

이렇게 10초마다 api 요청을 보내도록 하였다.
하지만 문제가 생겼다.
api요청을 보낼때 마다 한번에 aip 요청을 보내는 횟수가 늘어났다.
즉 무한루프 같은 현상이 일어났다.

왜 그런지 이유를 찾아보다가 setInterval을 잘못 사용하면 무한루프가 발생한다고 한다.
왜나하면 setInterval은 일정한 시간마다 지정된 콜백 함수를 반복적으로 호출하는 함수이다.
그래서 콜백 함수가 실행되는 동안에는 JavaScript 엔진이 다음 코드를 처리하지 않고, 콜백 함수가 완료될 때까지 대기한다.
그러므로 setInterval을 잘못 작성하거나 콜백 함수에서 실행되는 코드가 예상치 못한 에러를 발생시키면 JavaScript 엔진은 계속해서 콜백 함수를 실행하기 때문에 무한루프가 발생한다.

이것을 예방하는 방법으로는 clearInterval 함수를 사용하여 setInterval 함수의 타이머를 중지시킨다.

  useEffect(() => {
    const interval = setInterval(() => {
      const result = location({
        variables: {
          location: {
            lat: position?.coords.latitude ?? 36.4455,
            lng: position?.coords.longitude ?? 126.12321,
          },
        },
      });
      console.log(" 현재 위치를 보냈음", result);
    }, 10000);

    return () => {
      clearInterval(interval);
    };
  }, []);

이렇게 한번 마운트될 때 요청을 보내기 위해 useEffect안에 넣었다.
그리고 setInterval 함수를 이용하여 10초마다 api요청을 보내도록 하였다.
그리고 clearInterval 함수에 interval 변수를 전달하여 타이머를 중지시킨다. 즉 컴포넌트가 마운트되거나 업데이트될 때마다 새로운 타이머가 생성되지 않게 방지해준다. 그리고 기존의 타이머를 유지시킨다.

이렇게 api요청을 일정시간마다 보내는 방식을 폴링이라고 한다!!