Today I Learned (TIL)

23.12.11 아웃소싱 프로젝트 를 마치며...

폼폼코 2023. 12. 11. 22:11
728x90
반응형

발표가 4시간 반정도 남은 시점 아직 댓글 삭제 기능 오류를 잡고있지 못하고있다...!!!

어제는 못찿았지만 오늘 다시보니 uuid값을 게시물이 받지 못해서 아닐까 싶어서 추가하니

 

 

 

 
 

삭제가 되었다가 바로 다시 댓글이 복구되어 버린다,

해결과정

팀원들과 같이 문제 점을 찾다가 발견한점은 바로 파이어 스토어 문서 이름을 이용해야 한다는 점이였습니다

 

const fetchData = async () => {
    try {
      const querySnapshot = await getDocs(collection(db, 'comments'));
      const firebaseData = querySnapshot.docs
        .filter((doc) => doc.data().storeId === storeId)
        .map((doc) => {
          const data = doc.data();
          return {
            commentId: data.commentId,
            nickname: data.nickname,
            bookShopName: data.bookShopName,
            createdAt: data.createdAt,
            updatedAt: data.updatedAt,
            content: data.content,
            userId: data.userId,
            docId: doc.id //문서 이름
          };
        });

      setFireData(firebaseData);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  const deleteComment = async (docId, commentId) => {
    try {
      // console.log(db);
      await deleteDoc(doc(db, 'comments', docId));
      setFireData((prevData) => prevData.filter((data) => data.commentId !== commentId));

      // fetchData();
    } catch (error) {
      console.error('댓글삭제 오류:', error);
    }
  };
 

원래 코드에서 추가된점은 파이어 스토어의 문서 ID(댓글추가할때마다 자동으로 고유값생성)

docId를 함수에 전달함으로써 파이어 스토어의문서값을 구분하여 삭제기능을 작동시킬수있었다

.

댓글 삭제시에 고유값을 뭘 넣을지 몰라 uuid를 사용했는데 진작 문서ID를 사용할걸그랬습니다...

(참고로 코드상에는 map으로 필드에 docid값이 들어갈줄 알았지만 파이어 스토어 상에는 들어가지않았습니다)

(그래서 return 값에 docId: doc.id //문서 이름 를빼보았다너 삭제버튼 작동안하는거보면 들어가기는 하나봅니다)

문서ID(docid) 가 잘들어가는지 삭제 버튼에 consol.log로 확인해보았습니다

잘들어오고 삭제가 되는걸 볼수있습니다 근데 이걸 보니 드는 생각이 그럼 uuid필요없는거 아닌가?

는 나중에 좀더 자세히 알아봐야겠습니다...

결과물

1. 서비스가 달성하고자 하는 목표

 

오프라인 책방이 점점 줄어드는 추세인 요즘 오프라인 책방을 찾는 사용자들을 위한 책방 알리미 앱

2. 핵심 기능 소개

사용자의 위치를 기반으로 지도를 보여주고, 사용자 근처에 있는 책방을 표시해준다.

 

3. 기술적으로 새롭게 배운 것에 대한 설명

react-naver-map 라이브러리 사용법을 알게 되었다. 

(지도를 렌더링하는 방법, 사용자의 위치로 지도를 포커싱하는 방법, 지도에 마커를 표시하는 방법 등등..)

 

KPT 회고

 

keep : 팀원들과의 협력은 계속 이어져 나갔으면 좋겠다 혼자했을때 막히는 부분들도

각자의 다양한 시선으로 바라보면 해결되간다.앞으로 점점 프로젝트에 규모도 커져감에 따라서 개인이 해결할수있는 영역이 점점 줄어들수도있기에 팀원들과의 커뮤니케이션과 협력은 계속해져 이어져나가야겠다,

 

probelm: 아직 개발에 익숙하지못해서 역할 분담이 한쪽으로 과했다

 

Try: 빨리 실력을 키워서 다른팀원들의 짐을 덜어줘야겠다,주기적인 복습과 강의를 통해 개발 실력을 더 키워나가야겠다

 

팀원들의 고충과 튜터님의 피드백

우리 팀이 개발을 진행하면서 어려웠던 점, 해결한 내용


*민 : [Admin.jsx] 단순 useState를 선언한 변수들이 너무 많았는데 코드 전체에서 다양하게 활용되는 변수들이다보니 어떻게 리팩터링을 하는 동시에 변수들을 적재적소에 활용할 수 있는지에 대한 전체적인 구조와 구현이 막막했음. 특히 한 번 custom hook으로 리팩터링 한 변수를 어떻게 다시 해체해서 가져올까, 해체하는 것이 효율적인 걸까 아니면 리팩터링을 안하는 게 효율적인 걸까 고민이 되었음
[EditorsPick.jsx] 여든 개가 넘어가는 데이터를 처음 다루다보니, map을 돌릴 때 각각의 key value들이 잘 들어가고 잘 추출되었는지를 확인할 때 개발자도구를 활용하는 것이 번거롭다는 것을 깨달았음
[EditorsPick.jsx] 외부 api의 디테일을 이해하지 못한 상태에서 react-query혹은 redux 형식으로 props를 중앙화 하는 것의 어려움을 느꼈음
[전체] 컴포넌트가 점점 많아지다보니, css 구조를 전체적인 관점에서 놓치게 되는 부분이 많아서 정렬을 하는 등의 어려움이 있었음

State가 너무 많을때 리액트 리듀서 훅 찾아보자 공식 훅임

 

*우 : 처음으로 네이버 맵 api를 사용해 봤는데 리액트에 특화된 api가 아니다 보니 react naver map 이라는 비공식 리액트 라이브러리를 사용해야 했고, 공식문서에 설명되어 있는 부분과 사용법이 달라 사용하는데 좀 어려웠다. 특히 맵에 저장된 데이터의 위치 정보로 마커를 표시하는 부분과 맵에 표시된 마커를 클릭했을 때 info window를 나타내는 부분에서 어려움을 겪었는데, 이 부분은 반복문을 사용해 빈 배열에 마커와 info window 정보를 push해서 해결해 주었다.

for문 보다는 forEach 쓰는게 좋음

(yarn json 실행후 다른 터미널에서 yarn start해야 작동함)

 

728x90
반응형