[TIL] 230809

이세령·2023년 8월 9일

TIL 심화프로젝트

TIL

목록 보기

79/118

flat()

array.flat() -> 이중배열을 단일 배열로 만들어준다.

React query

ReactQueryDevtools

qeury 개발자 도구를 사용하기 위해 먼저 yarn add @tanstack/react-query-devtools를 하고 queryClient가 있는 곳에 컴포넌트를 적용해주면 된다.

const App = () => {
  return (
    <>
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools initialIsOpen={false} />
        <Router />
      </QueryClientProvider>
    </>
  );
};

이렇게 하단에 데이터를 살펴볼 수 있는 개발자 도구가 생성된다.
개발환경에서만 보인다

select 옵션

queryFn을 통해 반환 받은 값을 가공할 수 있다.
하나의 배열로 만들기 위해 다음과 같이 정제해줬다.

select: (data: any) => {
      return data.pages.flat();
    }

중간에 데이터가 늘어나서 많아 보이지만 flat을 통해 합쳐줄 수 있다.

무한 스크롤 구현하기

페이지 데이터를 10개씩 가져오기 위해 api를 다음과 같이 수정해주었다.

const getPosts = async (pageParam: number): Promise<PostType[]> => {
  const { data } = await supabase
    .from('post')
    .select('*')
    .range(pageParam * 10, (pageParam + 1) * 10 - 1);
  return data as PostType[];
};

supabase에서는 range를 통해 범위 설정을 할 수 있기에 pageParam값에 따라 10개씩 불러오도록 만들어준다.

페이지 데이터

페이지 개수를 계산하기 위해 함수를 수정해주었다.

const getPosts = async (
  pageParam: number
): Promise<{ posts: PostType[]; page: number; total_pages: number; total_results: number | null }> => {
  const { data } = await supabase
    .from('post')
    .select('*')
    .range(pageParam * 10 - 10, pageParam * 10 - 1);
  const { count } = await supabase.from('post').select('count', { count: 'exact' });

  // 총 페이지 개수 계산
  const total_pages = count ? Math.floor(count / 10) + (count % 10 === 0 ? 0 : 1) : 1;

  return { posts: data as PostType[], page: pageParam, total_pages, total_results: count };
};

총 데이터의 개수를 count로 입력받고 count가 null이면 1을 반환하고 아니라면 페이지 개수를 계산하여 total_pages에 값을 초기화 해주었다.

행 개수 가져오기

const { data, count } = supabase
  .from('테이블 이름')
  .select('*', { count: 'exact', head: true })

이런식으로 테이블의 행 개수를 불러올 수 있다.

Error

400

// 데이터 개수 조회
const getDataNumber = async () => {
  const { count } = await supabase.from('post').select('count', { count: 'exact' }).single();
  return count;
};

count 값을 불러오는데 400 error가 발생했는데 single() 메서드를 지워주니까 해결되었다.

Select Type error

타입 에러가 발생하여 임시적으로 select를 사용하지 않고 return문을 구성해주었다.

return (
    <>
      {posts?.pages
        .map((data) => {
          return data.posts;
        })
        .flat()
        .map((post) => {
          return (
            <>
              -----------------------
              <div key={post.postid}>
                {post.postid}
                <div>user id: {post.userid}</div>
                <div>태그: {post.tag}</div>
                <div>제목: {post.title}</div>
                <div>작성자: {post.name}</div>
                <div>내용: {post.body}</div>
                <div>카테고리: {post.category}</div>
                <div>작성날짜: {post.date}</div>
              </div>
              -----------------------
            </>
          );
        })}
      <div
        style={{
          textAlign: 'center',
          backgroundColor: 'green',
          color: 'white',
          width: '100%',
          height: 50
        }}
        ref={ref}
      >
        Trigger to Fetch Here
      </div>
    </>
  );