Supabase 테이블 추가하기
팀프로젝트에서 내가 구현할 부분은 이미지와 글 supabase에 저장하고
새로고침이나 렌더링 했을 때도 저장된 데이터를 불러오는 것이었다. (초간단하게 말하면...)
여러 테이블 중에서 posts 라는 테이블에서 supabase storage에 저장한 이미지와 글, id 등등 싹 불러와서 뿌려주고 있었다.
여기까지도 험난했는데 아무리 봐도 그 글을 올린 user를 보여줘야할 것 같은거다😩😩😩😩
간단한 듯 보이지만 문제점은 user의 데이터는 userinfo 테이블에, 내가 받아오는 데이터는 posts 테이블에 있었다.
단순한 생각으로 처음 써본 코드는 이랬다.
❌ 처음에 써본 틀린 코드
useEffect(() => {
const fetchNickname = async () => {
const { data: { user } } = await supabase.auth.getUser();
if (user) {
const { data, error } = await supabase
.from("userinfo")
.select("nickname")
.eq("id", user.id)
.single();
if (error) {
console.error("Error fetching nickname:", error.message);
} else {
setNickname(data.nickname);
}
}
};
fetchNickname();
}, []);
// 게시글 데이터 생성 및 Supabase에 저장
const { data: newPost, error: postError } = await supabase
.from("posts")
.insert({
nickname, // 닉네임 포함
contents: postContent,
img_url: img_url
})
.select("*")
.single();
// 아래 코드 생략대충 지금까지 썼던 코드들 잘 버무려서 코드 불러오고 넣어봤는데
Could not find the 'nickname' column of 'posts' in the schema cache이라는 오류가 떴다. 당연함. posts에 없어서 별도의 테이블에 있는걸 합쳐와야 위 코드에서 다른 오류가 뜨든 해결이 되든 했다...
별도 테이블을 합치는 방법을... 무한 구글링으로 알아본 방법은 총 3가지였다.
서로 다른 테이블에 있는 데이터 불러오는 법
1. 클라이언트에서 userinfo와 posts 테이블을 조인하여 가져오기
이런식으로 작성해서 닉네임을 posts 테이블에 저장하지 않고 userinfo에서 가져오는 방식이었다.
변경해본 코드
useEffect(() => {
const fetchPosts = async () => {
const { data, error } = await supabase
.from("posts")
.select(`*, userinfo(nickname)`) // ✅ 이 부분!
.order('created_at', { ascending: false })
.range(0, page * 10 - 1);
if (error) {
console.error("Error fetching posts:", error.message);
} else {
setDisplayedPosts(data);
}
};
fetchPosts();
}, [page]);될 것 같았는데... 구글링해도 대부분 이 방법으로 나오기도 했고
수파베이스 쪽 테이블을 건드리지 않고 구현할 수 있을 것 같아서 제일 써보고 싶었던 코드인데 계속 실패했다.
계속 nickname을 불러올 수 없다고 콘솔 에러가 뜨거나 user가 없다거나 그냥 뭔가 불러오는 방식이 내가 코드를 잘못 쓴 듯 하다.
2. 별도의 함수로 닉네임을 가져온 후 게시글에 사용하기
이것도 약간 팀장님이 그냥 가져다 쓰라고 했던 코드가 함수로 만들어서 쓰게끔 해주신 것 같아서 써봤는데 그 객체 안에 있는 user를 읽어올 수 없다고 뜨거나.. 아무튼 그랬다...
(함수로 가져와서 쓰는 방식은 프로젝트 마무리되면 다시 알아봐야겠다.)
3. 테이블에 직접 컬럼 추가하기
진짜 제일 안 하고 싶었지만... 선 구현 후 수정이 나으니까 급한대로 써서 해결했다.
👩🏻💻 직접 테이블 추가하는 방법
우선 Supabase에 들어가서 SQL Editor 을 클릭한다.
그 다음 위 사진처럼 코드를 작성해주고 Run 버튼을 누른다
1번 줄은 내가 추가할 테이블 / 2번 줄은 추가할 열?이름?이다.
따라서 나는 posts라는 테이블에 nickname 을 추가하는 것!
해당 테이블에 들어가면 이렇게 내가 입력한 nickname이 테이블에 잘 추가된 걸 볼 수 있다.
문제는 추가되기 전에는 이 값들이 저장될 수 없었으니까... 다시 회원가입이든 그렇게 해서 랜덤 닉네임을 만들어주었고
사진이랑 글을 포스팅하고 확인하니까 테이블에도 잘 반영되었다.
✅ 브라우저 화면 확인
css는 아직 손대기 전이지만 아무튼 닉네임, 내용, 사진까지 모두 잘 구현되었다...👏
3-1. 🚨 이 방법에서 주의해야할 사항!
닉네임을 가져오는 부분에서 (또 한번의) 문제가 있었는데 코드를 아무리 한줄씩 봐도 잘 굴러갈 것 같은데 안 보이는거다...
닉네임을 가져오는 코드에서 setNickname(data.nickname); 으로 줬었는데 아래처럼 수정하니까 해결되었다.
if (data && data.length > 0) {
setNickname(data[0].nickname);
} else {
console.error("No nickname found for the user.");
}알고보니 DB에서 데이터를 배열로주니까 data[0] 이 부분이 필요했던것..!
분명 스탠다드반에서도 배열 어쩌구 했는데 고새 까먹어버렸다 허허
완벽하게 마음에 드는 방식으로 구현한게 아니라 아쉽지만 일단 해야하는 기능구현은 어느정도 끝나서 다행이다.
기간 안에 만드는 것도 중요하니까 완성하고 강의랑 구글같은 곳도 찾아보면서 리팩토링 해바야지...
악악 남은 팀플 기간에도 큰 에러없이 잘 합쳐지고 그랬음 좋겟다ㅜㅜㅜ
참고자료 출처
