바이낸스 api 호출하여 시가총액 50 차트 보여주기

이전 포스팅은 하나의 차트를 보여주는 역할이었는데 홈으로 들어왔을때 차트를  시가총액 순위로 코인을 나열해준다

사용자가 사이트를 들어왔을때 처음 마주하는 화면인데 문제가 있었다

그것은 바로 코인 데이터가 일정하지 않고 실시간이 아닌 1분 단위로 데이터를 받아오는 coingecko 를 사용하기 때문인데 이러면

홈과 차트에서의 데이터가 달라 ux적 경험을 망친다고 생각이 들어 binaceApi로 api를 바꾸기로 결심했다

 

 

 

허나 해당 홈을 보면 데이터는 실시간으로 변동하지만 이미지를 불러오지 못해 깜빡거림 현상이 발생한다

해당 호출을 막기 위해

이렇게 임의로 써봤지만 그래도 404로 도배가 되었다

왜 이런가 궁금해서 원인을 찾아본 결과 

 

coin.image가 존재하지 않아서 undefined거나 잘못된 URL이라면,
이미지가 로드 실패할 때마다 다시 src = "/placeholder.svg"로 바꾸는데
이게 또 실패하면 (예: 아직 캐시 문제로 404면) 계속 반복됩니다 그렇기에 해당 문제를 

onError={(e) => {
    const img = e.target as HTMLImageElement;
    if (img.src !== window.location.origin + "/placeholder.svg") {
      img.src = "/placeholder.svg";
    }
  }}

 

이렇게 하면 placeholder로 한 번만 교체하고
반복 호출이 막혀서 루프/404 폭주 방지를 시켜주었다