팀 프로젝트 - 불량데이터 검사

오늘의 문제

• DB에 저장한 데이터 중 pixabay에서 온 이미지 url이
  비어있는 문제

문제 해결

• DB에서 데이터를 가져올 때
  클라이언트단에서 데이터를 한번 검사하는 함수 작성
• 만약 해당 이미지로 GET 요청 시 response가 200이 아니라면
  제외 후 UI 생성

접근 방법

• 이미지 url이 비어있을 때.
  어떻게 사용하기 전 미리 알 수 있을까 고민했다.
• 우리가 받아 온 image url로 GET 요청을 했을 때
  응답이 200이 아닌 다른 것으로 올까? 하여 시도해봄.
• 실험해본 결과 불량 데이터는 페이지가 뜨는데 400 error가 떳다!

해결 과정

1. 이미지 존재 여부를 파악하는 함수 작성

const checkImageExists = async (url: string) => {
    try {
      // 이미지 url에 get 요청 후 그것에 대한 응답을 변수에 담는다.
      const response = await fetch(url);
      return response.status; // 응답 상태코드를 반환 (200,400 등..)
    } catch (error) {
      console.error('Error checking image existence:', error);
      return false; // 에러가 발생하면 이미지가 없다고 가정
    }
  };

2. DB에서 받아온 이미지 배열을 검사하기 위한 함수 작성

  // DB 데이터를 받아 온 배열을 인자로 넣음
  const isExist = async (fbData: fetchedItem[]) => {
    // 데이터를 순회하며 imgPath에 GET 요청을 시도하며
    // GET 요청의 결과가 200 이라면 해당 아이템을 반환
    // GET 요청의 결과가 200이 아니라면 null을 반환
    // 위의 결과값들로 proceed라는 변수에 새 배열을 생성
    const proceed = await Promise.all(
      fbData.map(async (item: any) => {
        const result = await checkImageExists(item.imgPath);
        if (result === 200) return item;
        else return null;
      })
    );

    // 최종 반환 값은 검사가 끝난 배열에서 null 값을 제외한 배열을 반환
    return proceed.filter((el) => el !== null);
  };

찝찝한 부분

• 데이터를 저장할 때 이 과정을 실행했다면
  이후 데이터를 사용할 때 로딩시간이 조금은 단축되지 않았을까 싶다🥲

느낀점

• 이번 프로젝트는 트러블 슈팅 할 것들이 많다.
  새삼 재밌다.