팀프로젝트 회고(22/07/19), in promise, TypeError: ref.map is not a function

이영주·2022년 7월 19일

오류 팀프로젝트 회고

오늘도 여러 에러와 의문 투성이들과 싸우느라 고생한 날이었다.
고생한 과정은 기록해야 뿌듯하지!!

error의 타입

타입스크립트에 타입은 안적고 거의 자바스크립트로 하다가 뒤늦게 불이 난걸 깨닫고 타입을 작성했다..ㅎ

수업시간에도 해결이 된 것을 본 적이 없는 오류였는데 이 친구 에러라서 빨간 불이 당연한건가..는 말이 안되지

다른 타입들은 거의 interface를 사용해서 조금 복잡?하게 쓰는데 검색해보니까 error의 타입은 매우 간단했다!

오류는 오류다라고 강조하는 듯한 (error as Error)로 작성하면 끝~~

in promise

매장 리스트에서 더보기 버튼을 클릭하면 추가적으로 8개씩 나오는 것을 표현하고 싶었다.
무한스크롤을 이용해서 더보기 버튼에 함수를 걸어주기까지 완벽하다고 생각했다.

const loadFunc = () => {
    if (!data) return;
  
    fetchMore({
      variables: { page: Math.ceil(data.fetchCafes.length / 8) + 1 },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult.fetchCafes)
          return {
            fetchCafes: [...prev.fetchCafes],
          };

        return {
          fetchCafes: [...prev.fetchCafes, ...fetchMoreResult.fetchCafes],
        };
      },
    });  
  };

사실 성공하지 않은 것은 아니라고 생각한다.. 왜냐면 더이상 등록된 카페가 없다는 문구가 나왔기 때문에! 하지만 왠지 개발자만 봐야될 것 같은 빨간색 오류.. 이 모습을 사용자한테 보여주는건 정말 아니지ㅎㅎ

우선 백엔드에서 작성한 오류인데 내가 작성한 적도 없는데 나온걸 보니 나도 적어줘야겠다 싶어서 try ~ catch를 추가했고
in promise라는 에러를 발견했는데 이것은 비동기로 처리하는 애니까 동기적으로 처리할 수 있는 async ~ await를 써주면 된다고 생각해서 추가했다.

const loadFunc = async () => {
    if (!data) return;

    try {
      await fetchMore({
        variables: { page: Math.ceil(data.fetchCafes.length / 8) + 1 },
        updateQuery: (prev, { fetchMoreResult }) => {
          if (!fetchMoreResult.fetchCafes)
            return {
              fetchCafes: [...prev.fetchCafes],
            };

          return {
            fetchCafes: [...prev.fetchCafes, ...fetchMoreResult.fetchCafes],
          };
        },
      });
    } catch (error) {
      Swal.fire({
        icon: "warning",
        title: (error as Error).message,
      });
    }
  };