🥞 오늘 한 일
- 뉴스피드 프로젝트
- 마이페이지 프로필 사진 변경 기능 구현
- 마이페이지 내 게시물 보기 기능 구현
- 각 게시물에 작성자 프로필 사진 구현
- 프로필 사진 미등록 시 기본 프로필 사진으로 등록 구현
- 스탠다드반 수업
- Supabase Authentication
🍽️ 문제 해결
마이페이지 프로필 사진 변경 기능
step 1
supabase update 기능이 되지 않아서 오전의 시간을 전부 할애하여 문제를 해결해보다가, 도저히 답이 나오지 않아 튜터님을 찾아뵙고 해결책을 함께 찾는 시간을 가져보았다.
"record "new" has no field "updated_at"
찍어봤을 때 이런 오류가 나서, 대체 이게 뭔지에 대해 이야기를 나누다가, supabase에 sql 데이터가 있는 것을 발견했다.
그래서 일단 튜터님이 긴급한 해결책(?)으로 updated_at 칼럼을 하나 만들어보라고 하셨는데, 기적적으로 해결이 되었다!
일단 급한 불은 꺼졌고, 팀에 돌아가 팀원분들께 여쭤보니 기존에 알고 계셨던 방식으로 sql을 사용해 profiles 테이블을 제작하신 거였다. 그러다 필요 없다고 생각하신 부분을 삭제해서 업데이트가 제대로 되지 않았던 것이다!
때문에 그냥 해당 sql 및 테이블을 삭제하고 새로 만드는 방식으로 해결했다. 오류에 관해서는 튜터님께서 굳이 공부할 필요 없다고 하셔서 이 문제는 그렇게 마무리지었다.
step 2
const handleImageChange = async (event) => {
event.preventDefault();
const fileObj = event.target.files[0];
setProfileObj(fileObj);
const { data } = await supabase.storage.from("avatars").upload(`avatar_${Date.now()}.png`, fileObj);
setProfileUrl(`https://piuvdfomheejtudrutht.supabase.co/storage/v1/object/public/avatars/${data.path}`);
await supabase
.from("profiles")
.update({
image_url: `https://piuvdfomheejtudrutht.supabase.co/storage/v1/object/public/avatars/${data.path}`
})
.eq("userId", userId)
.select();
};현재 화면에 변경된 이미지를 적용시키고 supabase의 profiles에도 업데이트하는 함수. 우선 해당 파일을 supabase에 업로드하고, 해당 파일의 주소를 profileUrl에 적용시킨다. 이렇게 되면 현재 화면의 이미지가 변경된다. 그 다음 supabase의 해당하는 userId를 가진 데이터에 image url을 업로드한 파일 url로 변경시킨다.
마이페이지 내 게시물 보기 기능
// feed.js
export async function getNewsfeedByUserId(userId) {
const { data: newsfeed, error } = await supabase.from("newsfeed").select("*").eq("userId", userId);
if (error) throw error;
return newsfeed;
}기존에 메인 페이지의 로직에서, 리스트를 가져오는 함수만 살짝 변경했다. 현재 로그인된 userId와 같은 userId를 가진 게시물만 supabase에서 가져오는 방식으로 제작했다.
프로필 사진 미등록 시 기본 프로필 사진으로 등록
// Description.jsx
async function getDefaultImage() {
const { data } = supabase.storage.from("avatars").getPublicUrl("default-user-profile.png");
setImageUrl(data.publicUrl);
}
useEffect(() => {
getDefaultImage();
}, []);프로필 사진을 등록하지 않으면 기본 프로필 사진을 등록해야하기 때문에, 일단 처음에 렌더링 시 imageUrl state에 supabase 내 기본 프로필 사진을 가져와 넣어준다. 그 다음엔 사진을 등록할 경우에만 imageUrl이 바뀌도록 했다.
🍪 배운 것
스탠다드반 수업
- Supabase 회원가입, 로그인, 회원정보 관리 방법
- 회원가입
- 회원정보(프로필) 변경
- 로그인/로그아웃
- 인가가 필요한 CRUD api 요청 처리 패턴
- 회원탈퇴
🍴 돌아보기
정신 없는 날이었다. 오늘 매니저님께서 즐기는 자를 이길 수 없다는 말을 다시 상기시켜 주셨다. 정말 맞는 말이다. 코딩을 즐기자. 잘 되면 되는대로 즐기고, 잘 안 되더라도 안 되는대로 즐기자. 정신이 없다면, 그 정신 없음마저도 즐기자. 길게 보자.
🍳 내일 할 일
- 뉴스피드 프로젝트
- 게시물 프로필 사진 현재 사진으로 렌더링되도록 하기
- 게시물 작성 시 새로고침하면 현재 유저정보 못 가져오는 문제 해결
