230626 리액트&파이어베이스 팀 프로젝트 시작

230626 리액트&파이어베이스 팀 프로젝트 시작

2주 간의 리액트 학습을 한 후 이번에는 리액트 팀 프로젝트를 진행하게 되었다. 이번 프로젝트의 주제는 뉴스피드로 sns나 블로그, 커뮤니티처럼 기본적인 게시글 crud와 사용자 화면을 구현하는 것이 목표이다.

저번 프로젝트까지 체계적으로 프로젝트 세팅을 하지 못하고 시작한 것이 아쉬웠는데, 이번에는 몇 시간에 걸쳐 프로젝트를 시작하기 위한 준비를 다같이 할 수 있었다. 이번에는 Firebase를 이용하는 프로젝트라서 restAPI를 쓰지 않고 sdk를 사용해 함수를 호출하여 사용한다.

 

게시글 가져오기 함수

export const getPostByPostId = async (postId) => {
  const q = query(collection(db, 'posts'), where('postId', '==', postId))
  const querySnapshot = await getDocs(q)
  const post = []
  querySnapshot.forEach((doc) => {
    post.push({ id: doc.id, ...doc.data() })
  })
  return post[0]
}

 

게시글 생성 함수

export const createPost = async (postData) => {
  return await addDoc(collection(db, 'posts'), {
    ...postData,
    created_at: new Date().getTime(),
  })
}

 

게시글 수정 함수

export const updatePost = async (id, updatedPost) => {
  const postRef = doc(db, 'posts', id)
  return await updateDoc(postRef, updatedPost)
}

 

게시글 삭제 함수

export const deletePost = async (id) => {
  const postRef = doc(db, 'posts', id)
  return await deleteDoc(postRef)
}

 

게시글에서 이미지를 사용하기 위해 이미지를 업로드하는 함수

export const uploadImage = async (postId, file) => {
  const imageRef = ref(storage, `images/posts/${postId}/${uuidv4()}`)
  await uploadBytes(imageRef, file)
  const downloadURL = await getDownloadURL(imageRef)
  return downloadURL
}