데이터가져오기 변경....TIL

원래는 react-query를 사용해서 openAPI를 가져오려고 했으나 그것도 cors에러로 프록시 서버를 끼고 작업을 하고 있었다.

query를 실행하면 수시로 데이터를 가져오는데 데이터가 수가 많아서 서버가 자꾸 요청이 많타고 정지되는 경우가 있었다.

axios로 한번 가져오면 그 가져온 데이터로 props를 내려서 필요한 데이터만 리스트를 뽑고 있던 상황이였는데

(axios가 불편하진않았다. 실시간으로 데이터가 변경되는 게 아니고 언제 불러와도 같은 데이터이기 때문에 문제가 없다고 생각을 했다.)

더보기버튼을 구현이 생겼고 또 나중에 이 리스트를 눌렀을때 비교할 수 있도록 데이터를 스테이징하는 작업이 필요했다.

 

그럼 그 제품마다 고유한 id가 있어야하는데 openAPI에는 id값이 없었다 ㅠㅠ 그래서 이 상품이 내가 선택한 상품인지 확인하기가 어려웠다.

 

그래서 openAPI를 파이어베이스에 내재화를 한 상태였고 그 파이어베이스의 데이터를 가지고 다시 작업을 시작하기로했다.

데이터를 불러오고, 어느정도 기능이 완성된 상태에서 내재화가 성공했었고 내 작업은 다시 되돌리기에 시간이 너무 빠듯해서 놔두기로 했었던 상태였는데 이렇게 되었다. 속으로 엄청 급했다 ㅠㅠ 계속 조마조마한 상태로 작업을 진행했다.(나중에되니까 엄청 피곤했음ㅋㅋ)

 

늦은만큼 서둘러야하므로 파이어베이스 작업을 시작했다.

  const FetchDepositBaseList = async () => {
    const querySnapshot = await getDocs(collection(db, "DEPOSIT_BASE_LIST"));
    const depositBaseArray = [];
    querySnapshot.forEach((doc) => {
      const newProduct = {
        id: doc.id,
        ...doc.data(),
      };
      depositBaseArray.push(newProduct);
    });
    setdepositbaseList(depositBaseArray);
  };

이렇게 해당하는 파일을 가져와서 state에 넣은 다음 그 state를 가지고 props 내리듯이해서 기능을 완료했다.

기존에 props으로 가져오고 있던 상태라 저렇게 가져오는 방법만 바꿔주니까 금방 해결을 되었지만 좀 더 손을 볼 필요가 있을 것 같다 😎