23.12.08 (리액트 파이어스토어 댓글기능)

리액트에 파이어 스토어 데이터를 가져오는 중이다

getDocs를 통해 db(데이터 베이스)에있는 "comments"컬렉션 데이터를 가져온다

형식에 맞춰 data에 할당후 빈배열인 "파이어베이스자료" 에 넣어준뒤 setfiredata 를 이용해 다시 넣어준다

useState를 이용하여 받은 데이터는 firedata에 담겨있고 map을 이용하여 리액트 화면에 표시해준다

string형태가 아닌 타임스태프 형식인 시간은 toDate로 날짜로 변환한뒤 toLocaleString로 현지화 시켜줍니다

<p>만든시간: {data.createdAt.toDate().toLocaleString()}</p>

 

이제 파이어 스토어에 입력한값도 잘들어가고있습니다

실시간 화면 공유하면서 테스트 페이지에 작성한 코드를 옮기고 있다

무사히 작동하는 모습 처음에는 파이어 스토어 권한설정을 바꿧더니 권한 오류가 떠서 댓글을 추가하지못했다

웬만하면 파이어 스토어 규칙 설정은 건들지 말자

div>
          <form
            onSubmit={(event) => {
              event.preventDefault();
              addComment();
              setCommentContent('');
            }}
          >
            <p>닉네임</p>
            <textarea value={commentContent} onChange={(event) => setCommentContent(event.target.value)} />
            <button type="submit">추가</button>
          </form>
        </div>

 

중간에 댓글 추가기능이 먹히지 않아서 굉장히 고생했는데 form태그 위치 문제였다

하지만 로직상으로는 아무 문제 없었기에 오류는 뜨지않고 기능은 실현되지않는 대환장파티 발생

<form> 태그 쓸때는 중간중간 테스트 해가며 사용하자

---

 

진척이 없다가 다행이 팀원분의 도움으로 여기까지 올수있었다 앞으로 모르면 째깍째깍 물어봐야겠다