특정 시간에 API로 받아온 데이터를 DB에 업데이트

목표: setInterval을 이용, 자동으로 일정 시간마다 새로 발견한 채널을 DB에 추가

---

1. 특정 시간에만 실행되는 함수를 Date() 를 이용하여 구현합니다. 

  const checkTime = (callback) => {

    const currentTime = new Date();

    if (currentTime.getMinutes() % 2 === 0) {

     callback()

    }

  };

=> 위의 예시에서는 getMinutes() 메서드를 이용하여 짝수 분(minute)이라면 callback()을 실행합니다.

2. 실행할 함수 myFunction을 만듭니다.

  const myFunction = () => {

    (async () => {

      const testSearchResult1 = await getLatestSearch("검색어, 50);

      const testChannelIdArray = getChannelIdBySearch(testSearchResult1);

      await axios.post("/api/channels/id", [...testChannelIdArray]);

    })();

  };

=> testSearchResult1는 검색결과를 50개, 

testChannelIdArray 는 검색 결과 중 중복되지 않은 channelId 를 할당합니다.

그리고 testChannelIdArray 배열을 서버로 보내도록 합니다.(post)

 

3. setInterval로 함수를 일정 시간마다 실행합니다. 

    setInterval(checkTime(postNewChannel), 1000 * 60);

=> 1분마다 checkTime 함수를 실행합니다.

 

이중 렌더링이 발생합니다. 

=> 두 번 실행되는 이유: 데이터를 가져오는 비동기 작업이 있을 때,

데이터가 로드되기 전에 컴포넌트가 한 번 렌더링되고 데이터가 로드된 후 다시 렌더링될 수 있습니다.

4. useEffect() 훅을 이용하여 한 번만 실행되도록 합니다.

  useEffect(() => {

    setInterval(checkTime(postNewChannel), 1000 * 60);

  }, []);

 => useEffect()에서 의존성 배열 "[]" 을 통해 비동기 작업으로 인해 발생하는 이중 렌더링을 해결할 수 있습니다.

비동기 작업이 끝난 뒤에 한 번만 실행합니다.

---

 

문제는 다른 곳에 있었지만 아무튼 해결 과정을 정리하며 복습