React 뉴스피드 팀 프로젝트 2일차

규갓 God Gyu·2023년 11월 23일
0

프로젝트

목록 보기
22/81

금일 오전 11~12시까지 우리팀 회의 내용

내가 맡은 파트는 CRUD이기 때문에 팀원들과 상의하여 초기 세팅인 글자 길이 유효성 검사(제목 : 15자 이내 / 내용 : 100자 이내)를 세팅하였고, 카테고리별 게시물을 넣고 firebase에 db값을 저장시켜야하기 때문에 그러한 일련의 과정들을 팀원들도 사용하고 가독성 좋게 코드를 만들기 위해 모듈화를 진행하기로 하였다.

그러나 각자 맡은 파트가 다르다보니 어느 파트에서 어떤값을 가져와서 구현을 해야하는지 두루뭉실하게만 파악하고 정확히는 몰랐기 때문에 이렇게 자기가 맡은 파트에서 어떤 데이터가 필요한지 직접 기재해보았다.

CRUD

게시글 등록 시 firestore안에도 데이터 값이 저장되는건 무리없이 진행 되었으나,
수정, 삭제쪽에서 굉장히 많은 오류가 발생되었다.

게시글의 고유 Id값을 uuid로 받아와서 그 값을 찾아서 삭제를 시켜도 ui만 삭제되고 firestore엔 변동이 없었는데,

우리가 삭제해야하는 id는 데이터들이 담겨있는 문서의 id값이지 데이터 중 일부인 uuid가 아니였던 것이다.

그치만 어떻게 해야 저 값을 찾아서 삭제할 수 있을지가 굉장히 어려웠는데,
코드 내에서 getDocs를 진행할 때, 문서의 id를 받아와서 게시글을 만드는 배열에 그 값을 넣어놓고,
firestore의 데이터를 삭제하는 함수에 그 id값을 적으면 실제로 삭제가 되는 것이다.
간단히 말하면 지금 사진상 필드 추가에 적은 데이터 value값이 문서의 id값과 일치시키면, doc삭제하는 함수를 실행했을 때, 딱 그 문서의 id를 찾아서 삭제가 진행된다는 것이다.

그러기 위해선 우리가 작성한 코드를 먼저 살펴볼 필요가 있었는데,

최초 홈페이지 실행 시, doc.data()만 가져와서 posts 안에 넣어놨다면, doc.data()안에 없는 doc.id를 같이 setPosts안에 넣어줘야 그 값이 post안에 인식이 되는 것이다.

여기까지 다다랐는데 추가적인 문제가 또 발생하였다.

firestore 옛날 문법


여기 주석처리한 부분이 내가 검색해서 collection 'posts' 안에 있는 값을 삭제하는 문법이였는데, 저 문법을 사용하는 순간 아래쪽에 있는 filter로 ui삭제하는 기능도 구현이 안되고 console.log찍으면 error만 뜨는 것이다. 즉, try문이 에러가 존재한다는 것인데,
위의 deleteDoc(postRef)를 사용함으로써, 간단히 해결되었다.

여기서 프론트엔드가 문법이 휙휙 바뀌어서 굉장히 힘들다는게 이전 문법을 사용했다고 filter가 안되는걸 보고 이런 느낌이지 않을까 떠올리게 되었다.

삭제에만 엄청나게 많은 시간을 쏟았는데, 수정파트를 건드리다보니 또 삭제가 안되고 있고.....
나머지는 3일차에 작성해보겠다......

profile
웹 개발자 되고 시포용

0개의 댓글