불과 지난 프로젝트 할 때 supabase 테이블 RLS 설정 건으로 새로 배우고 고생했었는데, 업데이트가 된 모양이다... policy 설정하는 부분이 뭔가 바뀐 모양이다....^^
🌸첨부 이미지 storage에 upload하기
이건 지난 프로젝트 때 RLS 설정 건으로 한 번 끝내주게 고생했기 때문에 별 어려움 없이 코드를 작성할 수 있었다. 그 때는 그림그리기 라이브러리의 에디터를 사용해 그린 그림 정보를 Blob 형식으로 구성해서 upload하는 로직이었고, 이번에는 그렇게까지 복잡하지는 않고 사용자가 file input에 첨부한 이미지를 upload하면 되는... 비교적 간단한 로직이 필요하다.
미리보기 이미지를 클릭하면 파일 선택창이 열리고, 원하는 이미지를 첨부할 수 있다.
그럼 이미지의 임시 url을 활용하여 선택된 이미지를 미리보기 해준다. 이미지 영역은 정사각형이지만 선택된 이미지의 비율이 깨지지 않도록 div 안에 들어가는 이미지의 스타일 설정을 해주었다.
const handleSubmitBtn = async () => {
if (!level) {
alert('난이도를 선택해주세요.');
return;
}
if (!title || !info) {
alert('제목과 설명을 입력해주세요.');
return;
}
try {
let imgUrl = null;
if (file) {
const fileName = generateFileName(file);
imgUrl = await uploadThumbnailToStorage(file, fileName);
console.log('스토리지에 이미지 업로드 성공', imgUrl);
}
const newQuiz = {
creator_id: 'cocoa@naver.com',
level,
title,
info,
thumbnail_img_url: imgUrl || 'https://via.placeholder.com/200x200'
};
insertQuizMutation.mutate(newQuiz, {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['quizzes'] });
toast.success('퀴즈가 등록되었습니다.');
router.replace('/quiz-list');
}
});
} catch (error) {
console.log('스토리지에 이미지 업로드 중 에러 발생');
}
};이미지를 선택하지 않으면(imgUrl === null) 기본 이미지 주소를 보내고, 선택한 이미지가 있으면 해당 이미지를 storage에 올린 뒤 storage에서 이미지 주소를 받아온다.
그런 다음 작성자id, 난이도, 제목, 설명, 썸네일로 newQuiz를 구성하여 quizzes 테이블로 insert하는 로직이다.
storage의 해당 버킷 RLS 설정은 모든 사용자가 select, insert, delete, update할 수 있도록 해주면 별탈없이 이미지를 storage에 upload 할 수 있다! 여기까지는 스무스하게 진행되었다.
🌸quizzes 테이블에 요소 insert하기
- 테이블 권한 설정
이 부분.. 원래 여기 클릭하면 빠른 policy 만들기/커스텀 policy 만들기를 선택할 수 있는 창이 떴었는데 뭔가 바뀌었다... 예전이랑 다르다. 어쨌든 나는 새로운 요소를 insert하고 싶은 거라서 insert에 관한 policy를 추가해주었다.
- Primary Key 자동생성하기
const newQuiz = {
creator_id: 'cocoa@naver.com',
level,
title,
info,
thumbnail_img_url: imgUrl || 'https://via.placeholder.com/200x200'
};이렇게 newQuiz를 생성해서 보내줬더니 자꾸 NOT NULL 속성을 갖는 'id'값이 null로 들어와서 처리할 수 없다는 오류 메시지가 떴다. 새로 작성되는 게시글의 id는 작성 시에 알 수 없고, 게시글이 데이터베이스에 올라갈 때 자동으로 생성된 이후부터 참조 가능한데 왜 이런 에러가 뜨는걸까? 🤔🤔
ㅇ ㅏㄴ ㅣ id는 네가 만들어주는거지 내가 써서 보내주는 게 아니잖아~~!!
알고보니 팀원들이랑 테이블 초기 설정할 때 테이블, 컬럼을 생성했다 삭제했다 하는 과정에서 저기 Default Value부분에 있었던 랜덤 아이디 생성 함수가 지워져서 그런 모양이다.
gen_random_uuid()를 Default Value에 입력해줬더니 해당 오류는 더이상 뜨지 않고 정상적으로 게시글이 테이블에 insert된다!!! 👍🏼👍🏼👍🏼
