Supabase
Policy
정책 추가에서 SELECT, INSERT, UPDATE, CELETE 등에 권한을 설정할 수 있다.
팀원추가
팀원을 추가해서 다른사람들과 함께 프로젝트를 사용할 수 있다.
TypeScript
Omit<>
특정 값이 없을 때, 오류가 발생하는데 해당 제네릭에 들어간 값이 존재하지 않더라도 오류가 발생하지 않도록 만들어준다.
-> 특정 속성만 제거한 타입을 정의
Pick
Omit의 반대인 pick이 있다.
특정 타입에서 몇 개의 속성을 선택하여 타입을 정의한다.
React query
v3에서는 react-query지만 v4부터는 '@tanstack/react-query'를 사용한다.
useInfiniteQuery를 이용한 무한 스크롤
사용자가 스크롤 할 때마다 새로운 데이터를 가져온다.
useInfiniteQuery를 사용하여 무한 스크롤을 구현할 수 있다.
동작
queryfunction 실행 -> 매개변수(pageparam)값이 기본값(보통 1)로 넣어준다. -> cash context에 pages의 첫번째 요소로 추가해주고 pageParams의 첫번째 값으로는 hook memory로 들어간다. ->
getNextPageParam 실행 -> pages의 요소(lastPage)를 받아와서 다음 페이지 여부를 확인하고 nextPage값을 hook memory의 pageParam에 재할당 해준다. ->
nextPage의 값이 존재하면(undefined가 아니라면), hasNextPage값을 true로 초기화 해준다.
total_pages보다 현재 page가 작으면 다음 페이지를 불러온다.(다음 페이지가 있는 경우에만 fetchNext!)
- intersection observer
ref로 관찰 대상자를 지정하고 보이는 순간에 fetchNextPage를 호출하게 만들자.
Error
No QueryClient set, use QueryClientProvider to set one
query는 하나의 컴포넌트만을 감싸고 있어야한다.
또한 ts를 같이 사용하고 있기 때문에 '@tanstack/react-query'로 import해주어야 한다.
POST https://hzorceuynwmmwrhhrpwn.supabase.co/rest/v1/post 400
다른 분의 코드에서는 잘 되었는데 내 코드에서는 동작이 안됐다. env파일에서 환경변수 명이 달랐던 것을 통일해주니 해결되었다.
Supabase는 SQL 기반 데이터베이스와 더 밀접한 통합 및 높은 데이터 보안이 필요한 경우에 사용하는데 이번 프로젝트에서 채택하게 되었다. 비교적 덜 알려져 있어서 문서가 부족하지만 공식문서를 읽어보면서 활용해보면 될 것 같다.
query를 더 공부하고 설정을 더 효율적이게 적용하고
내일은 무한 스크롤 구현과 헤더, 다른 페이지 출력 구현해보자
