부트캠프 React 과정 7.19

김진우·2023년 7월 19일
0

오늘의 목표

  • 팀프로젝트 기능 하나씩 완성하기

어려운점

  • 오늘 파이어베이스에 있는 필요한 내용들을 가져올때 react-query를 사용해서 할려고 했는데.
    이 부분이 처음 접해보는 부분이라 많은 오류가 생겼었다.
    우선 firebase 설정을 제공하는 함수중에 getDocs를 사용해서 내가 원하는 데이터가 나올수 있도록 설정을 하고 const { data } = useQuery('storys', getStorys) 내가 사용할 부분에서
    react-query를 사용해서 data를 뽑아냈다.
    이 과정에서 json-server만 사용을 해봐서 그런지 getStorys return 값을 구해 원하는 데이터 를 보내는 것이 어려웠는데 결국
    ``

    const getStorys = async () => {
    const q = query(collection(db, "storys"));
    const querySnapshot = await getDocs(q)
    const initialStorys = []
    querySnapshot.forEach((doc) => {
    const data = {
    id: doc.id,
    ...doc.data(),
    }
    initialStorys.push(data)
    })
    return initialStorys
    }
    ``

하나하나 콘솔을찍어보고 튜텨님에게 여쭤보고 하여서 필요한 데이터를 위에 방법으로 뽑아내는데 성공을 하였다.

느낀점

  • 오늘 내가 해야될 부분에서 firebase에 들어가있는 내용들을 불러와서
    필요한곳에 사용하도록 하고 css적인 요소를 다듬었다. 아직 해야 할것이 많기는 하지만
    하나하나 해결 하고 있고 하면서 어려운 요소들도 많이 있지만 모르는 부분은 생각을하고 해도 안됫을때 튜텨님에게 찾아가서 의견을 받고 다시 시도하고 하는 방법으로 해야 겠다는 생각을 했습니다.

1개의 댓글

comment-user-thumbnail
2023년 7월 19일

좋은 글 잘 읽었습니다, 감사합니다.

답글 달기