유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

[FE] 리액트 - 32강: 실전 CRUD, Supabase로 구현하는 토픽 수정(Update) 기능

구디사는 개발자 9Diin

2025. 9. 8.

0

#frontend
#backend
  • Supabase의 update 메서드를 활용하여 기존 토픽 데이터를 수정하는 핵심 기능을 구현했습니다. 🔄
  • status 컬럼을 추가하여 토픽의 임시 저장(temp)과 발행(publish) 상태를 명확히 구분하고 관리하는 로직을 도입했습니다. 🏷️
  • 발행(handlePublish) 시에는 제목, 본문, 카테고리, 썸네일 등 모든 필수 필드의 유효성을 엄격하게 검사하고, 저장(handleSave) 시에는 덜 엄격한 검사를 적용했습니다. 🛡️
  • supabase.from('topics').update({ ...데이터 }).eq('id', topicId) 구문을 사용하여 URL 파라미터에서 가져온 topicId에 해당하는 레코드를 업데이트했습니다. 🚀
  • useParams 훅을 통해 URL에서 토픽 ID를 정확히 추출하고, 이를 Supabase 업데이트 쿼리의 조건으로 활용하는 방법을 시연했습니다. 🔗
  • 블록 기반 에디터의 콘텐츠를 Block[] 타입으로 관리하고, setContents 프롭스를 통해 에디터의 변경 사항을 상태와 동기화하는 방법을 구현했습니다. ✍️
  • useParams 사용법 오류 및 썸네일 유효성 검사 로직 수정 등 실제 개발 과정에서 발생할 수 있는 디버깅 상황과 해결 과정을 보여주었습니다. 🐛
  • 썸네일(파일) 업로드 기능은 다음 강의에서 Supabase 스토리지를 활용하여 구현할 예정임을 예고했습니다. 🖼️

Recommanded Videos