피드백 스타일 : [피드백 희망] Supabase 활용 프로젝트에 대한 피드백을 받고 싶어요!
**🔗 Github: https://github.com/mintmin0320/provincial-minds 🔗 Deploy: https://provincial-minds.vercel.app/**
https://provincial-minds.vercel.app/
Q: React Query + Next (app) 조합으로 개발을 진행했으며, shared > provincial, urban(단순 폴더명)에서 hook으로 supabase 함수 호출 + useQuery, mutation을 사용하고 있습니다. 잘 사용하고 있는지 궁금합니다!
A: 단순 폴더 구조보다는 전반적인 프로젝트 피드백을 드리는게 더 도움이 될 것 같아서 피드백들을 좀 정리해보았습니다.
shared 폴더를 활용해서 provincial(지방)과 urban(도시)의 API 관련 쿼리들을 hook들로 잘 정리해두신게 상당히 깔끔하게 느껴집니다. features 폴더도 기능별로 잘 분리가 되어있고 app 폴더에서 해당 feature들을 활용하도록 해서 코드들이 전반적으로 잘 정리되어있는 것 같아요.
코드를 한참동안 살펴보았지만 아쉽게도 크게 피드백을 드릴 부분은 없어보입니다… 😅 이미 코드의 역할이 잘 분리되어 있고 react query도 잘 사용하고 계신 것 같아요. transit의 경우 user가 생성되는 시점에 삽입되는 데이터라서 별도로 react query key를 invalidate 시킬 일도 없어보입니다.
한가지 아쉬운 점이 있다면, 정확한 컨텍스트 없이 shared 폴더 내에 provincial과 urban을 분리해놓은 이유를 잘 알기 어렵다는 점이었어요. 이 부분은 문서화 또는 코드내 주석을 통해서 설명을 작성해주시면 더 좋은 포트폴리오가 될 것 같습니다!
시간이 되시면 README.md에 해당 프로젝트의 코드가 어떻게 구성되어 있으며, 레이어 분리를 어떤 의도로 진행했는지를 design doc처럼 작성해보시는 것도 좋을 것 같아요.
Q: React Query에서 제공하는 useSuspenseQuery 훅을 사용하고싶은데, (isLoading을 Suspense로 분리해 선언적으로 처리하고 싶어요..) 'useGetTransitList' 훅과 같이 사용할 경우 supabase 함수가 'use server'로 인해 적용이 불가능한데.. 혹시 어떤식으로 관리하면 좋을까요? -> 요약: React Query와 Supabase 조합으로 어떻게 관리하면 좋을지 궁금합니다!
A: useSuspenseQuery를 제대로 사용해본적이 없어서 답변이 될지는 잘 모르겠어요 😅 당장 두가지 방법이 떠오르는데요,
첫번째 방법은 react-query 없이 server action을 그대로 사용하는 방법입니다. useGetTransitList를 사용하는 컴포넌트를 서버 컴포넌트로 정의하고 해당 컴포넌트를 Suspense 내에 넣어 처리하는 방식이에요. 이 케이스에서 꼭 react query를 사용해서 구현을 해야할까… 한다면 아닐 것 같아서 이 방식을 제안드립니다.
두번째 방법은 RLS가 Enable된 상태에서 supabase browser client를 사용하는 방법입니다. browser client를 사용하게 되면 말 그대로 ‘use server’가 필요없어집니다. 제일 명확하게 해결할 수 있는 방법이지만, ‘use server’가 있는 server action을 useSuspenseQuery에서 사용할 수 있는 방법에 대한 답변은 아닌 것 같아요.
우선 위 두가지 방법을 시도해보시고 잘 안되실 경우 슬랙을 통해서 질문 주시면 제가 더 리서치하고 답변을 드리도록 하겠습니다 😉 혹시 이 문제에 대해서 잘 아는 분이 계시다면 슬랙 혹은 채팅에 답변 남겨주시면 감사하겠습니다.