[Supabase] supabase.store insert 오류 해결

정말.. 오랜시간 헤맸다 🥹

supabase를 이용해 게시글 작성 기능을 만들고, 이미지 첨부 기능을 만드는 중에 계속 아래와같은 오류가 발생했다

오류 1

Invalid Key: public/[objec File]

공식문서를 보니 기능을 사용하는데 필요한 인자가 아니라 다른 인자를 넘겼는지 확인해보라는 내용이 있었다

처음에는 [object File] 이 아닌 다른 타입의 인자가 필요한 건지 헤맸는데.. 생각보다 너무 간단한 문제였다

supabase store에서 저장될 File path를 넘겨줘야하는데 (ex. public/파일명 이라고 넘겨주면 지정한 bucket > public 폴더에 지정한 파일명으로 저장됨) 파일 경로에 들어갈 수 없는 문자가 포함돼있어서 문제가 된 것이었다

const fileName = `${Date.now()}-${crypto.randomUUID()}}`; // 실수
const fileName = `${Date.now()}-${crypto.randomUUID()}`;  // 해결

실수로 }를 하나 더 써줘서 randomUUID} 라는 문자열이 경로에 포함돼 오류가 났다

다음은 권한오류였다. 난 분명 public으로 지정해줬는데..

알고보니 조회는 public인데 insert 등은 따로 권한을 설정해줘야한다고 한다.

403 unauthrized

storage > policy 에서 select, insert, update, delete에대한 권한을 각각 지정해줘야한다.

나는 지금 학습용 프로젝트라서 전혀 제약이 필요없기 때문에 위처럼 지정해줬고, 그럼 정말 public하게 기능을 실행할 수 있다.

처음엔 supabase에서 제공해주는 템플릿으로 권한을 설정해뒀었는데 그건 어느정도 사용자 인증이 돼야하는 것 같다.